2020年02月_W Y L

原创闭包基础知识点

什么是闭包一个可以访问其他作用域的变量,并且能够记住所在的词法作用域的函数怎么判断是一个闭包当一个函数的返回值是另一个函数,这个返回的函数在原来所在的函数外部被执行了,并且访问了原来函数的变量,那这个上下文便产生了闭包环境闭包的优点和缺点优点实现了可以访问其他作用域变量,并且避免了全局变量对自身词法作用域变量的污染可以把局部变量(自身作用域的变量)驻留在内存中一直保存着上一次执行的值...

2020-02-29 12:12:13 167

原创 Vue组件通信相关问题

1. 组件通信方式有哪些？父子组件通信：props 和 event、v-model、 .sync、 ref、 $parent 和 $children非父子组件通信：$attr 和 listeners、provide和inject、eventbus、通过根实例listeners、 provide 和 inject、eventbus、通过根实例listeners、provide和inject、...

2020-02-28 15:15:52 61

原创 Vue源码9个基础方法

基础判断function isUndef(v) { return v === undefined || v === null}function isDef(v) { return v !== undefined && v !== null}function isTrue(v) { return v === true}function isFal...

2020-02-27 12:46:30 609

原创 JS 执行上下文

当代码运行时，会产生一个对应的执行环境，在这个环境中，所有变量会被事先提出来（变量提升），有的直接赋值，有的为默认值 undefined，代码从上往下开始执行，就叫做执行上下文。例子 1: 变量提升foo // undefinedvar foo = function() { console.log('foo1')}foo() // foo1，foo赋值var foo = fun...

2020-02-26 10:27:30 51

原创 http

TCP/IP通信的传输流流程TCP/IP通信的传输流的整个流程：http(客户端)<->TCP<->IP<->网络<->网络<->IP<->TCP<->http(服务端)这个流成大概是这样的：首先作为发送端的客户端在应用层(http协议)发出一个想看xxx.xxx.com网站的http请求。接着，为了方便传输...

2020-02-25 12:26:01 2680

原创 Html5

对WEB标准和W3C的理解认识html —结构css —表现js —行为什么是DOCTYPE及作用DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析以及切换浏览器模式。（DTD告诉浏览器我是什么文档类型，浏览器会根据这个来判断用什么引擎来解析和渲染他们）...

2020-02-24 10:49:56 67

原创 apply、call 区别

对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样func.call(this, arg1, arg2)func.apply(this, [arg1, arg2])apply、call 实例// 数组追加var array1 = [12 , "foo" , {name:"Joe"} , -2458];var array2 = ["Doe" , 555 , ...

2020-02-23 14:15:56 112

原创 this 指向

