from liyan

①js模块化的理解

• 为了解决复杂js，维护困难，变量全局污染的问题。

无模块化 > commonjs > AMD > CMD > ES Module

1. 无模块化

• 即 需要按顺序引入，被依赖的js文件必须放在前面。否则会报错。

<script src="jquery.js"></script>
<script src="jquery_scroller.js"></script>
<script src="main.js"></script>
<script src="other1.js"></script>
<script src="other2.js"></script>
<script src="other3.js"></script>

• 缺点 : 依赖关系不明显，维护成本高，污染全局作用域。

2. commonjs

• 该规范最初使用的服务端的node，他有四个环境变量：module、exports、require、global。实际使用时，用module.exports定义当前模块对外输出的接口。用require加载模块(同步)

3. AMD

• api : require 、require.config 、define
• 即通过define来定义一个模块，然后使用require来加载一个模块, 使用require.config()指定引用路径。

4. ES Module

• ES6中，使用import关键字引入模块，通过export关键字导出模块。但是由于es6目前无法在浏览器中执行，暂时只能通过babel将不被支持的import编译为require
• export default 可以指定默认导出，一个模块只能有一个 export defalut

②继承与实现继承

ES5继承

• 在子类中运行父类函数，通过call改变其this指向。Parent.call(this,arguments)
• 改变子类的prototype ：Child.prototype = Object.create(Parent.prototype)
• 改变子类原型构造器指向 : Child.prototype.constructor = Child

ES6继承

• extends关键字 继承父类：class Child extends Parent{...}
• 在子类的constrctor 中 调用super函数，传入父类所需的参数

③ES6新特性

• 引入了严格模式
• let const 声明变量
• symbol 基本数据类型：可用于定义对象属性的唯一性。
• 解构赋值
• 箭头函数，形参默认值，三点运算符
• 数组的扩展
• 对象的扩展
• Set、Map 全新的数据结构
• Proxy 代理
• Class 类的概念
• Promise 解决异步编程的机制
• Iterator 遍历器机制，for...of(默认不能遍历对象)
• Module 模块化

④ nextTick的理解

• 由于Vue的DOM操作是异步执行的。当你在组件中改变data的值时，该组件不会立刻重新渲染。当刷新异步队列时，该组件会在下一个”tick“中更新。当你依赖于DOM更新后的操作时，请在数据变化之后立刻调用Vue.nextTick(),该回调函数将在DOM更新完成后调用。

⑤ v-if 与 v-show的区别

• v-if 只有条件为真才会渲染，而v-show将始终渲染。
• 当需要频繁切换其显示隐藏状态时，使用v-show，因为开销小。

不推荐v-if 与 v-for同时使用！当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

⑥ 闭包以及使用场景

• 闭包理解：简单来说就是 两个嵌套的函数，内部函数访问了外部函数的变量。由于这种引用关系导致变量不会被垃圾回收机制回收，一直存在与内存中。当闭包使用完成后，最好赋值为null，取消引用。
• 使用场景：1. 循环给button绑定事件 2.变量私有化 3. 节流防抖

⑦ 跨域 以及 如何解决？

浏览器出于安全考虑，有同源策略。协议、域名、端口有一个不同就算是跨域。就无法发送ajax请求，防止CSRF攻击。

• jsonp 利用<script>不受同源限制，将<script>标签指向一个需要访问的域名，并指定一个回调函数接受数据即可。兼容性好，但是只支持get请求
• cors需要服务端配合 （node.js）
• vue-cli 配置proxyTable
• webpack中devServer也可以配置proxy
• nginx代理跨域

⑧ jQ的扩展函数写法

工具类函数

• 使用$.extend({})配置，配置后使用 $.xxx调用

jQuery对象类函数

• 使用$.fn.extend({})配置，配置后使用$('#id').xxx调用
• 如果对象是id获取的，那么只有一个，可以在函数内使用this.prop访问。
• 如果对象有多个(通过class获取)，需要用this.each() 循环，在循环内使用 this 访问该对象。

