面试题总结

作者: 7级先生 | 来源:发表于2019-01-04 23:43 被阅读0次

1.0 promise的封装过程

// 封装Promise用来请求wx.request
// url:就是请求地址
function request(url,methods = "GET",data={},header={}){
    /* 显示加载 */
    wx.showLoading({
        title: '加载中',
        mask: true
    })
    return new Promise((resolve,rejects) =>{
        wx.request({
            url:url,
            data,
            method:methods,
            header,
            
            success: (res) =>{
                resolve(res)
                /* 隐藏加载 */
                wx.hideLoading()
            }
        })
    })
}

request.get = function(url,data){
    return request(url,"get",data)
}

// post请求
request.post = function(url, data){
    return request(url, "POST", data);
}

// 需要授权的接口调用
request.auth = function(url,data){
    if(!wx.getStorageSync('token')){
        wx.navigateTo({
            url:"/pages/auth/main"
        })
        // 注意： 创建promise必须添加参数
        return new Promise(() => {});
    }
    return request(url, "POST", data, {
        "Authorization": wx.getStorageSync("token")
    });
}

// 暴露出去
export default request

2.0 get和post的区别

1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

3.0 http协议

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议

4.0 Vue的v-model使用和原理

很简单就是利用我们书写的时候触发onInput 所以输入时input的内容会绑定到sth中，于是str的值就被改变

5.0 浏览器缓存的使用

6.0 如何区分深拷贝和浅拷贝

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

function deepClone(obj){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
    return objClone
}    
let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

7.0 请写出尽可能多的使用JavaScript产生一个Image 标签的方法

面向对象
var imgage = new Imgage()
image.src = "/img/1.jpg";
document.querySelector('div').appendChild(image)

节点操作
var image = document.createElement('img');
image.src = './qupengwei.png';
document.querySelector('div').appendChild(image);

html角度
document.querySelector('div').innerHTML =  "<img src='./qupengwei.png'>"

8.0网页的前进和后退

前进: history.forward();

后退: history.back();

9.0 rowspan 和 colspan 区别

rowspan rowspan 属性规定单元格可横跨的行数。

colspan colspan 属性规定单元格可横跨的列数。

10.0 浏览器有多少种盒子模型

1.标准W3C盒子模型 2.IE盒子模型

1：标准W3C盒子模型

宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)

高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)

2: IE盒子模型

宽=width+(border-left)+(border-right)

高=height+(border-top)+(border-bottom)

11.0 怎么解决盒子边距溢出的问题

给div加边框border

使用overflow:hidden;隐藏溢出

12.0 axios底层原理

axios 原理还是属于 XMLHttpRequest，因此需要实现一个ajax。
还需要但会一个promise对象来对结果进行处理。
------具体百度

13.0 双向数据底层原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

14.0 git add . 提交到哪里

将当前目录下修改的所有代码从工作区添加到暂存区 . 代表当前目录

git commit -m ‘注释’ 将缓存区内容添加到本地仓库

（一）git add .

不加参数默认为将修改操作的文件和未跟踪新添加的文件添加到git系统的暂存区，注意不包括删除

（二）git add -u .

-u 表示将已跟踪文件中的修改和删除的文件添加到暂存区，不包括新增加的文件，注意这些被删除的文件被加入到暂存区再被提交并推送到服务器的版本库之后这个文件就会从git系统中消失了。

（三）git add -A .

-A 表示将所有的已跟踪的文件的修改与删除和新增的未跟踪的文件都添加到暂存区。

15.0 git回退版本

（一）git回退到某个历史版本

使用git log命令查看所有的历史版本，获取某个历史版本的id，假设查到历史版本的id是

139dcfaa558e3276b30b6b2e5cbbb9c00bbdca96

git reset --hard 139dcfaa558e3276b30b6b2e5cbbb9c00bbdca96

把修改推到远程服务器

git push -f -u origin master

16.0 关于DOM级别的一些问题

DOM0级标准是不存在的，所谓的DOM0级是DOM历史坐标中的一个参照点而已，具体说呢，DOM0级指的是IE4和Netscape 4.0这些浏览器最初支持的DHTML..大概2000年的时候争论过DOM0的问题，最后结论大概是，没有官方形成此标准.。

DOM1级（DOM Level 1）于1998年10月成为W3C的推荐标准。DOM1级由两个模块组成：DOM核心（DOM Core）和DOM HTML。其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。

DOM2级引入了下列新模块，也给出了众多新类型和新接口的定义。

DOM视图（DOM Views）：定义了跟踪不同文档（例如，应用CSS之前和之后的文档）视图的接口；

DOM事件（DOM Events）：定义了事件和事件处理的接口；

DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口；

DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。

