前端 - 杂记 - 个人文章 - SegmentFault 思否

js 单线程

JavaScript 的单线程，与它的用途有关。JavaScript浏览器脚本语言，JavaScript 的主要用途是实现用户互动，及操作 DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。
为了利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制，且不得操作 DOM。所以，这个新标准并没有改变 JavaScript 单线程的本质。

异步与同步

同步概念
同步是阻塞模式。当一个方法被调用时，调用者需要等待该方法执行完毕并返回才能继续执行，我们称这个方法是同步方法。
异步概念
异步是非阻塞模式。当一个方法被调用时立即返回，并获取一个线程执行该方法内部的业务，调用者不用等待该方法执行完毕，我们称这个方法为异步方法

举个生活中的例子:

同步就像你冬天早上起来上班，需要先把水烧好后再去洗脸刷牙,这样一来你就会觉得时间不够用，那么此时异步就能节约很多的时间，你可以在烧热水的时间内，完成洗漱等事情，不需要等待热水烧好。

DOM 事件流传播

事件捕获阶段（当你使用事件捕获时，父级元素先触发，子级元素后触发，即 div 先触发，p 后触发。）
处于目标阶段
事件冒泡阶段（当你使用事件冒泡时，子级元素先触发，父级元素后触发，即 p 先触发，div 后触发）

阻止事件流方式：

q1:阻止冒泡方式有哪些?
1. IE：事件对象.cancelBubble=true;
2. 火狐：事件对象.stopPropagation();
q2:阻止浏览器的默认行为有哪些？
1. event.preventDefault(); //现代浏览器
2. event.returnValue = false; //IE 低版本及部分现代浏览器。
3. return false;//兼容性比较好最好用在代码的最后面。

DOM2 级事件和普通（传统）事件区别：

1.捕获由外向内传播；冒泡由内向外。
2.传统事件不支持捕获；DOM2级事件支持捕获。
3.传统事件多个相同的事件名，会覆盖 ；DOM2级事件会依次执行。
4.DOM2级事件有兼容性的。

事件委托？

概念:利用冒泡原理，把某个子元素事件委托给父元素执行

target、this、currentTarget 的区别

target:触发事件的某个具体对象，只会出现在事件流的目标阶段（谁触发谁命中，所以肯定是目标阶段）
currentTarget:绑定事件的对象，恒等于 this，可能出现在事件流的任意一个阶段中。
通常情况下 terget 和 currentTarget 是一致的，我们只要使用 terget 即可，但有一种情况必须区分这三者的关系，那就是在父子嵌套的关系中，父元素绑定了事件，单击了子元素（根据事件流，在不阻止事件流的前提下他会传递至父元素，导致父元素的事件处理函数执行），这时候 currentTarget 指向的是父元素，因为他是绑定事件的对象，而 target 指向了子元素，因为他是触发事件的那个具体对象，如下代码和截图所示：

<div id="one">

  <div id="three"></div>

</div>

one.addEventListener('click',function(e){

    console.log(e.target);  //three

    console.log(e.currentTarget);  //one

},false);

target：获得触发事件的标签，currentTarget：得到绑定事件的标签

tupian

盒模型的种类？

标准盒模型和怪异盒模型

圣杯布局和双飞翼布局

功能相同，布局原理就是：两边固定中间自适应；实现功能方法不相同而已。

css 定位方式有那些？

position 的值为:static,relative,absolute,fixed,sticky

默认定位：
position:static

相对定位：
position:relative
参照物是自身,不脱离文档流

绝对定位：
position:absolute;
参照物是父元素，遵循就近原则，寻找父元素及其爷爷元素中设置 position:relative 属性进行定位，脱离文档流；如果都不设置定位属性，就以根元素<html>进行定位。

固定定位：
position:fixed
参照物是可视区窗口，脱离文档流

sticky 元素仅在其父元素内生效.

css 和 js

css 是样式表
js 是动态脚本语言
文件后缀名不同

rem 和 em 区别

主要区别就是浏览器根据谁转化成 px 单位,
rem 依据的是 html 的 font-size，1rem 等于 16px,
em 依据的是父元素的 font-size
@media 可以做到响应式布局

js 变量提升的

我们习惯将 var a = 2;看做是一个声明，而实际上 javascript 引擎并不这么认为。它将 var a 和 a = 2 看做是两个单独的声明，第一个是编译阶段的任务，而第二个则是执行阶段的任务。

