2020-02-21

js

Node.js 
是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。

基本类型
Undefined、Null、Boolean、Number、String
引用类型
object、Array、RegExp、Date、Function

闭包
闭包函数通常情况下是指函数里面再一次的嵌套另外的一个函数这种形式，而处于函数内部的函数可以获取外部函数的变量的值。
使用闭包函数会带来变量存储到内存，不会被释放 ，以及this指向的改变
和内存泄漏的问题等等。

作用域
变量与函数的可访问范围
js的作用域是靠函数来形成的，也就是说一个函数的变量在函数外不可以访问。
1.1函数外面定义的变量拥有全局作用域
1.2未定义直接赋值的变量自动声明为拥有全局作用域
3.window对象的属性拥有全局作用

es6新增数组方法
find/findIndex/includes/keys/values/entries/map/set/Array.of/Array.from/

复制一个数组有哪些方法 
var arr = [1,2,3,4];
1. var arr1 = arr.concat();
2. var arr1 = arr.slice(0);
3. var arr1 = [...arr];
4. arr1 = Array.from(arr);
5. for..of..循环
6. for循环

如何判断一个类型是数组 instanceOf的实现
instanceof/constructor/isArray/prototype
console.log(arr instanceof Array)
console.log([].constructor == Array);
Array.isArray([1]);
Object.prototype.toString.call(arr) === '[object Array]'

跨域的常用解决方案
1.JASONP
$.ajax({
    url:'http://www.b.com/getdata',
    type:'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: 'demo', // 自定义回调函数名
    data: {}
});
jsonp缺点：只能使用get请求，不推荐使用

2.cors
跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）
同时满足两大条件，就属于简单请求
1.请求方式：GET、POST、HEAD（注：什么是HEAD请求？HEAD请求和GET本质是一样的，但是HEAD请求不含数据，只有HTTP头部信息）
2.HTTP头部信息不超过一下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type（只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）
非简单请求会发出一次预检测请求，返回码是204，预检测通过才会真正发出请求，这才返回200。这里通过前端发请求的时候增加一个额外的headers来触发非简单请求。

3.代理服务器
server{
    # 监听8080端口
    listen 8080;
    # 域名是localhost
    server_name localhost;
    #凡是localhost:8080/api这个样子的，都转发到真正的服务端地址http://www.b.com:8080 
    location ^~ /api {
        proxy_pass http://www.b.com:8080;
    }    
}

性能优化
用缓存优化 计算过的内容缓存起来
节流防抖
懒加载（图片不在当屏的不加载 滚动到的时候再进行加载）

vue

如何让每一次的请求携带token
设置axios请求拦截器
export default function(vm) {
  axios.interceptors.request.use(config => {
    // 获取token
    const token = localStorage.getItem('token')
    if(token) {
      //如果存在令牌这添加token请求头
      config.headers.Authorization = 'Bearer' + token;
    }
    return config;
  })
//响应拦截器
  // 参数1表示成功响应
  // 这里只关心失败响应
  axios.interceptors.response.use(null, err => {
    if (err.response.status === 401) {
      // 清空vuex
      vm.$store.dispatch('logout');
      // 跳转login
      vm.$router.push('/login')
    }
    return Promise.reject(err);
  })
} 

vue是如何实现双向绑定的？
采用数据劫持的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

vue编译过程是怎样的
首先编译是因为vue写的模版语句html根本不 识别，我们通过编译的过程，可以进行依赖收集，进行依赖收集以后就把data中的数据模型和视图之间产生了绑定关系，产生了依赖关系，以后如果模型发生变化，就可以通知依赖的地方，让他们进行更新 ，这就是执行编译的目的。我们把界面全部编译以后，更新操作，可以做到模型驱动视图的变化，这就是编译过程

vue从data改变到页面渲染到过程
双向绑定是原理是什么
我们在做双向绑定的时候通常使用v-modal指令放在input这样的输入元素上。我们在编译的时候可以解析出v-modal。在操作的时候做了两件事，第一件事，把当前v-modal所属的元素上加了一个事件监听，把v-modal指定的回调函数作为input事件监听的回调函数 去监听，这样当input值发生变化的时候，可以把最新的值设置到 vue的实例上 ，因为vue的实例已经实现了数据的响应化，它的响应化的setter函数会触发界面中的所有模型的依赖的更新， 会通知所有依赖 去做更新和刷新，所以界面中跟这个数据相关的所有部分就更新了