(function(){
  // 自定义插件
  // 扩展jquery工具方法
  $.extend({
    minVal(a,b){
      return a>b?b : a
    }
  })
  // 扩展对象方法
  $.fn.extend({
    checkVal(){
      this.prop("innerHTML",'通过this.prop访问')
    },
    changeVal(){
      this.each(function(){
        this.innerHTML = 'each内通过this访问'
      })
    }
  })
})()

⑨ 移动端适配方案

• vh vw 相对于视口大小的百分比单位。如 iphone逻辑大小: 375 * 667 那么 1vh = 66.7px;
  1vw = 37.5px;
• viewport + rem方案
• 手淘 flexble.js原理：从分析可以看出 flexible.js 主要是通过动态辨别设备的 DPR 设置根节点的字体大小，并搭配能跟随根节点字体大小而改变大小的 rem 单位来实现在不同终端适配的。

⑩ 一个按钮如何绑定多个事件

• 使用addEventListener

//判断浏览器是否支持这个方法
if(element.addEventListener){
  element.addEventListener(type,fn,false);
}else if(element.attachEvent){
  element.attachEvent("on"+type,fn);
}else{
  element["on"+type]=fn;
}

⑪ 前端优化方法

1. webpack打包优化 ， 开启gzip压缩
   • 使用babel-loader时，include，exclude关键字用来避免不必要的转译。如node_modules内的文件。开启缓存。
   • 文件按需加载，懒加载，预加载
   • 图片优化：字体图标或者svg
   • 浏览器缓存机制，配置app.cache文件
2. 代码优化
   • 事件代理
   • 函数防抖节流
   • 页面重绘重排
   • 一个函数只做一件事，提高复用性。

⑪ 小题 - cookie，localStorage，sesstionStorage特点和区别

• 相同点: 三者都是保存在浏览器端，且都是同源的。
• 不同点:
  1. cookie始终在同源的http请求下携带，即cookie始终在浏览器与服务器之间传递。cookie还有路径的概念，可以限制在某个路径下。sesstionStorage和localStorage不会发送给服务器，仅在本地保存。
  2. cookie 大小为4k，storage大小为 5m 左右
  3. cookie可以设置过期时间，不受浏览器影响
     sesstionStorage 回话关闭后就会删除
     localStorage 始终有效，需要手动删除
  4. 作用域：
     localStorage 和 cookie 在所有同源文档中都共享
     sesstionStorage 仅在同一个窗口中共享 ，被限制在了窗口内

⑪ 小题 - 防抖节流

• 防抖 (场景：搜索联想词)
  在一段时间内重复触发函数，仅仅会执行最后一次。
• 节流 (场景：上拉下拉加载更多)
  在一段时间内重复触发函数，仅会触发一次函数。

它们都以闭包的形式存在，使用setTimeOut实现

⑪ 小题 -重排&&重绘

• 重排(回流)
  当改变DOM元素的宽高等尺寸单位会发生重排。
• 重绘
  当改变DOM元素背景，透明度等，会发生重绘。

重排必然重绘，重绘不一定会重排，但是我们应该尽量减少重排重绘所带来的性能问题

• 将DOM操作合并
• 利用定位，脱离文档流即不会发生重绘重排。

⑫ 首屏优化

• 骨架屏占位
• 懒加载(模块懒加载，图片懒加载)
• 请求排序(首先请求页面内容，在请求页面数据)
• 浏览器缓存
• cdn分发（通过给不同服务器部署相同内容，根据用户位置决定请求那一台服务器，或者根据服务器压力来分发请求）
• http gzip压缩：通常在response header中指定content-encoding

⑬ 基本数据类型

• String
• Number
• Boolean
• Symbol
• Undefined
• Null

⑭ 引用数据类型

• Object （function,array,RegExp等）

⑮ 变量提升 函数提升

• var 会变量提升到作用域顶端，值为undefined
• function 会提升到var之前，在函数声明之前也可以调用函数

①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