js/es6/react/webpack

时间 2019-12-08

标签 es6 react webpack 栏目 JavaScript 繁體版

原文原文链接

js篇

1.window的onload事件和domcontentloaded

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

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

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

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

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

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

经过jsonp跨域前端
CORS跨域资源共享，即引入一些自定义的HTTP Header来完成客户端与服务端的通讯vue
1. 简单通讯，定义Origin字段
2. 简单通讯（发送Cookie）
```
Access-Control-Allow-Credentials: true
var xhr = new XMLHttpRequest();
xhr.w
ithCredentials = true;
复制代码
```
1. 非简单通讯，如PUT或DELETEjava
  
  正式通讯以前，先发送options预请求，必须字段Access-Control-Request-Method/Access-Control-Request-Headersreact
document.domain + iframe跨域（限主域相同，子域不一样的跨域应用场景）webpack

json和CORS的比较es6

JSONP只支持GET请求，CORS支持全部类型的HTTP请求
JSONP的优点在于支持老式浏览器，以及能够向不支持CORS的网站请求数据。

function

内部属性arguments this

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

函数的属性和方法

1. 属性

length:函数但愿接收的命名参数的个数
prototype:保存着函数的实例方法,到经过函数实例化获得的对象能够访问prototype中的方法，此属性在自定义引用类型和实现继承颇有用处

2. 方法

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

//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()方法！