js/es6/react/webpack

js篇

1.window的onload事件和domcontentloaded

当onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。

当DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash

2. JS 中的事件绑定、事件监听、事件委托是什么？

• 事件绑定：DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等
• 事件监听：addEventListener() 或 attachEvent() 监听绑定
• 事件委托：利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果，用到jQuery的live()、delegate()、bind()、on()等。

3. 前端怎么解决跨域问题？(未完待续...)

域名/端口/协议不同会产生跨域,解决方案有:

• 通过jsonp跨域

• CORS跨域资源共享，即引入一些自定义的HTTP Header来完成客户端与服务端的通信

  1. 简单通信，定义Origin字段
  2. 简单通信（发送Cookie）

  Access-Control-Allow-Credentials: true
  var xhr = new XMLHttpRequest();
  xhr.w
  ithCredentials = true;
  复制代码

  3. 非简单通信，如PUT或DELETE

     正式通信之前，先发送options预请求，必须字段Access-Control-Request-Method/Access-Control-Request-Headers

• document.domain + iframe跨域（限主域相同，子域不同的跨域应用场景）

json和CORS的比较

• JSONP只支持GET请求，CORS支持所有类型的HTTP请求
• JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

function

内部属性arguments this

1. arguments是一个类数组对象,包含传入函数中的所有参数
2. this引用的是函数据以执行的环境对象.在调用函数之前,this的值是不确定的,当在全局对象中调用函数时,this引用的是全局对象window,当把函数赋值给某对象时,this指的是此对象。

函数的属性和方法

1. 属性

• length:函数希望接收的命名参数的个数
• prototype:保存着函数的实例方法,到通过函数实例化得到的对象可以访问prototype中的方法，此属性在自定义引用类型和实现继承很有用处

2. 方法

apply call这两个方法是函数的非继承方法，用途都是设置函数体内this对象的值

//apply接收两个参数,第一个是运行函数的作用域,通俗的说就是将这个参数作为this指向的值.第二个参数是数组作为执行函数的参数
function sum(num1,num2){
    return num1+num2;
}
function callSum(num1,num2){
    return sum.apply(this,arguments);
}
alert(callSum(10,10)); //20
//call接收的第一个参数也是运行函数的作用域,后面的参数也是传递给执行函数的参数,与apply不同的是,后面的参数并非数组,而是逐个列举出来的
function sum(sum1,sum2){
    return sum1+sum2;
}
function callSum(num1,num2){
    return sum.call(this,num1,num2);
}
alert(callSum(10,10)); //20
复制代码

定义类和实现继承

1. 原生js

// 父类
    function Animal(name) {
        this.name = name;
        this.sheep = function () {
            console.log(this.name + "正在睡觉")
        }
    }
    //子类
    function Dog(name) {
        Animal.apply(this, arguments);
        this.name = name;
    }
    Dog.prototype = new Animal();
    Dog.constructor.prototype = Dog;

    var dog = new Dog("dashazi");
    console.log(dog.name);
    console.log(dog.sheep());
复制代码

2. es6

class Animal{
    constructor(name){
        this.name=name;
    }
    say(sound){
        console.log(this.name+"在说"+sound)
    }
}

class Dog extends Animal{
    constructor(name){
        super(name);
        this.name=name;
    }
}

var dog=new Dog("dashazi");
dog.say("汪汪");
console.log(dog.name);
复制代码

es6篇

1. 箭头函数

• 继承当前上下文的this关键字
• 不需要function关键字来创建函数
• 省略return关键字
• 默认指向在定义它时,它所处的对象,而不是执行时的对象,定义它的时候,可能环境是window（即继承父级的this）。

2. let和const

• let:具有块级作用域，不会发生变量提升
• const:定义常量值，不能重新修改值，如果值是对象，跨域改变对象里面的属性

3. 解构赋值

//实现两个变量值的交换
let a=1;
let b=2;
[a,b]=[b,a];
// 输出a 为2,b为1
复制代码

4. set构造函数

类似数组，但是成员值都是唯一的，值不可重复

5. 模板字符串

使用反引号``，${varible}

6. promise

var promise = new Promise((resolve, reject) => {
  if (操作成功) {
    resolve(value)
  } else {
    reject(error)
  }
})
promise.then(function (value) {
  // success
}, function (value) {
  // fail
})
复制代码

const promise = new Promise((resolve, reject) => {
  console.log(1)
  resolve()
  console.log(2)
})
promise.then(() => {
  console.log(3)
})
console.log(4)
//1 2 4 3
//Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的。