this 指向，如何改变 this 指向以及他们的区别是什么？

谁调用它就指向谁

箭头函数中的 this 指向问题，指向的是它的环境

普通函数调用，此时 this 指向 window
构造函数调用，this 指向实例对象
对象方法调用，此时 this 指向该方法所属的对象
通过事件绑定，此时 this 指向绑定事件的对象

改变 this 指向及区别
call 和 apply 区别是参数不同
bind 是创建一个新函数，与被调函数有相同的函数体

map 和 forEach 有什么区别？

forEach()返回值是 undefined，不可以链式调用。

2、 map()返回一个新数组，原数组不会改变。

3、没有办法终止或者跳出 forEach()循环，除非抛出异常，所以想执行一个数组是否满足什么条件，返回布尔值，可以用一般的 for 循环实现，或者用 Array.every()或者 Array.some();

4、 &dollar;.each()方法规定为每个匹配元素规定运行的函数，可以返回 false 可用于及早停止循环。
https://www.cnblogs.com/shenp...

var ,let 和 const 区别

在作用域方面：
var 不存在块级作用域概念,
let 存在块级作用域概念,
在变量提升方面：
var 声明的存在变量提升
let const 声明的变量不存在变量提升，let 定义的变量要在声明后调用,因为暂时性死区
在重复声明方面：
var 可以多次声明，let 不存在多此声明
const 和 let 基本相同，唯一不同的是 const 声明的变量一旦赋值就不能再改变了

seo 优化（搜索引擎优化）

1.head 头部写入 keyword 及描述信息。

web 性能优化

减少 http 请求
使用 css scripts
样式放在头部，js 放在底部
压缩组件
使用 CDN

原生寄成方式

call，apply 构造函数继承
prototype 继承

    //call，apply 构造函数继承
    // 需要将Child改写如下，apply类似，但缺陷就是访问不到Parent.prototype的属性了
    function Child() {
    Parent.call(this);
    this.dog = "dog";
    }

    prototype 继承

    // 这样直接将Parent.prototype赋给Child.prototype的继承方式不可取，因为在改变Child.prototype里的属性会同时改变Parent.prototype
    Child.prototype = Parent.prototype; // 不能访问构造函数属性，只能访问原型

    // Object.create(Parent.prototype)构造的对象是一个空对象且它的原型指向Parent.prototype，所以这里的Parent.prototype是空对象，链接到了Parent.prototype，并不会影响到Parent.prototype
    Child.prototype = Object.create(Parent.prototype); // 不能访问构造函数属性，只能访问原型

    // 这种继承方式是将实例化后的Parent对象赋给Child的prototype，既可以访问Parent构造函数里边的属性，也可以访问原型属性
    Child.prototype = new Parent();

    // 以上任一操作完成后这一步必须操作，是将Child的构造函数指向自身，否则在执行完继承之后，实例化的对象构造函数是Parent
    Child.prototype.constructor = Child;

为什么要使用深拷贝？

在改变新的数组（对象）的时候，不改变原数组（对象）

深拷贝和浅拷贝

浅拷贝：将原对象或原数组的引用（地址）直接赋给新对象,新数组，新对象／数组只是原对象的一个引用。
深拷贝：将原对象的各项属性的“值”（数组的所有元素）拷贝给新的对象和数组，是“值”而不是“引用”。

移动端开发需要注意什么问题？

一 meta 标签的使用

<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

二手机适配等比缩放的方法:
@media 标签

三布局

flex
em 和 rem
栅格化布局
百分比布局

四文本处理

单行文本溢出

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文本溢出

display:-webkit-box !important
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(数字2表示隐藏两行)

get 和 post 区别

get 传输不安全，因为数据放在请求的 url 中；post 所有操作用户是看不到的
get 传输数据量小，因为受到 url 长度的限制；post 传输的数据量较大，一般不受限制
get 执行效率比 post 更好。get 是 form 提交的默认方式。

如何解决移动端开发出现 1px 问题？

border-img
background-image

jq 中的绑定事件，有什么区别？

on 支持事件委托
bind 不支持事件委托
one 为每一个匹配元素的特定事件（像 click）绑定一个一次性的事件处理函数

jq 中常见的元素选择方式有哪些，如何获取属性值？

一选择器:

id 选择器: &dollar;("#ID 名")
class 选择器: &dollar;(".class 名")
节点选择器：&dollar;("标签名")