DOM3级则进一步扩展了DOM，引入了以统一方式加载和保存文档的方法–在DOM加载和保存（DOM Load and Save）模块中定义；新增了验证文档的方法–在DOM验证（DOM Validation）模块中定义。DOM3级也对DOM核心进行了扩展，开始支持XML 1.0规范，涉及XML Infoset、XPath和XML Base。

在阅读DOM标准的时候，读者可能会看到DOM0级（DOM Level 0）的字眼。实际上，DOM0级标准是不存在的；所谓DOM0级只是DOM历史坐标中的一个参照点而已。具体说来，DOM0级指的是Internet Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML。

17.0 编程时导航

this.$router.push({ //编程式导航，用于嵌套循环
   name: "computer"
})

18.0 vue 传参

this.id = this.$route.params.id;

19.0 vue单页面与多页面区别

单页面（spa）的优点：

1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小

2，前后端分离

3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

单页面缺点：

1，不利于seo

2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

3，初次加载时耗时多

4，页面复杂度提高很多

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

20.0 v-once

只渲染元素和组件一次, 这可以用优化更新性能执行一次性插值指令,当改变数据时,插值处的内容不会更新

22.0 v-if 和 v-for 的优先级

v-for 的优先级比 v-if 高

当它们都处于同一节点时，v-for 的优先级高于 v-if。这意味着，v-if 将分别在循环中的每次迭代上运行。

23.0 作用域和作用域链的概念

`作用域:函数和变量的有效范围`

全局作用域 在任何位置都可以使用，一般写在script这下任何位置都可以访问。

局部作用域 在某个函数里面-局部作用域，在局部声明的变量叫局部变量

注意

没有使var声明直接赋值，是隐性全局变量(不建议不使用var声明变量)

`作用域链:决定了哪些数据能被函数访问`

函数内部可以访问函数外部
如果内部和外部使用相同的变量，优先使用内部
如果有多个作用域，函数内部优先使用内部的变量
作用域之前的变量的访问规则：
- 有全局变量，在局部作用域任意访问
- 如果我没有，会在上一级作用域查找，还没有，再次向上一级查找，直到全局作用域为止，还没有就报错

24.0 闭包的概念

闭包的概念：函数A中，有一个函数B中，函数B中可以访问函数A中定义的变量或者是数据，此时形成了闭包
闭包的模式：函数模式的闭包，对象模式的闭包
- 函数模式的闭包：在一个函数中有一个函数
- 对象模式的闭包：函数中有一个对象
闭包的作用：缓存数据，延长作用域链
闭包的优点和缺点：缓存数据

总结如果想要缓存数据，就把这个数据放在外层的函数和里层的函数的中间位置（还未理解 - - ！）

闭包函数
1. 外层函数
2. 外层函数有一个局部变量
3. 里层函数
4. 里层函数使用外层函数的那个局部变量
5. 里层函数被调用
闭包函数修改的那个变量不会被回收，也就是说一直存在内存中

闭包把数据变得安全，但是也会消耗部分性能

25.0 沙箱的概念

沙箱 环境，黑盒，在一个虚拟的环境中模拟真实世界，做实验，实验结果和真实世界的结果是一样，但不会影响真实世界---自调用函数

注意分号：每次都要添加：号才能不会报错。 ()(); (这段不知道哪里要添加分号)

应用场景：全局变量权重特别高，而且也会一直在内存中，起全局变量容易造成冲突所以尽可能不要要用全局变量

第一个括号：包裹匿名函数第二个括号：匿名函数

第一种 (function(){}) () 第二种(function(){}())

26.0原型链的概念

原型链就是创建一个构造函数，它会默认生成一个prototype属性并指向原型对象。使用下一个构造函数的原型对象作为这个构造函数的方法。即对象.prototype = fn() ;。

<div id="map" class="map"></div>

funtion Food(options){
    // options 代表是食物的配置对象，options 也需要设置默认值
    options = options || {};
    // 宽，高，背景色
    this.width = options.width || 20;
    this.height = options.height || options.width || 20;
    this.bgcolor = options.bgcolor || 'gold';
    // x坐标，y坐标
    this.x = options.x || 6;
    this.y = options.y || 3;
    // 用于存放食物盒子的属性
    this.elements = [];
}
/**
*  init 方法用于初始化，把食物盒子到地图中
**/
Food.prototype.init = function () {
    var div = document.createElement('div');
    div.style.width = this.width + 'px';
    div.style.height = this.height + 'px';
    div.style.backgroundColor = this.bgcolor;
    // 我们把坐标位置更新的逻辑写到另一个方法中
    map.appendChild(div);
    /* 这一步很关键，盒子要更新位置都要从 elements 里找  */
    this.elements.push(div);

};
window.Food = Food;

// 在另一个页面调用
this.food = new Food();
this.food.init();