元素粒子效果库(消失/显示)
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(/
?
/);
打乱数组
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{
500px;
height: 200px;
border:2px solid #c080ff;
display:flex;
justify-content: space-between;
.aaa,.bbb{
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 ]