二属性选择器：

&dollar;("div[id]") 选择所有含有 ID 属性的 div 元素
&dollar;("input[name='keyicom']") 选择所有的 name 属性等于的 div 元素
&dollar;("input[name!='keyicom']") 选择所有 name 属性不等于 keyicom 的 div 元素
&dollar;("input[name^="keyicom"]") 选择所有 name 属性以 keyicom 开头的 input 元素
$("input[name$="keyicom"]") 选择所有 name 属性以 keyicom 结尾的 input 元素
&dollar;("input[name*="keyicom"]") 选择所有 name 属性以 keyicom 结尾的 input 元素

bom 和 dom 有什么区别，常见的 bom 对象有哪些？

BOM 是 Browser Object Model 缩写，即浏览器对象模型
Dom 是 Document Object Model 缩写，即文档对象模型

常见的 bom 对象有哪些

window 对象——BOM 核心
document 对象
location 对象
获得当前页面的 URL，并重定向到新的页面
- location.herf
- location.port
navigator 对象
获得与浏览器有关的信息
userAgent 是最常用的属性，用来完成浏览器判断
screen 对象
主要用来获取用户的屏幕信息。
history 对象
- back() 返回上一页。
- forward() 返回下一页

go(“参数”) -1 表示上一页，1 表示下一页。

我们在页面里如何设置一个单选框，如何做一个下拉框？

    <form action="">
        <input type="radio" name="" value="喜欢"/>
        <input type="radio" name="" value="不喜欢"/>
      </form>
      <label for="">爱好</label>

      <form action="">
        <option value="读书">读书</option>
        <option value="运动">运动</option>
      </form>

在 css 中默认有什么方式布局

流式布局
左右布局
左侧固定右侧自适应
左中右布局
flex 布局

有一个 div，如何设置背景颜色，如何让 div 半透明？

background-color:rgba(255,255,255,.9)

js 中如何实现页面跳转?

location.href

如何获取用户的浏览器是什么？

navigator.userAgent

原生 js 事件传播流程是什么？

事件捕获
处于目标阶段
事件冒泡阶段

input 输入框有哪些类型？

viewport

数组去重

双层 for 循环嵌套

for (var i = 0; i < arr.length; i++) {
  for (var j = i + 1; j < arr.length; j++) {
    if (arr[i] == arr[j]) {
      //如果第一个等于第二个，splice方法删除第二个
      arr.splice(j, 1);
      j--;
    }
  }
}

es5 方法，Ie8 以下不支持

var arrs = [];
//遍历当前数组
for (var i = 0; i < array.length; i++) {
  //如果临时数组里没有当前数组的当前值，则把当前值push到新数组里面
  if (arrs.indexOf(array[i]) == -1) {
    arrs.push(array[i]);
  }
}
return arrs;

es6 利用 set 去重

function newArr(arr) {
  return Array.from(new Set(arr));
}

sort 去重

    function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对

语义化标签及好处

页面结构化，
有利于后期维护，
有利于搜索引擎抓取，

媒体查询

@media 针对不同的媒体类型定义不同的样式。

js 中获取宽度

clientWidth
offsetWidth

面向对象（封装继承多态）

封装把相关的信息（无论数据或方法）存储在对象中的能力
继承从另一个类（或多个类）得来类的属性和方法的能力
多态编写能以多种方法运行的函数或方法的能力

设计模式

工厂模式
观察者模式
单例模式
混合模式

排序算法（冒泡，选择排序，。。。）

冒泡排序
选择排序
快速排序

为什么 vue 不能再 ie8 及以下浏览器？

Object.defineProperty（）

vue 实现双向绑定的原理？

Object.defineProperty()

箭头函数和普通函数

箭头函数，可以根据表达式的多少，来判读是否省略{ ... }和 return。
箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，
普通函数的 this 指向问题，指向调用它的那个对象

虚拟 dom

特点：性能高效

VUE中router-view 多个 router

router嵌套（https://router.vuejs.org/zh/guide/essentials/named-views.html）

节流和防抖

节流：
节流是会有规律的每隔时间n就执行一次函数。
防抖：
防抖是指在一段时间内，函数被触发多次，但是只执行一次，
当达到了一定的时间间隔就会执行一次

回流和重绘

区别：回流必将引起重绘；而重绘不一定会引起回流。

