2020-5-13 面经

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之前，在函数声明之前也可以调用函数

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容