const promise = new Promise((resolve, reject) => {
  resolve('success1')
  reject('error')
  resolve('success2')
})

promise
  .then((res) => {
    console.log('then: ', res)
  })
  .catch((err) => {
    console.log('catch: ', err)
  })
//then,success1
//因为构造函数中的 resolve 或 reject 只有第一次执行有效，多次调用没有任何作用，呼应代码二结论：promise 状态一旦改变则不能再变

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('once')
    resolve('success')
  }, 1000)
})
const start = Date.now()
promise.then((res) => {
  console.log(res, Date.now() - start)
})
promise.then((res) => {
  console.log(res, Date.now() - start)
})
// once
// success 1000
// success 1000
//因为promise 的 .then 或者 .catch 可以被调用多次，但这里 Promise 构造函数只执行一次。或者说 promise 内部状态一经改变，并且有了一个值，那么后续每次调用 .then 或者 .catch 都会直接拿到该值
复制代码

• promise 可以链式调用。romise 每次调用 .then 或者 .catch 都会返回一个新的 promise，从而实现了链式调用

react篇

1.React 中 keys 的作用是什么？

key 在其同级元素中具有唯一性,根据key值来判断该元素是创建还是移动，从而减少不必要的元素重新渲染

2.调用 setState 之后发生了什么？

将传入的参数对象与组件当前的状态合并，然后触发调和过程（Reconciliation），调和根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面，据新树和旧树的差异对界面进行最小化重渲染，保证了按需跟新还不是全部重新加载

3. 为什么虚拟dom会提高性能？

虚拟dom相当于在dom和js之间加了一个缓存，dom diff算法避免了没有必要的dom操作。

用javascript对象结构表示dom树的结构，然后用这个树构建一个真正的 DOM 树，当变更时候重新构造一个对象树，新树和旧树作比较

4. react diff 原理

• 按照树形结构层级分解，只比较同级元素
• 列表结构的每个单元添加唯一的 key 属性，方便比较
• 匹配相同的组件名

5. react 中 refs 的作用是什么？

访问dom元素，给元素添加ref属性

6. state和props之间有什么不同？

• state是一个初始值，是组件内部的，可变的
• props是父组件传递给子组件的，是不可变得

7.什么是受控组件？

像input,textarea，select这些组件的输入和value由state来追踪

8.(在构造函数中)调用 super(props) 的目的是什么？

子类必须在 constructor 中调用 super()，递 props 给 super() ，子类才能通过this.props调用

9. react中构建组件的方式？

• es6中的class 名成 extends component{}
• React.creatClass{}
• 函数组件

10. react 项目用过什么脚手架?

creat-react-app
复制代码

11. redux

解决了组件间状态共享的问题,action ,store,reducer

12. react的工作原理

创建虚拟dom，当状态改变时，根据diff算法来虚拟dom的改变，之后根据调和来更改dom

13.react 的优势？

• 只看render()就知道组件如何被渲染
• jsx，更直观可读

14. Redux Thunk 的作用是什么?

• 延迟 action 的派发(dispatch),可以处理异步 action 的派发(dispatch)

webpack篇

1.什么是webpack和grunt和gulp有什么不同？

• webpack是一个模块打包器，递归的打包成几个文件
• 不同：code-splitting、模块化(AMD，ESM，CommonJs)、全局分析

2.什么是bundle,什么是chunk，什么是module?

bundle是由webpack打包出来的文件，chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块。

微信小程序篇

1.主要文件和目录的作用？

• project.config.json 项目配置文件，用得最多的就是配置是否开启https校验
• App.js 设置一些全局的基础数据
• App.json 底部tab, 标题栏和路由等设置
• App.wxss 公共样式，引入iconfont等
• pages 里面包含具体页面
  1. index.json (配置当前页面标题和引入组件等)
  2. index.wxml (页面结构)
  3. index.wxss (页面样式表)
  4. index.js (页面的逻辑，请求和数据处理等)

2. wxml与标准的html的不同

• 小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象
• 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

3. WXSS和CSS的不同

• WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx

4.程序的双向绑定和vue的异同

大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！

实战

1. 人们都说setState是异步的，你怎么看？

2. 你了解react的合成函数么？

3. 用过哪些react组件？

4. 用过哪些react ui组件？

5. webpack怎么打包优化？

• css 代码单独打包
• 区分打包类库代码
• hash优化