- 博客(43)
- 收藏
- 关注
RSS订阅原创 移动端知识
移动端知识理解click的300ms的延迟响应如何解决移动端Click事件300ms延迟的问题？禁止用户缩放判断是否设置了上述meta标签，来处理缩放功能使用zepto.js的tap事件FastClick.jsem/rem/metavm / vh 与 rem理解click的300ms的延迟响应Click事件在移动手机开发中有300ms的延迟，因为在手机早期，浏览器系统有放大和缩放功能，用户在屏幕上点击两次之后，系统会触发放大或者缩放功能，因此系统做了一个处理，当触摸一次后，在300ms这段时间内有没有
2021-01-29 15:46:01
269
原创 数据可视化知识点汇总
数据可视化canvassvg项目矢量图svgCanvas与SVG的主要区别d3zrenderthreeAntvAntv--g2g6L7HighchartsEchart系列组件坐标系样式管理数据维度映射移动端自适应事件和行为拖拽自定义系列v-chartsvue-echartscanvas“画布”,像素的位图编写canvas标签 添加默认宽高<canvas id="canvas" width="800" height="800"></canvas>获取到canvas
2021-01-29 11:27:35
1388
原创 前端知识点总结
前端知识点总结一、css 布局浮动清除浮动定位flex布局表格布局网格布局JS布局二、css 盒子模型一、css 布局浮动float:left/right/none/inherit左浮动/右浮动/不浮动/继承父级float属于不完全脱离文档流，标准文档流指的是 文档流+文本流。文档流：相当于盒子模型来说的。所以使用float容易造成父级塌陷。文本流：相对于文字段落讲的。浮动后文字会认同浮动元素占据的区域，围绕他布局。优点：比较简单，兼容性也比较好。只要清除浮动做的好。缺点：要做清除浮动
2021-01-27 10:07:05
624
原创 TypeScript 装饰器
TypeScript 装饰器类的装饰器简单版本复杂版本方法装饰器访问器修饰器属性修饰器参数装饰器装饰器实战装饰器本身是一个函数装饰器通过@符号使用装饰器是实验语法需要将tsconfig.json 打开打开"experimentalDecorators": true ,打开"emitDecoratorMetadata": true装饰器什么时候运行：在类创建好后，就执行装饰器，和类实例化无关。多个装饰器收集：从上到下，从左到右多个装饰器执行：从下到上 从右到左，先收集的后执行类的装饰器
2020-08-27 16:46:24
322
原创 TypeScript Parcel打包TS和全局类型
TypeScript Parcel打包TS和全局类型使用 Parcel 打包 TS 代码类似全局类型使用 Parcel 打包 TS 代码类似webpacknpm init =>package.jsontsc --init =>tsconfig.jsonnpm install parcel@next -D (比较粗略)tsconfig.json:“outDir”: “./dist” “rootDir”: “./src”package-lock.json:“test”: “parce
2020-08-27 16:34:08
561
原创 TypeScript 泛型
TypeScript 泛型泛型类中泛型泛型function join(a: string | number, b: string | number) { return `${a}${b}`;}// 需求：第一个参数和第二个参数类型要一致/** * 泛型 * 泛指的类型 * 用的时候知道类型 * 1、类型推断 * 2、类型注解 */function join1<T>(a: T, b: T) { return `${a}${b}`;}// T为泛指类型 这里改为
2020-08-27 16:33:48
96
原创 TypeScript 命名空间及模块化
TypeScript 命名空间及模块化命名空间模块化命名空间// page.ts// 所有的类都会变成全局变量// 现在只要page是全局变量,采用namespace// 类似模块发开发，一组相关内容放在一起，对外放置一个接口// 两个namespace 之间的关系///<reference path="./components.ts" />namespace Home{ export class Page { // 只能类里面使用 u
2020-08-27 16:33:25
207
原创 TypeScript 枚举类型
TypeScript 枚举类型/** * 枚举类型 * 不设置值枚举根据初始值递增 */enum State { OFF = 1, ON = 0, DELE = 2,}function getResult(status: number) { if (status === State.ON) { console.log("ON"); } else if (status === State.OFF) { console.log("OFF"); } else
2020-08-25 15:26:09
130
原创 TypeScript 联合类型和类型保护
TypeScript 联合类型和类型保护联合类型类型保护联合类型interface Bird { fly: boolean; sing: () => {};}interface Dog { fly: boolean; bark: () => {};}/** * 联合类型 * @param animal * animal只有联合含有的属性 */// 类型断言function trainAnial1(animal: Bird | Dog) { if (
2020-08-25 15:18:13
198
原创 TypeScript 类
TypeScript 类定义与继承类中的访问类型和构造器定义与继承// 类的属性和方法class Person2 { name: string = "ting"; getName() { return this.name; }}const person2 = new Person2();console.log(person2.getName());// 类的继承// 会继承上一级的方法// 重写：父类的方法和属性重写// super == 父类(子类重写父类，调用父
2020-08-25 14:26:40
120
原创 TypeScript interface
TypeScript interfaceinterfaceinterface 和 type的区别interface/** * ? age属性可有可无 * 属性前面加 readonly,表示只读 * [propName: string]: any; 可以扩展 * 可以写方法 */interface Person { // readonly name:string name: string; age?: number; [propName: string]: any; sa
2020-08-25 14:10:25
272
原创 TypeScript 数组和元组
TypeScript 数组和元组数组元组数组// const numArr = [1, 2, 3];const numArr: number[] = [1, 2, 3];// const arr = [1, "1", true];const arr: (number | string | boolean)[] = [1, "1", true];// 数组必须只有{name:string,age:number}const objArr: { name: string; age: number
2020-08-25 11:43:44
332
原创 TypeScript 函数
TypeScript函数js函数定义ts函数定义js函数定义function hello() {}const hello1 = function () {};const hello2 = () => {};ts函数定义/** * 有参数的函数 * 参数添加类型注解 * 返回类型根据情况添加类型注解 */function add(a1: number, b1: number): number { return a1 + b1;}const total2 = add(1,
2020-08-25 11:22:38
71
原创 TypeScript 基础类型和对象类型
TypeScript基础类型和对象类型基础类型对象类型基础类型number、string、null、undefined、symbol、boolean、voidlet count: number;let names: string;let nulls: null;let undefineds: undefined;let symbols: symbol;let boolens: boolean;对象类型// 定义了tearcher对象，string的names，number的age。
2020-08-25 11:13:55
387
原创 TypeScript 类型注解和类型推断
TypeScript类型注解和类型推断类型注解类型推断类型注解告诉ts变量的类型// 变量为number类型let counts2: number;count: 123;类型推断ts 自行推断变量类型// numberlet countInference = 123;// 可推断的类型let a = 1;let c = "2";let d = a + c;// 不可推断// 参数需要自定义类型// 对象的属性/参数等类型固定function getTotals
2020-08-25 11:01:28
328
原创 TypeScript 静态类型
TypeScript 静态类型自定义数据类型interface 定义数据类型Point 对象 具有 number 类型的x,number类型的yinterface Point { x: number; y: number;}创建point 具有 Point的的属性和方法const point: Point = { x: 3, y: 4,};//1. 永远是数字类型//2. 具备该类型的所有的属性和方法const counts: number = 2019;
2020-08-25 10:48:45
147
原创 TypeScript 安装搭建
TypeScript 安装搭建优势搭建环境官网:https://www.typescriptlang.org优势ts 的静态类型使得开发过程中，发现潜在的问题编辑器有更好的代码提示类型定义，代码潜在类型搭建环境安装node全局安装typescript： npm install typescript -g运行方法一 （分步骤运行）：编译： tsc 文件路径.ts运行：node 文件路径.js方法二 （安装ts-node一步到位）：安装：npm install -g ts-no
2020-08-25 10:36:31
162
原创 ES6 async 异步
ES6 async 异步概念返回一个 Promise 对象await概念async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。async function getStockPriceByName(name) { const symbol = await getStockSymbol(name); const stockPrice = await getStockPric
2020-08-24 15:03:35
80
原创 ES6 Promise异步
ES6 Promise异步概念用法创建 new Promise(callback())实例调用概念是异步编程的一种解决方案。Promise对象的状态不受外界影响。一旦状态改变，就不会再变。Promise缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。当处于pending状态时，无法得知目前进展到哪一个阶段。用法创建 new Promise(callback())const promise = new
2020-08-24 14:38:29
90
原创 ES6 Proxy和Reflect
ES6 Proxy和ReflectProxy概念创建 new Proxy(target, handler)handler对象this指向Reflect概念静态方法Proxy概念Proxy(代理）在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截创建 new Proxy(target, handler)var proxy = new Proxy(target, handler);target参数表示所要拦截的目标对象handler参数也是一个对象，用来定制拦截行为
2020-08-24 14:06:11
117
原创 ES6 Set 和 Map 数据结构
ES6 Set 和 Map 数据结构概念Set创建 new Set()添加 add()删除 delete()返回总数 size判断是否含有 has()清除所有成员clear()Set转为数字 Array.from遍历WeakSet概念Map创建 new Map()添加 set()删除 delete()根据键名获取值 get()判断是否存在has()清除所有成员clear()Map 转数字 扩展运算符数组转mapMap 转为对象对象转mapMap转jsonJSON 转Map遍历WeakMap概念常用概念
2020-08-24 13:19:10
96
原创 ES6对象扩展
ES6对象扩展属性的简洁表示法属性表达式属性遍历for...inObject.keys(obj)Object.getOwnPropertyNames(obj)Object.getOwnPropertySymbols(obj)Reflect.ownKeys(obj)super 关键字对象结构赋值属性的简洁表示法//属性简写const foo = 'bar';const baz = {foo}...
2020-08-24 11:06:38
87
原创 ES6 Symbol
ES6 SymbolSymbol创建方法Symbol 不相等遍历 Object.getOwnPropertySymbols()|Reflect.ownKeys()Symbol.for()重新使用同一个 Symbol 值Symbol.keyFor()返回一个已登记的 Symbol 类型值的keySymbolES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（Strin
2020-08-24 11:05:49
74
原创 ES6数组扩展
数组扩展扩展运算符替代函数的 apply 方法扩展运算符应用Array.from()Array.of()数组实例的 includes()扩展运算符扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3替代函数的 apply 方法// ES5 的写法Math.ma...
2020-01-07 16:05:54
102
原创 ES6函数扩展
ES6函数扩展参数指定默认值与解构赋值默认值结合使用参数默认值的位置函数的 length 属性作用域例子rest严格模式第一种是设定全局性的严格模式第二种是把函数包在一个无参数的立即执行函数里面。箭头函数注意点尾调用参数指定默认值//方式一//问题:对应的布尔值为false，则该赋值不起作用function log(x, y) { y = y || 'World'; console...
2020-01-07 15:04:53
64
原创 ES6数值的扩展
ES6数值的扩展Number.isFinite() , Number.isNaN()Number.parseInt(), Number.parseFloat()Number.isInteger()Math.trunc()Math.sign()Number.isFinite() , Number.isNaN()Number.isFinite()用来检查一个数值是否为有限的（finite），即不是...
2020-01-07 10:31:52
107
原创 ES6字符串新增方法
ES6字符串新增方法incluce/startsWith/endsWithrepeat ie9+padStart/padEnd ie11+trim/trimStart/trimEnd(ie9+)incluce/startsWith/endsWith确定一个字符串是否包含在另一个字符串中。{ let s = 'hello word!'; s.startsWith('H');//true...
2019-12-13 14:13:53
125
原创 ES6模板
ES6模板字符串什么是模板字符串trim${}调用函数模板编译什么是模板字符串模板字符串（template string）是增强版的字符串，用反引号（`）标识。// 普通字符串`In JavaScript '\n' is a line-feed.`// 多行字符串`In JavaScript this is not legal.`console.log(`string text...
2019-12-13 11:24:58
222
原创 ES6解构赋值
ES6解构赋值什么是解构赋值默认值数组解构赋值对象解构赋值对象解构使用场景字符串解构赋值数值和布尔值解构赋值set解构赋值函数参数解构赋值Iterator解构赋值使用括号用途交换变量值给变量赋值函数参数的定义函数参数的默认值遍历 Map 结构输入模块的指定方法什么是解构赋值解构赋值是对赋值运算符的扩展。解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。解构赋值的...
2019-12-12 16:56:01
277
原创 ES6新增变量
ES6变量let定义let解决，闭包循环问题块级作用域const定义let定义不存在变量提升不存在变量提升typeOf也无法使用只要在块级作用域内存在let命令，它所声明的变量就绑定在这个区域，不再受外部的影响。命名不能重复var c=1;{ //console.log("before",c);//不存在变量提升 //console.log("typeOf",typeO...
2019-12-12 13:14:56
110
原创 JavaScript oop面向对象
JavaScript oop面向对象继承原型链继承和Java的class继承对比内置构造器的prototype实现继承的方式模拟重载调用子类方法链式调用抽象类模块化探测器function Foo(){ this.y = 2;};typeof Foo.prototype;//‘object’Foo.prototype.x = 1;var obj3 = new Foo();obj3.y/...
2019-12-11 14:59:00
104
原创 javaScript闭包
javaScript闭包什么是闭包？闭包常见错误循环闭包使用：封装总结什么是闭包？闭包指的是：能够访问另一个函数作用域的变量的函数。不同于一般函数，它允许一个函数在立即词法作用域外调用时，仍可以访问非本地变量。示例：function outer(){ var localVal = 30; return function(){ return localVal; };};va...
2019-12-11 11:49:50
82
原创 JavaScript函数this指向
JavaScript函数this指向一般函数 this/严格模式this作为对象方法函数的this对象原型链上的thisget set的this构造器中thisthis指向总结更改this指向call/applyapply / call严格模式call 和 apply区别bind改变this科里化bind 与 newbind方法模拟argumentsarguments严格模式下:Object.pr...
2019-12-09 11:41:51
111
原创 JavaScript函数
JavaScript函数什么是函数函数申明函数表达式命名函数表达式函数构造器构造器，作用域函数申明/函数表达式/构造器区别什么是函数是JavaScript代码，被定义一次，也可以知道调用多次。也是对象，同对象操作和传递，既函数对象。函数体内没有写没有return 返回为undefind。函数申明function add(){}函数表达式var add = function(){}...
2019-12-09 10:59:37
77
原创 JavaScript对象
javaScript对象创建对象字面量构造器原型链继承读写对象属性读get set 方法属性级的权限设置对象标签序列化/其它对象化对象转JSONJSON转对象序列化自定义其它对象方法创建对象字面量var obj = { x:1, y:2}构造器var obj = new Object();自定义函数对象:function Man(){ this.z=1};var pe...
2019-12-05 15:15:35
89
原创 javaScript严格模式
javaScript严格模式严格模式：特殊运行模式，修复语言上不足，提供更强的错误检测，并增加安全性。‘use strict’ （不一定第一行）严格模式：不允许with不允许未申明就定义变量arguments 变为参数的静态副本!function(a){ arguments[0] = 100; console.log(a);}(2); //100 不传值为nudef...
2019-12-04 10:33:40
63
原创 JavaScript异常执行顺序
JavaScript异常try-catch finallytry 必须跟catch或者finally。执行顺序案例1：try{ try{ throw new Error('opps');//出现异常需要跳异常处理，内部没有catch，跳外部。 } finally{ console.log("finally");//跳外部异常前先执行"finally" ...
2019-12-04 10:12:32
173
原创 JavaScript数据类型
JavaScript数据类型弱类型特征类型原始类型对象类型隐式转换等于 ==等于== 的类型转换严格等于 === 用于类型比较包装对象类型检测检测方法typeofinstanceofObject.prototype.toStringconstructor使用场景弱类型特征32+32 // 64 加号加法运算‘32’+32 // ‘3232’加号字符串拼接...
2019-12-03 10:08:53
158
原创 前端页面优化
前端页面优化浏览器得请求到发送到返回都经历了什么？可优化有哪些？资源压缩，减少http请求大小图片优化，减少http请求大小雪碧图，减少http请求次数网站在浏览器端是如何渲染得？特点css 堵塞，防止渲染减慢速度js 堵塞，防止渲染减慢速度懒加载和预加载懒加载懒加载使用，减少刚开始加载页面资源过大预加载预加载使用，提前加载资源增加显示速度css性能会让JavaScript变慢么？重绘回流避免回流...
2019-11-28 17:02:58
144
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人