回流：
当 render tree 中的一部分(或全部)元素的属性改变而需要重新构建页面。这就称为回流(reflow)。
重绘：

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，称为重绘。


比方说：只有颜色改变的时候就只会发生重绘而不会引起回流，
当页面布局和几何属性改变时就需要回流.

手机适配（rem 和弹性盒）

es6 中常用的数组方法

isArray 监测该对象是否为数组是为 true 否为 false。
filter（返回新数组，不会改变原数组,不会对空数组进行检测,只能做筛选,此方法会遍历完数组）。

var arr = [1, 2, 3, 4];
var newArr = arr.filter((item, index) => {
  return item % 2;
});
console.log(newArr); // [1,3];

find

（返回新数组，不会改变原数组,不会对空数组进行检测,只能做筛选,此方法满足条件立即跳出）

var arr = [1, 2, 3, 4];
var newArr = arr.filter((item, index) => {
  return item === 1;
});
console.log(newArr); // [1];

map
(返回新数组，不会改变原数组,可以在原有数据基础上做运算)

var arr = [1, 2, 3, 4];
var newArr = arr.map((item, index) => {
  return item + 1;
});
console.log(newArr); // [2,3,4,5];

every
(检测数组中的每一个元素是否都通过了 callback 测试，全部通过返回 true，否则返回 false。)

var arr = [1, 2, 3, 4];
var arr1 = [1, 2, 3, "4"];
var newArr = arr.every(item => {
  return typeof item === "number";
});
var newArr1 = arr1.every(item => {
  return typeof item === "number";
});
console.log(newArr); // true
console.log(newArr1); // false

reduce

对数组中的每个元素（从左到右或从右到左）执行 callback 函数累加，将其减少为单个值。

var arr = [1, 2, 3, 4];
var newArr = arr.reduce((sum, value) => {
  return sum + value;
}, 0);
console.log(newArr); // 10

const concatArr = [
  [0, 1],
  [2, 3],
  [4, 5]
].reduce((a, b) => {
  return a.concat(b);
}, []);

map 和 foreach 区别

forEach()，不改变原数组，不会返回一个新的数组，没有返回值。
map()，不会改变原数组，会返回一个新的数组。

共同点：
参数一：function(currentValue, index, arr)必需
参数二: thisValue 可选

开头结尾的空格

(trim)

ie, 火狐,谷歌

全屏查看

使用全屏插件

面向对象

封装，继承，多态
1. 封装
2. 继承
    原型链继承
    构造函数继承
    组合继承
    寄生组合式继承
3. 多态
    所谓多态，就是同一个方法的多种调用方式

字符串常用方法

1. split()，把字符串分割为子字符串数组。
2. slice() 提取字符串中两个指定索引号之间的字符（索引可以为负值，-1就是倒数第二位）。
3. substring() 提取字符串中两个索引之间的字符（两个索引不能为负值）。
4. indexOf() 返回指定字符创第一次出现的位置。
5. trim()，移除字符串首位空格，经常在对input和textarea的值做判断时用到。
6. search()，检索指定子串或者与正则表达式匹配的值，返回的值是数字。
7. replace()，替换指定子串或者与正则表达式匹配的子串。
8. match()，找到一个或者多个子串或者正则表达式的匹配。
9. toLowerCase()，把字符串转换成小写的。
10. toUpperCase()，把字符串转换成大写的。

深拷贝和浅拷贝

scss 继承

{嵌套}

scss 编译的底层原理

