本两周学习总结

元素粒子效果库(消失/显示)

https://github.com/codrops/ParticleEffectsButtons

js代数求解库

http://algebra.js.org/

async/await

async 关键字,就是函数返回的是一个promise

const add = async () => 1
add().then(res => {
    console.log(res) //1
  })

计算字符串的字节大小

const byteSize = str => new Blob([str]).size;

const sizeof = target => encodeURIComponent(target).replace(/%[^%]{2}/g, '.').length;

获取元素在数组中的所有index

 /* indexOfAll([1,2,1,3,4], 1)
 * // => [0,2]
 *
 * indexOfAll([1,2,3,4], 5)
 * // => []
 */
const indexOfAll = (arr, val) =>
  arr.reduce((acc, el, i) => (el === val ? [...acc, i] : acc), []);

数组最大值得索引

const maxIndex = arr => arr.reduce((acc, val, i) => val > acc ? acc = i : acc, 0);
console.log(maxIndex([1, 2, 3, 4, 5, 6, 7, 34, 1]))// 7

打印一段函数的消耗时间

const add = (a, b) => a ^ b;
const times = () => {
  console.time('times')
  add(10, 20)
  console.timeEnd('times')
}
times()

切割换行字符串

const splitLine = str => str.split(/\r?\n/);

打乱数组

const randoms=arr=>arr.sort(()=>Math.random()-0.5);
console.log(randoms([1, 2, 3, 4]))
//[ 4, 2, 1, 3 ]

// 从数组中随机抽出一个数
const sample = arr => {
  return arr[Math.floor(Math.random() * arr.length)]
}
console.log(sample([1, 2, 3, 4]))

比较器

// [min,max]范围,随机生成[0,max]长度的数组
const randomIntArray = (min, max) => Array.from(
  { length: Math.floor(Math.random() * max) },
  () => Math.floor(Math.random() * (max - min + 1) + min));
console.log(randomIntArray(1, 10))

随机颜色

const randomHexColor=()=>'#'+(Math.random() * 0xffffff * 1000000).toString(16).slice(0,6);
console.log(randomHexColor())  // #92d5ad

检测source对象中的值是否在obj

const matches = (obj, source) => Object.keys(source)
  .every(val => Reflect.ownKeys(obj, val) && obj[val] === source[val])

console.log(matches({
  age: 25,
  hair: 'long',
  beard: true
}, {
  hair: 'long',
  beard: true
}))
//true

判断是否是正确的JSON格式

const isValidJSON = val => {
  try {
    JSON.parse(val)
    return true
  } catch (e) {
    return false
  }
}

vue3

安装插件
vue  add xxx

大写字母分割单词

?= 找到位置
function fromCamelCase(string, joiner){
    return string.split(/(?=[A-Z])/).join(joiner || ' ');
}

console.log(fromCamelCase('AdddkBdldldCdlsls'));
// Adddk Bdldld Cdlsls

只出现一次的数字

const singleNumber = nums => nums.reduce((acc, val) => acc ^ val, 0);

console.log(singleNumber([1, 2, 3, 4, 1, 2, 3,]));   // 4

flex (左,中)(中,右)

.ccc{
    width: 500px;
    height: 200px;
    border:2px solid #c080ff;
    display:flex;
    justify-content: space-between;

    .aaa,.bbb{
        width: 50px;
        height: 50px;
        border:1px solid #d04c23;
    }
    .aaa{
        margin-left:225px;//这个是计算出来的
    }
}

学习资料

https://blog.csdn.net/qq_34414916/article/details/85164742
https://www.jianshu.com/p/4b10948d456c
https://www.jianshu.com/p/f0f81a63cbcb

美文

http://www.ifuun.com/category/%e7%be%8e%e6%96%87/

创建一个新组件

ng generate component 组件名称
也可以
ng g component 组件名称

创建一个新服务

ng generate service 服务名称
也可以
ng g service 服务名称

创建一个路由

ng generate module app-routing --flat --module=app

--flat 把这个文件放进了 src/app 中，而不是单独的目录中。
--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

Angular模块

参考链接https://blog.csdn.net/qq_34414916/article/details/85164742

我们看看这个元数据对象
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
@NgModule()函数中的参数就是元数据对象

imports(导入表)---该模块依赖的其他模块应该写在这个数组中,可以使用其他模块导出的指令,组件,管道

providers（服务提供商）——本模块依赖或者提供的服务，一个模块级别的服务，可以被注入（被使用）到该模块的任何地方

declarations（可声明对象表）——属于本模块的组件、指令、管道都应该放在这个数组中，也就是说，它们三者是Angular中的可声明对象！