使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的 this 指向哪个对象。普通函数：谁调用指向谁全局变量指向全局对象-windowvar username = 'cn'function fn() { alert(this.username) //cn}fu()...

2020-02-22 16:25:21 111

原创 JS递归算法

递归的概念就是函数自己调用自己本身，或者在自己函数调用的下级函数中调用自己。递归的步骤1、假设递归函数已经写好2、寻找递推关系3、将递推关系的结构转换为递归体4、将临界条件加入到递归体中求和求 1-100 的和function sum(n) { if (n == 1) return 1 return sum(n - 1) + n}斐波拉契数列1,1,2,3,5,8...

2020-02-21 17:50:36 266

原创作用域和闭包

JS 作用域Javascript 变量的作用域无非就是两种：全局变量和局部变量。Javascript 语言的特殊之处，就在于函数内部可以直接读取全局变量。全局作用域(Global Scope)在代码中任何地方都能访问到的对象拥有全局作用域，一般来说一下几种情形拥有全局作用域：1、最外层函数和在最外层函数外面定义的变量拥有全局作用域var name = 'Jack' // 全局定义fun...

2020-02-20 09:35:37 68

原创数组新增常用的4个方法

map --映射let arr=[66,59,80];let result=arr.map(item => {if(item >= 60){ return "及格"}else{ return "不及格"}});//result:["及格", "不及格", "及格"]reduce --汇总let arr = [12,69,180,8763];let resu...

2020-02-19 17:39:15 574

原创 es6-箭头函数

不需要function关键字来创建函数es5创建函数var aa = function() {}es6创建函数var aa = () => {}可以极大的简写函数es5函数var fn = function(a) { return a + 5 }可以利用箭头函数简写为： var fn = a => a + 5;简写规则：当函数所传参数只有一个时，可...

2020-02-18 12:41:40 112

原创 var let const 区别

var声明的变量会挂载在window上，而let和const声明的变量不会var a = 100;console.log(a,window.a); // 100 100let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1;console.log(c,window.c); // 1 undefi...

2020-02-17 09:08:50 123

原创 es6运算符-剩余运算符

剩余运算符当函数参数个数不确定时，用 rest运算符function rest1(...arr) { for (let item of arr) { console.log(item); }}rest1(1, 2, 3);// 结果// 1// 2// 3当函数参数个数不确定时的第二种情况function rest2(item, ...arr...

2020-02-16 14:27:59 684

原创 es6运算符-扩展运算符

扩展运算符数组展开 function test(a,b,c){ console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 } var arr = [1, 2, 3]; test(...arr);将一个数组插入到另一个数据中 var arr1 = [1, 2, 3]; var ar...

2020-02-15 18:05:31 86

原创 JavaScript 对象转值的原理

求值的基础JavaScript 中存在的六种值类型：Null, Undefined, Boolean, Number, String, Symbol。既然是对象，就说明它存在，不能转为 Null 和 Undefined 类型。同理，对象一定非空，转 Boolean 类型为 true对象不会自动发生 Symbol 转换，除非使用强制类型转换函数 Symbol()比较常见的情况是，对象转 N...

2020-02-14 10:58:23 105

原创 css波浪百分比

HTML代码：<div class="container"> <div class="wave"></div></div>CSS代码：<style> .container { position: absolute; width: 200px; ...

2020-02-13 17:16:31 369

原创 CSS抖音标

HTML代码：<div class="g-container"> <div class="j"></div> <div class="j"></div></div>CSS代码：<style> body { background: #000; ...

2020-02-12 16:32:48 370

原创 css大白

HTML代码：<div class="bigwhite">  <div class="head"> <div class="eye"></div> <div class="eye2"></div> &...

2020-02-11 15:29:50 168

原创 7 个基础 JavaScript 函数

debounce防抖函数英文名叫“debounce function”，它通常是作为频发事件的回调使用的。对于 scroll、resize、key* 这类事件，如果不使用防抖函数处理，那么由于事件的频繁发生，触发回调逻辑的不断调用，很可能会发生性能问题。下面提供了防抖函数一个参考实现 debounce：// 返回一个函数，如果该函数被连续调用，那么这个过程中不会触发 func 的调用。//...

2020-02-10 16:11:25 441

原创 vue中使用axios

axios基于http客户端的promise，面向浏览器和nodejs特色浏览器端发起XMLHttpRequests请求node端发起http请求支持Promise API监听请求和返回转化请求和返回取消请求自动转化json数据客户端支持抵御安装使用npm：npm install axios --save为了解决post默认使用的是application/json请求数...

2020-02-09 17:28:56 103

原创 VUE路径问题

import：html文件中，通过script标签引入js文件。而vue中，通过import xxx from xxx路径的方式导入文件，不光可以导入js文件。“xxx”指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。“xxx路径”指的是文件的相对路径.src下有components,router文件夹和App.vue文件,components文件夹下游apple.v...

2020-02-08 18:19:02 292

原创 TypeScript-类

类的基础TypeScript中的类和ES6中的类十分相似，例子：class Man{ name: string; constructor(msg: string) { this.name= msg; } play() { return "Hello, " + this.name; }}let man = new Ma...

2020-02-07 16:29:16 160

原创 TypeScript枚举

概念举是对JavaScript标准数据类型集的扩充，常被用来限定在一定范围内取值的场景。在TypeScript中支持数字和字符串的枚举。我们可以用enum来实现。数字枚举先看看一个数字枚举例子：enum Basketballer{ Yao, Yi, Wang}Basketballer.Yao; //0Basketballer.Yi; //1Basketb...

2020-02-06 15:27:03 584

原创 React性能优化

一、事件的优化1、构造函数中声明export default MyCom extends Component{ constructor(){ super() this.fun = this.fun.bind(this) } render(){ return( <div onClick={thi...

2020-02-05 11:38:50 119

原创前端性能优化

一、HTML优化渲染顺序1、CSS样式表置于头部，CSS会一边加载一边渲染2、JS脚本置于尾部，JS在未加载完成之前，会阻塞渲染3、使用外部的样式表和脚本，优先加载出HTML结构4、关键JS、CSS代码可以内嵌在HTML中，比如：rem动态等5、避免使用iFrame6、使用骨架屏二、CSS优化加载优化1、避免使用css的@import2、避免使用通配符3、避免使用!impo...

2020-02-04 13:36:02 76

原创 JavaScript--Boolean对象

概述Boolean对象是 JavaScript 的三个包装对象之一。作为构造函数，它主要用于生成布尔值的包装对象实例。var b = new Boolean(true);typeof b // "object"b.valueOf() // true上面代码的变量b是一个Boolean对象的实例，它的类型是对象，值为布尔值true。注意，false对应的包装对象实例，布尔运算结果也是...

2020-02-03 12:23:24 104

原创 JavaScript 包装对象

定义对象是 JavaScript 语言最主要的数据类型，三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的“包装对象”。所谓“包装对象”，就是分别与数值、字符串、布尔值相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。var v1 = new Number(123);var v2 =...

2020-02-02 10:05:27 120

原创 TypeScript 新功能

1. 可选链从 v3.7 可用在下面的例子中，要访问 address，你必须遍历 data.customer.address，而且 data 或 customer 有可能是 undefined，所以通常使用 && 运算符或类似例子中的技巧遍历检查每个层次的定义。现在你可以用 .? 运算符来选择性地对数据访问。通过这种方式，如果存在尚未定义的父级对象，则会在链中的任何位置返回未...

2020-02-01 11:58:23 178

W Y L