首先less 会转换为ast(抽象语法树）语法
然后遍历转换后所有的节点
最后再形成 css 树

ajax 请求是以什么格式发送请求

1. put 请求正文是类似 get 请求 url 的请求参数

2. post,请求正文是一个 json 格式的字符串

    ```js
    $.ajax({
    type: "post",
    url: "topupRecordController.do?updateReceiptInfo",
    data: {
        refNo: rowsData[0].refNo
    },
    dataType: "json",
    success: function(result) {}
    });
    ```

获取 jquery 中同级所有元素

1. 获取父级元素

    $("#id").parent()

    获取其父级元素

    $("#id").parents()
2. 获取同级元素

    siblings()　　返回被选元素的所有同胞（同级）元素；
3. 获取子元素
    children()    返回匹配元素的子元素，添加可选参数可通过选择器进行过滤。
    find()        获得当前元素的后代

在 jquery 开发中如何自定义插件？

1. $.extend
2. $.fn.extend

jquery 中的 date set 数据集

data() 方法向被选元素附加数据，或者从被选元素获取数据。

jquery 中的 attr,prop 有啥区别

获取和设置 disabled、selected、checked 这些属性时，应该使用 prop()方法，不要使用 attr()方法！！能够用 prop()操作的尽量用 prop()操作，不要用 attr()操作。

vue 中子组件向父组件传参，派发

子组件向父组件，使用&dollar;emit 方法;
该方法接收 2 个参数，第一个参数是事件的名称。第二个参数是需要传递的数据，可以是对象，也可以是字符串类型。
&dollar;emit 是 VUE 实例中的一个方法，所以前面要加上 this，可以在钩子函数中执行，也可以由某个事件触发执行。

foreach map find filter

如何设置一个对象？

1.obj.name=value
3.obj["name"]=value;
2.js 中可以通过 Object.defineProperty()方法，可以为对象添加自定义的属性

参数 1 添加属性对象
参数 2 添加的属性名
参数 3 添加的属性值(配置对象)

Object.defineProperty(obj, "phone", {
value:110,
enumerable 是否允许枚举，遍历
enumerable:false,
writable 属性值是否可以修改,默认为 false 表示不能修改
writable:true
})

排序算法

选择排序
冒泡排序
快速排序

回车键键值(13)

http 和 https 有什么区别及端口号？

1、https 协议需要到 ca 申请证书，一般免费证书较少，因而需要一定费用。

2、http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。

3、http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。

4、http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全。

cookie,localstorage,sessionstorage 区别？

判断是否是数字？

isNaN 是数字返回 false，不是数字返回 true

props, $emit

promise.all

Promise.all可以将多个Promise实例包装成一个新的Promise实例。
同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值.
Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。

```js

    let p1 = new Promise((resolve, reject) => {

    resolve('成功了')
    })

    let p2 = new Promise((resolve, reject) => {
    resolve('success')
    })

    let p3 = Promse.reject('失败')

    Promise.all([p1, p2]).then((result) => {
    console.log(result) //['成功了', 'success']
    }).catch((error) => {
    console.log(error)
    })

    Promise.all([p1,p3,p2]).then((result) => {
    console.log(result)
    }).catch((error) => {
    console.log(error) // 失败了，打出 '失败'
    })

```

常见的伪类选择器

:first-child
:last-child
:focus
:link
:lang
:checked
:hover
:active
:visited
:nth-child(n)
:nth-of-type等

网页性能优化

1、资源压缩合并，减少http请求

2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别

3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理

4、使用CDN

5、DNS预解析

浏览器打开网页都经历了什么？

浏览器页面准备：如unload前一个页面、初始化资源等。
重定向：如果服务端返回header中定义了重定向才会有这个过程，如果没有重定向，不会产生这个过程。
app cache：会先检查这个域名是否有缓存，如果有缓存就不需要DNS解析域名。这里的app是值应用程序application，不指手机app。
DNS解析：把域名解析成IP，如果直接用ip地址访问，不产生这个过程。
TCP连接：http协议是经过TCP来传输的，所以产生一个http请求就会有TCP connect，但是依赖于长连接，不会产生这个过程。
发送请求：请求服务端资源。
接受请求：接受服务端返回数据。
解析HTML结构
加载外部脚本和样式表文件：正常来说JS、css都是外部加载的。
解析并执行脚本代码
构建与解析HTML DOM树
加载外部图片
页面加载完成，页面正常显示。

typeScript 是什么？

TypeScript 是一种由微软开发的自由和开源的编程语言

面向对象

如何实现多态？

多态的实现可以采用和继承类似的方法。首先定义一个抽象类，其中调用一些虚方法，虚方法在抽象类中没用定义，而是通过其具体的实现类来实现。

es6 新增的东西有哪些？

1 定义变量加入了 let const

let 会将变量提升到块顶部（而非像 ES5 是函数顶部）。

但是在变量声明前引用变量会造成错误。

let 是块作用域的，不可以在声明前使用。

const 如果不希望变量的值在发生改变，使用 const 声明变量。

2 封闭空间
3 字符串和变量的拼接
4 解构赋值
5 类和面向对象

计算属性及应用场景

computed 和 methods 达到的效果是相同的
computed 是响应式的，methods 并非响应式。
methods 中就是普通的方法，通过调用执行，computed 中的方法会监听自己的依赖，依赖发生变化方法会自动执行。
computed 适合处理的场景是，一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性。

vue 生命周期钩子函数

8个生命周期钩子函数

beforeCreate el 和 data 并未初始化
created 完成了 data 数据的初始化，el没有
beforeMount 完成了 el 和 data 初始化
mounted 完成挂载
beforeUpdate
updated
beforeDestroy
destroyed

VUE 打包时候如何做性能优化

map 文件的处理
修改为：productionSourceMap: false,

父组件调用子组件

通过this.$refs.ref.method调用

```js
    import children from'components/children.vue'

    components: {'children': children },

    <children ref="child"></children>
    methods:{

    parentFun(){
            this.$refs.child.test();
                }
    }
```

组件ref 是啥？

ref 有三种用法：

1、ref 加在普通的元素上，用 this.ref.name 获取到的是 dom 元素

2、ref 加在子组件上，用 this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

根据窗口大小，改变字体大小

使用rem布局，在@media中设置html font-size值
函数

    $(function(){ 
    var r = document.body.offsetWidth/window.screen.availWidth; 
    $(document.body).css("-webkit-transform","scale(" + r + ")"); 
    }); 
    $(window).resize(function(){ 
    var r=document.body.offsetWidth/window.screen.availWidth; 
    $(document.body).css("-webkit-transform","scale("+r+")"); 
    });

如何限制一个组件是必填的

required: true

如何在 updata 数据改变

seo 优化

严格模式下，this 指向

vm.$set( target, key, value )
this.$set(this.obj,'k1','v1')

react 组件的生命周期

componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

react 和 vue 的区别？

相同点:

1. 都支持服务器端渲染

2. 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范

3. 数据驱动视图

4. 都有支持native的方案,React的React native,Vue的weex

5. 都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）

不同点：

1.React严格上只针对MVC的view层,Vue则是MVVM模式

2.virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.

    而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js';

    Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;

4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的

5.state对象在react应用中不可变的,需要使用setState方法更新状态;

   在vue中,state对象不是必须的,数据由data属性在vue对象中管理；

w3c 规范

结构化标准语言
样式标准语言
行为标准语言

语义化标签

代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。

常见的语义化标签
<title>：页面主体内容。
h1~h6：分级标题
<header>
<main>:页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<nav>:标记导航，仅对文档中重要的链接群使用。
<section>:定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
:呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权
:和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>:定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<address>:作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<mark>:使用黄色突出显示部分文本。
：移除的内容。
<ins>：添加的内容
：标记代码。 <progress>：定义运行中的进度（进程）。

重置样式表

https://www.php.cn/css-tutorial-412103.html

自动完成

jquery自动完成插件
http://www.jq22.com/jquery-info438

前后端分离的后台管理 Vue

多人开发，减少开发成本

基本数据类型与复杂数据类型的区别？

基本数据类型把数据名和值直接存储在栈当中

复杂数据类型在栈中存储数据名和一个堆的地址，在堆中存储属性及值，访问时先从栈中获取地址，再到堆中拿出相应的值

不同数据类型作为参数时函数内部对参数的修改是否改变外部变量的值

基本数据类型作为参数时，函数内部对参数值的修改不会改变外部变量的值

手动搭建vue项目

node干嘛的？

请求页面时页面崩了怎么办？

全局响应拦截

什么是全局请求拦截

hash路由有什么特点？

怎么配置子路由？

路由有什么属性

上拉刷新下拉刷新

mvc,mvvm

Vue就是基于MVVM模式实现的一套框架

750

1920 1280

图片上传？

原型和原型链理解

https://www.cnblogs.com/jofun...

视频播放

https://blog.csdn.net/weixin_...

音频播放

https://www.cnblogs.com/tcxq/...

https://overreacted.io/zh-han...

for while 和 do while

http://www.ruanyifeng.com/blo... MVC，MVP 和 MVVM 的图示

https://github.com/answershut... Vue.js 源码解析

w3c 规范？

jquery 全屏滚动插件 http://www.jq22.com/jquery-in...

vue 中网页全屏 https://zhidao.baidu.com/ques... 全屏显示

https://github.com/sindresorh... js 全屏显示插件

数组去重

vue 中钩子函数只执行一次的？

keep-live

h5新增哪些标签呢？

video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header

图片在任意手机端都铺满整个屏幕

background-size:length|percentage|cover|contain;

github搜索技巧

es6新增哪些属性？

什么是原型，什么是原型链

svg

stars:>=5000
in:name 关键字
in:description 关键字
in:Readme 关键字
awesome + 关键字:可以找到别人收集好的内容。
language:关键字

npm config set sass_binary_site

https://npm.taobao.org/mirror...

https://github.com/PanJiaChen... vue 管理后台模板代码仓库

http://manager.cat-shop.penku...
admin001
admin@12138
https://www.jianshu.com/p/fcc... 前端 seo

https://blog.csdn.net/qq_3750... H5 移动端 ios/Android 兼容性总结

https://www.netlify.com 可以关联 github 搭建一个静态网站

https://www.teambition.com/ 团队开发任务工具

https://www.lodashjs.com/ js 工具类

http://momentjs.cn/ 日期格式化插件

https://www.sourcetreeapp.com/ sourcetree

https://www.cnblogs.com/fishe... sourcetree 安装使用

https://www.jianshu.com/p/0c6... git workflow 工作流

https://backlog.com/git-tutor... 猴子都懂得 git

https://www.jianshu.com/p/398...

https://segmentfault.com/a/11... 解析 vue2.0 的 diff 算法

https://www.jianshu.com/p/e4e...

https://blog.csdn.net/kang_k/... vue 做 seo 优化

nuxt 基于 vue 插件

https://tophub.fun/main/home/hot 鱼塘

https://github.com/trending github 仓库排名

https://github.com/zhaoolee/C... 表情包的博物馆

https://expo.io/learn expo 环境使用的插件，很难安装

在你们的终端里安装下这个插件，下下周之前装好就行
npm install expo-cli --global

https://reacttraining.com/rea... react-router

有空了可以了解下，2020 年应该知道的 20 个 react ui 框架
https://www.codeinwp.com/blog...

杂记

js 单线程

异步与同步

DOM 事件流传播

阻止事件流方式：

DOM2 级事件和普通（传统）事件区别：

事件委托？

target、this、currentTarget 的区别

盒模型的种类？

圣杯布局和双飞翼布局

css 定位方式有那些？

css 和 js

rem 和 em 区别

js 变量提升的

this 指向，如何改变 this 指向以及他们的区别是什么？

map 和 forEach 有什么区别？

var ,let 和 const 区别

seo 优化 （搜索引擎优化）

web 性能优化

原生寄成方式

为什么要使用深拷贝？

深拷贝和浅拷贝

移动端开发需要注意什么问题？

get 和 post 区别

如何解决移动端开发出现 1px 问题？

jq 中的绑定事件，有什么区别？

jq 中常见的元素选择方式有哪些，如何获取属性值？

bom 和 dom 有什么区别，常见的 bom 对象有哪些？

常见的 bom 对象有哪些

我们在页面里如何设置一个单选框，如何做一个下拉框？

在 css 中默认有什么方式布局

有一个 div，如何设置背景颜色，如何让 div 半透明？

js 中如何实现页面跳转?

如何获取用户的浏览器是什么？

原生 js 事件传播流程是什么？

input 输入框有哪些类型？

viewport

数组去重

语义化标签及好处

媒体查询

js 中获取宽度

面向对象（封装继承多态）

设计模式

排序算法（冒泡，选择排序，。。。）

为什么 vue 不能再 ie8 及以下浏览器？

vue 实现双向绑定的原理？

箭头函数和普通函数

虚拟 dom

VUE中router-view 多个 router

节流和防抖

回流和重绘

手机适配（rem 和弹性盒）

es6 中常用的数组方法

map 和 foreach 区别

开头结尾的空格

全屏查看

面向对象

字符串常用方法

深拷贝和浅拷贝

scss 继承

scss 编译的底层原理

ajax 请求是以什么格式发送请求

获取 jquery 中同级所有元素

在 jquery 开发中如何自定义插件？

jquery 中的 date set 数据集

jquery 中的 attr,prop 有啥区别

vue 中子组件向父组件传参，派发

foreach map find filter

如何设置一个对象？

排序算法

回车键键值(13)

http 和 https 有什么区别及端口号？

cookie,localstorage,sessionstorage 区别？

判断是否是数字？

props, $emit

promise.all

常见的伪类选择器

网页性能优化

浏览器打开网页都经历了什么？

typeScript 是什么？

seo 优化（搜索引擎优化）

上拉刷新下拉刷新