双向绑定和 vuex 是否冲突
在严格模式中使用Vuex，当用户输入时，v-model会试图直接修改属性值，但这个修改不是在mutation中修改的，所以会抛出一个错误。当需要在组件中使用vuex中的state时，有2种解决方案：
1、在input中绑定value(vuex中的state)，然后监听input的change或者input事件，在事件回调中调用mutation修改state的值
2、使用带有setter的双向绑定计算属性。见以下例子（来自官方文档）：
<input v-model="message">
computed: { message: { get () { return this.$store.state.obj.message }, set (value) { this.$store.commit('updateMessage', value) } } }

什么是MVVM，MVC和MVVM的区别，MVVM框架VUE实现原理
 1.MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。
【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。
它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。
它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，
ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，
ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。
并且MVVM中的View 和 ViewModel可以互相通信。
2.MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。
C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。
也就是View跟Model，必须通过Controller来承上启下

router
重定向redirect
router.push(location) history中会有记录
router.replace(location) history中不会有记录
router.go(n) 在history记录中向前跳转几页或者向后几页

package.json配置
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "webpack --progress --hide-modules --config build/webpack.prod.config.js",
    "build:prod": "webpack --progress --hide-modules --config build/prod.js",
    "build:test": "webpack --progress --hide-modules --config build/test.js",
    "build:devop": "webpack --progress --hide-modules --config build/devop.js",
    "build:pre": "webpack --progress --hide-modules --config build/pre.js",
  },

localStorage数据操作
1、localStorage.setItem(key,value)  //保存数据
2、localStorage.getItem(key)           //获取数据
3、localStorage.removeItem(key)   // 删除数据
4、localStorage.clear();         // 删除全部数据

其他

http报文
一个HTTP请求报文由
请求行（请求方法 协议版本）、请求头部、空行和请求数据4个部分组成。
请求头部由关键字/值对组成，每行一对
1.User-Agent : 产生请求的浏览器类型
2.Accept : 客户端希望接受的数据类型，比如 Accept：text/xml（application/json）表示希望接受到的是xml（json）类型
3.Content-Type：发送端发送的实体数据的数据类型。
比如，Content-Type：text/html（application/json）表示发送的是html类型。
4.Host : 请求的主机名，允许多个域名同处一个IP地址，即虚拟主机
HTTP响应报文
也是由四个部分组成：状态行（服务器HTTP协议版本，响应状态码，状态码的文本描述）、消息报头、空行、响应体

缓存
http缓存(强缓存/协商缓存)
本地存储（localStorage/sessionStorage/IndexDB数据库缓存/appCache应用层缓存）


WEB标准简单来说可以分为结构，表现和行为
W3C对web标准提出了规范化要求
1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）

1）。标签字母要小写

2）。标签要闭合

3）。标签不允许随意嵌套

2.对于css和js来说

1）。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

2）。样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

3）。不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

XHTML（可扩展标识语言） 与 HTML （文本标记语言）之间的差异
xhtml比html更加规范
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

Doctype的作用？严格模式和混杂模式的区别？它们有什么意义？
1.<!DOCTYPE>声名位于文档的最前面，在<HTML> 标签的前面，告知浏览器以何种模式来渲染文档。
2.严格模式的排版和JS运作模式都是以浏览器支持的最高的标准运行。按照W3C的标准来解析代码。
3.混杂模式是以宽松的，向后兼容的方式来解析代码。是指浏览器用自己的方式解析代码，模拟老式浏览器的行为以防止网站停止工作。
4.若DOCTYPE为声名或格式不正确，页面将会以怪异模式的方式解析。
5.Doctype标签可声明三种DLD类型，分别是严格型(Strict)，过渡型(Transitional)，框架型(Frameset)。

css引入的方式有哪些？link和@import的区别
页面使用css的方式主要有3种：

标签行内引用（内联样式）
内部样式表
外部样式表，其中外部样式引用有link和import两种
link和import都可以对css样式进行外部引用，但它们还是有区别的。

link和@import区别
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

<img>标签上title与alt属性的区别是什么？
 alt 属性是在图片不能正常显示时出现的文本提示。
 title 属性是在鼠标在移动到元素上的文本提示。

描述css reset的作用和用途
HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

解释css sprites ，如何使用？
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片