面试（网上） —— ES6、vue、模块化、工程化（答案不全）（草稿）

1.谈一谈 promise

promise 用来处理 异步操作，有 三种状态，pending（进行中），resolved（已完成），rejected（已失败）

一旦状态改变，就不会再改变。只有两种情况下，promise 状态才会改变。从 pending=》resolved，从pending=》rejected

改变之后，状态就凝固了。

promise 内部状态一经改变，并且有了一个值，那么后续每次调用 .then 或者 .catch 都会直接拿到该值。

2.如何实现一个promise，promise的原理，以及它的两个参数是什么？

let p = new Promise({resolve, reject}=>{
    if(condition) {
        resolve(result)
    }else {
        reject(result)
    }
});

3.

promise.then(onResolved, onRejected)

then以两个函数做参数，一个在拒绝的时候调用，一个在解析时候调用

4.

promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的，分别这么写有什么区别，什么情况下会两个都同时用到？

它们都能抛出错误，但reject是跟resolve函数相对的，用于当promise对象状态失败时的错误处理；catch一般用回调函数来处理错误，另外，当then方法的回调函数异步操作失败时，catch会捕获错误并处理。

5.promise 封装 ajax

getData(method, url){
  var promise = new Promise(function(resolve, reject){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open(method, url);
    xmlHttp.send();
    xmlHttp.onload = function () {
      if (this.status == 200 ) {
        resolve(this.response);
      } else {
        reject(this.statusText);
      }
    };
    xmlHttp.onerror = function () {
      reject(this.statusText);
    };
  })
  return promise;
}

getData('get','www.xxx.com').then(successFun, failFun)

getData(method, url, successFun, failFun){
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open(method, url);
  xmlHttp.send();
  xmlHttp.onload = function () {
    if (this.status == 200 ) {
      successFun(this.response);
    } else {
      failFun(this.statusText);
    }
  };
  xmlHttp.onerror = function () {
    failFun(this.statusText);
  };
}

 6.箭头函数 的 this指向

箭头函数 的 this 就是 这个定义的函数

而普通函数 的 this 是谁调用指向谁

箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。

7.let const优点

都是块级作用域，避免当变量重名出现混淆

let  没有声明提前，即使没有赋值，一开始不会是undefined    

（不能声明重复    我觉得应该是……

const  赋值后不能修改  并且要当即赋值  const a 是错误的

vue

1.vue如何实现双向绑定

v-model

原理：

发布者-订阅者   Object.defineProperty()  各个属性 定义get、set  特性方法

数据改变=》给订阅者发布消息  触发相应的监听回调

（1）对 数据对象 设置 set 和 get，当 给 这个对象 某个值 赋值，触发 绑定的 set，于是 监听到  数据变化

（2）compile 解析 模板指令，将 模板 中的 变量 替换成 数据，将 每个指令 的 节点 绑定 更新函数，添加 订阅者，数据变化，就受到通知，更新 视图

（3）watcher 是 桥梁。

。自身实例化时   向属性订阅器（dep）  里 添加自己

。自身 有 update()方法

。dep.notice()  发布通知，调用 自身的 update(),触发 compile 绑定的 回调函数

Observer  监听model数据变化  Compile  解析编译模板指令  Watcher通信桥梁

2.MVVM

MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel

3.使用的设计模式：观察者模式

4.生命周期

beforeCreate：刚初始化 一个 空的 vue 实例对象，对象上 data 和 methods 上的数据 还没有 初始化

created：data 和 methods 上的数据 初始化 好，此处 调用 methods 中的 方法，操作 data 中的 数据

beforeMount：模板 在内存中 编译 好，但没有 挂载 上去，页面 还是 旧的

mounted：vue 实例 初始化完毕

beforeUpdate：页面中的 数据  旧的，data 数据 最新的

updated：页面 和 data 数据  都是 最新的

beforeDestroy：vue 实例 进入 销毁阶段 但 data、methods、过滤器、指令……都可用

destroyed：组件 完全 被销毁，所有，都不用

5.组件间交互：

父组件 向 子组件 传值：将 数据 挂载到 子组件 props 属性上

子 传 父：子组件 调用 父组件 传递过来的 方法，把数据 在 调用方法时 当成参数 传递

<son @func="getMsg"></son>

子组件内部用emit  调用父组件的 方法，第一个参数 是 子组件调用 父组件 方法的方法名称，第二个 是 数据

6.路由嵌套（录音）

什么是路由嵌套

什么时候需要路由嵌套

这个项目中哪里用到路由嵌套

怎么实现路由嵌套

7.nextTick

8.vuex

什么是vuex

针对vue.js的状态管理系统，也就是管理组件间共享的数据，是一个数据存储的仓库。

项目哪里用到vuex

操作购物车数据

购物车 数据 怎么设置

9.如何实现一个自定义组件，不同组件之间如何通信的

10.CommonJS 中的 require/exports 和 ES6 中的 import/export 区别

构建（工程化&模块化）
工程化

    对webpack,gulp，grunt等有没有了解?对比。
    webpack的入口文件怎么配置，多个入口怎么分割。

webpack.config.js   里  module.exports里的 entry对象，可以写entry2  之类，然后 output   里的  filename  属性值 是 ‘[name].js’,

意思是  根据 文件名字打包，有几个 入口文件，就有 几个 出口文件

    webpack的loader和plugins的区别

两个完全不同的东西。

loader处理各种语言，offeeScript，TypeScript，ESNext（Bable）,Sass,Less等，一次处理一个文件。

plugin并不直接操作文件，它对整个构建过程起作用，解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，解决各种各样的任务。

    gulp的具体使用
前端工程化的理解

如何自己实现一个文件打包，比如一个JS文件里同时又ES5 和ES6写的代码，如何编译兼容他们

模块化

 对AMD,CMD,CommonJS有没有了解?

AMD:异步 模块 定义规范    require.js推广  通过 module transport 返回一个对象 暴露接口  允许指定回调函数   前端

CMD:同步 模块 定义规范    seajs推广 

commonjs  是服务器端规范，比如 node.js  同步加载模块，加载完，才能执行后面操作  通过exports 或 module.exports 给属性赋值 暴露接口

（AMD 与 requireJS 有关      CMD  commonJS  es6规范 都是 彼此独立的

commonJS 内置 require 加载模块   和 requireJS没关系

引用举例：
module.exports = function () {
  console.log("hello world")
}

require('./example2.js')()

Node.js中：
var exports = module.exports;

因此，可以向exports对象添加方法：
exports.area = function (r) {
  return Math.PI * r * r;
};

es6：
export：
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

或者  对外输出 一个函数
export function multiply(x, y) {
  return x * y;
};


import xxx  from  './……'

 ）

 为什么要模块化？

各个命名空间独立，即使变量名相同，也不会出错

模块化后可以通过模块管理工具管理，方便

低耦合，高内聚：模块后，方便多人开发，降低模块间的依赖关系，这是低耦合；每个模块又有特定功能，这是高内聚

可重用，方便维护：修改某个功能时，直接修改其模块就可；可以把具有这种的功能的模块直接拿过来用，很方便

说说有哪些模块化的库，有了解过模块化的发展的历史吗？

先有的CommonJS，它是用于后端，不适用浏览器，AMD根据它被创造出来。CMD是玉伯开发，借鉴AMD。