本两周学习总结

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

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) 用来管理服务,包括服务的创建,服务的获取

1. 通过@ngModule()的providers 将服务注入到NgModule中

限制服务只能在当前NgModule里面使用

@NgModule({
    ...
   /**
   * 本模块需要创建的服务。这些服务可以在本模块的任何地方使用。
   * NgModule我们可以认为是注入器，Provider是提供商。注入器通过提供商的信息来创建服务
   */
    providers: [],
    ...
})

1. 举一个实用的小例子

创建一个服务
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
  ],
  ...
})

然后在需要的页面直接使用就可以了

1. 列举另外一个例子

• 创建一个服务

  ```js
  import {Injectable} from '@angular/core';

@Injectable()
export class NewsService {
constructor() {
}
public alls(): any {
console.log('news');
}
}
```

• 直接使用这个服务

  需要注意在组件中使用的时候
  @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注入器

服务提供商

1. 服务提供商的原型

   是一个对象,告诉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}]

2. DI令牌

   ```js
   DI令牌是用来查找服务的

constructor(private loggerService: LoggerService) {}

providers: [LoggerService]
```

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

1. 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 ]