exports（导出表）——本模块提供给其他外部模块使用的可声明对象（一定是declarations数组的子集），其他模块可以通过导入该模块（写在imports数组中）来使用这些可声明对象

bootstrap：启动引导的组件，或者也叫根组件

根模块和普通模块的区别就在于这个bootstrap，因为，boostrap只应该出现在根模块中

创建一个模块
ng generate module 模块

依赖注入之服务

https://www.jianshu.com/p/4b10948d456c

注入器(Injector) 用来管理服务,包括服务的创建,服务的获取

通过@ngModule()的providers 将服务注入到NgModule中
限制服务只能在当前NgModule里面使用
@NgModule({
	...
   /**
   * 本模块需要创建的服务。这些服务可以在本模块的任何地方使用。
   * NgModule我们可以认为是注入器，Provider是提供商。注入器通过提供商的信息来创建服务
   */
    providers: [],
    ...
})
举一个实用的小例子
创建一个服务
ng g service logger

import { Injectable } from '@angular/core';
 
@Injectable()
export class LoggerService {
 
    constructor() { }
 
    getLog() {
        return 'test NgModule level service successfully';
    }
}
新建一个模块
ng  g module hero

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
    // 在这里添加需要注册的服务
  providers: [LoggerService]
})
在入口文件app.module.ts注入这个模块(在创建模块的时候添加 --flat --module=app) 可以省略下面添加的步骤
@NgModule({
  ...
  imports: [
	//引入hero 模块
    LoggerModule
  ],
  ...
})
然后在需要的页面直接使用就可以了

列举另外一个例子
创建一个服务
import {Injectable} from '@angular/core';

@Injectable()
export class NewsService {
constructor() {
}
public alls(): any {
console.log('news');
}
}
* 直接使用这个服务

```js
需要注意在组件中使用的时候
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.less'],
  providers:[ServicesService,NewsService] //在这里添加需要的服务
})
3.root 级别的服务

在服务的元数据中指定,默认作用域就是root
@Injectable({
  providedIn: 'root' // root级别的服务
})
一般来说,你不需要在app.module.ts 中 providers 注入服务,因为root注入器就是AppModule注入器

服务提供商

服务提供商的原型

是一个对象,告诉Angular 怎样来找到对应的服务(通过DI令牌),providers 表示服务提供商列表,其中的元数据对象的providers数组中就只有一个类名,这个就是服务供应商,只不过useClass这种服务提供商的简写形式
服务服务商的原型
{provide: DI令牌, useClass/useExisting/useValue/useFactory: 服务类名}
provide——DI令牌，它告诉Angular应该在哪里提供该服务

useClass/useExisting/useValue/useFactory——服务提供商提供服务的方式

下面这两种写法是等价的(我们最长使用的new(useClass)可以直接提供一个服务实例)
providers:[LoggerService] 
<=> 
providers:[{provider: LoggerService, useClass: LoggerService}]
DI令牌
DI令牌是用来查找服务的

constructor(private loggerService: LoggerService) {}

providers: [LoggerService]
```

DI令牌就是LoggerService, 写在构造函数中的那个你以为是服务类的类名其实是DI令牌,

useExisting服务提供商

别名提供商,
providers: [ NewLoggerService, 
          { provide: OldLoggerService, useExisting: NewLoggerService}]
使用第二个服务提供商
constructor(private oldLoggerService: OldLoggerService)

TypeScript 接口还可以这么写

const sum = (x: number, y: number) => x + y;
console.log(sum(1, 3));
//使用接口的写法
interface Person {
  (firstName: number, lastName: number): string
}

const buildName: Person = (firstName, lastName) => firstName + '' + lastName;
console.log(buildName(10, 12));

typescript 剩下参数的类型定义

const add=(a:any[],...b:any[]):any=>b;
console.log(add([1, 2], 1, 2, 3, 4, 5));
//[ 1, 2, 3, 4, 5 ]

posted @ 2019-10-28 12:12 猫神甜辣酱阅读(320) 评论(0) 编辑收藏举报

刷新页面返回顶部

房东家的猫

本两周学习总结

元素粒子效果库(消失/显示)

js代数求解库

async/await

计算字符串的字节大小

获取元素在数组中的所有index

数组最大值得索引

打印一段函数的消耗时间

切割换行字符串

打乱数组

比较器

随机颜色

检测source对象中的值是否在obj

判断是否是正确的JSON格式

vue3

大写字母分割单词

只出现一次的数字

flex (左,中)(中,右)

学习资料

美文

创建一个新组件

创建一个新服务

创建一个路由

Angular模块

依赖注入之服务

服务提供商

TypeScript 接口还可以这么写

typescript 剩下参数的类型定义

决定自己的高度的是你的态度，而不是你的才能

记得我们是终身初学者和学习者

公告