# Ajax 

## 1. 介绍一下ajax并代码实现 
### 1.1 基本概念 
>  avaScript 和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

[Ajax | MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX)


### 1.2 创建一个简单的Ajax

 - 创建 XMLHttpRequest 对象
```js
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
```

 - 绑定onreadystatechange 事件
```js
httpRequest.onreadystatechange = function(){
    // Process the server response here.
};
```

 - 向服务器发送请求
```js
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();
```

完整的例子
```js
function ajax(url, cb) {
  let xhr;
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      cb(xhr.responseText);
    }
  }
  xhr.open('GET', url, true);
  xhr.send();
}
```

### 1.3 httpRequest.readyState的值(熟记)

 - 0 (未初始化) or (请求还未初始化)
 - 1 (正在加载) or (已建立服务器链接)
 - 2 (加载成功) or (请求已接受)
 - 3 (交互) or (正在处理请求)
 - 4 (完成) or (请求已完成并且响应已准备好)


### 1.4 访问服务端返回的数据

 - httpRequest.responseText
   - 服务器以文本字符的形式返回
 - httpRequest.responseXML
   - 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理


### 1.5 GET 注意事项

 -  如果不设置响应头 `Cache-Control: no-cache` 浏览器将会把响应缓存下来而且再也不无法重新提交请求。你也可以添加一个总是不同的 GET 参数，比如时间戳或者随机数 (详情见 [bypassing the cache](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache))


### 1.6 POST 请求
> [!NOTE]
> POST请求则需要设置`RequestHeader`告诉后台传递内容的编码方式以及在send方法里传入对应的值

```js
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type": "application/x-www-form-urlencoded");
xhr.send("key1=value1&key2=value2");
```


### 1.7 Ajax如何携带cookie(面试加分)
 - ajax会自动带上同源的cookie，不会带上不同源的cookie
 - 可以通过前端设置withCredentials为true， 后端设置Header的方式让ajax自动带上不同源的cookie，但是这个属性对同源请求没有任何影响。会被自动忽略。

[withCredentials | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials)

```js
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);
```


【计算机网络】Ajax

# 模拟实现私有变量（面试加分项）
```js
// 私有变量的实现
// v1. 基础实现
class Example {
    constructor(name){
        this._private = name;
    }

    getName(){
        return this._private;
    }
}

let ex = new Example('private1');
console.log(ex.getName(), ex._private);  // private private
let ex1 = new Example('private2');
console.log(ex1.getName(), ex1._private);  // private private

// TODO: 主要问题
// 1. 外部可以访问和修改
// 2. 语言没有配合的机制，for In可以枚举出来
// 3. 命名冲突



// v2. 使用闭包来实现
// v2.1
class Example02 {
    constructor(name){
        let _private = '';
        _private = name;

        this.getName = function () {
            return _private;
        }
    }
}
let ex01 = new Example02('private1');
console.log(ex01.getName(), ex01._private);  // private private
let ex02 = new Example02('private2');
console.log(ex02.getName(), ex02._private);  // private private

// 优点：1. 没有命名冲突， 2.外部无法直接访问和修改
// TODO: 缺点
// 1. constructor 的逻辑变得复杂。构造函数应该只做对象初始化的事情，现在为了实现私有变量，必须包含部分方法的实现，代码组织上略不清晰。
// 2. 方法存在于实例，而非原型上，子类也无法使用 super 调用
// 3. 构建增加一点点开销

// v2.2 代码优化
const Example03 = (function () {
    let _private = '';

    class Example03 {
        constructor() {
           _private = 'private';
        }

        getName(){
            return _private;
        }
    }

    return Example03;
})();

let ex3 = new Example03();
console.log(ex3.getName(), ex3._private) // private undefined
// 优点： 1. 没有命名冲突， 2. 外部无法访问和修改
// TODO: 缺点：1. 写法复杂 2. 构建开销


// v3. 使用Symbol来实现
const Example4 = (function () {
    // 每个Symbol实际上都是唯一的
    let _private = Symbol('private');

    class Example4 {
        constructor(props) {
            this[_private] = 'private';
        }

        getName(){
            return this[_private];
        }
    }

    return Example4;
})();

// 优点： 1.没有命名冲突 2.外部无法访问和修改 3. 没有性能损失
// 缺点： 写法稍微复杂，兼容性还好



// v4. 使用WeakMap实现
const _private = new WeakMap();

class Example5 {
    constructor(){
        _private.set(this, 'private');
    }

    getName(){
        return _private.get(this);
    }
}

let ex5 = new Example5();
console.log(ex5.getName(), ex5.name)

// 上面的代码封装
const Example5 = (function () {
    const _private = new WeakMap();

    class Example5{
        constructor(){
            _private.set(this, 'private');
        }

        getName(){
            return _private.get(this);
        }
    }

    return Example5;
})();


// v5. 最新提案
class Point {
    #x;
    #y;

    constructor(x, y){
        this.#x = x;
        this.#y = y;
    }

    equals(point){
        return this.#x === point.#x && this.#y === point.#y;
    }
}
```

【编程题与分析题】模拟实现私有变量

模拟实现私有变量（面试加分项）

# EventLoop
## 1. EventLoop的执行流程图
```js
  ┌───────────────────────┐
┌─>│        timers         │<————— 执行 setTimeout()、setInterval() 的回调
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
│  │     pending callbacks │<————— 执行由上一个 Tick 延迟下来的 I/O 回调（待完善，可忽略）
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
│  │     idle, prepare     │<————— 内部调用（可忽略）
│  └──────────┬────────────┘     
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
|             |                   ┌───────────────┐
│  ┌──────────┴────────────┐      │   incoming:   │ - (执行几乎所有的回调，除了 close callbacks 以及 timers 调度的回调和 setImmediate() 调度的回调，在恰当的时机将会阻塞在此阶段)
│  │         poll          │<─────┤  connections, │ 
│  └──────────┬────────────┘      │   data, etc.  │ 
│             |                   |               | 
|             |                   └───────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
|  ┌──────────┴────────────┐      
│  │        check          │<————— setImmediate() 的回调将会在这个阶段执行
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
└──┤    close callbacks    │<————— socket.on('close', ...)
```

1. setTimeout/setInterval 属于 timers 类型；
2. setImmediate 属于 check 类型；
3. socket 的 close 事件属于 close callbacks 类型；
4. 其他 MacroTask 都属于 poll 类型。
5. process.nextTick 本质上属于 MicroTask，但是它先于所有其他 MicroTask 执行；
6. 所有 MicroTask 的执行时机，是不同类型 MacroTask 切换的时候。
7. idle/prepare 仅供内部调用，我们可以忽略。
8. pending callbacks 不太常见，我们也可以忽略。

## 2. 执行机制
1. 先执行所有类型为 timers 的 MacroTask，然后执行所有的 MicroTask（注意 NextTick 要优先哦）；
2. 进入 poll 阶段，执行几乎所有 MacroTask，然后执行所有的 MicroTask；
3. 再执行所有类型为 check 的 MacroTask，然后执行所有的 MicroTask；
4. 再执行所有类型为 close callbacks 的 MacroTask，然后执行所有的 MicroTask；
5. 至此，完成一个 Tick，回到 timers 阶段；
……
如此反复，无穷无尽……
![执行机制](../../img/node-event-loop.png)

### 2.1 实例理解
```js
const macroTaskList = [
  ['task1'],
  ['task2', 'task3'],
  ['task4'],
]

for (let macroIndex = 0; macroIndex < macroTaskList.length; macroIndex++) {
  const microTaskList = macroTaskList[macroIndex]

  for (let microIndex = 0; microIndex < microTaskList.length; microIndex++) {
    const microTask = microTaskList[microIndex]

    // 添加一个微任务
    if (microIndex === 1) microTaskList.push('special micro task')

    // 执行任务
    console.log(microTask)
  }

  // 添加一个宏任务
  if (macroIndex === 2) macroTaskList.push(['special macro task'])
}


// 输出结果：
// > task1
// > task2
// > task3
// > special micro task
// > task4
// > special macro task
```
### 2.2 执行细节分析
#### 2.2.1 试分析下面程序的执行结果

```js
console.log(1)
setTimeout(function() {
    console.log(2)
})

Promise.resolve()
    .then(function() {
        console.log(3)
    })

console.log(4)
```

#### 2.2.2 执行流程分析

> stack(执行栈)、Micro(微任务)、Macro（宏任务）

1. 初始状态： stack:[], Micro: [], Macro: [script]。执行栈为空, 微任务为空, 宏任务队列中有一个整体的 script代码 

2. 主线程开始执行, 遇到console.log(1), 首先会打印 1 

3. 继续向下执行,遇到 setTimeout异步任务,就将其加入到Macro(宏任务)队列中。等待执行 

4. 继续向下执行, 遇到 Promise.resolve也是一个异步任务,单它是微任务,将其加入 Micro(微任务)队列中,等待着行 

5. 解析console.log(4), 并且打印4。 当主线程执行完打印的结果依次是 1 和 4。

6. 这时候主线程就会问 任务(异步)队列,有没有微任务要执行,将所有的 Micro(微任务)加入执行栈执行, 打印结果 3

7. 微任务执行完了, 就开始下一轮事件循环, 将第一个 Macro(宏任务)压入执行栈执行, 再次打印 2。 

![EventLoop](../../img/node-eventloop.png)


## 3. 谈一下宏任务与微任务的区别？（面试重点）
> [!NOTE]
> 面试常考点，关键在于理解EventLoop的机制，以及宏任务和微任务的底层原理。


### 3.1 宏任务
- **setTimeout**
- **setInterval**
- **setImmediate**
- **requestAnimationFrame**

常见的宏任务: setTimeout、setInterval、setImmediate、 script中整体的代码、 I/O操作、 UI渲染等。

### 3.2 微任务
- **process.nextTick**
- **MutationObserver**
- **Promise.then catch finally**

常见的微任务有: process.nextTick、Promise和 MutationObserver监听DOM的变化。



### 3.3 微任务和宏任务的区别
> [!NOTE]
> - 微任务进入主线程执行是一队一队的, 而宏任务进入主线程是一个一个的。
> - 微任务是在主线程空闲时批量执行, 宏任务是在事件循环下一轮的最开始执行

---
参考文章：
- https://www.jianshu.com/p/deedcbf68880

- https://www.cnblogs.com/qiqingfu/p/10664549.html

【NodeJS相关】EventLoop

2.2.1 试分析下面程序的执行结果

3. 谈一下宏任务与微任务的区别？（面试重点）

# NodeJS
## 1.	对Node的优点和缺点提出了自己的看法：
*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
## 2.	需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
至少给出自己的思路（url-hash,可以使用已有的一些框架history.js等）
## 3.	Node.js的适用场景？
1)、实时应用：如在线聊天，实时通知推送等等（如socket.io）
2)、分布式应用：通过高效的并行I/O使用已有的数据
3)、工具类应用：海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序
4)、游戏类应用：游戏领域对实时和并发有很高的要求（如网易的pomelo框架）
5)、利用稳定接口提升Web渲染能力
6)、前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著名的纯Javascript全栈式MEAN架构）
## 4.	(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
Nodejs相关概念的理解程度
## 5.	解释一下 Backbone 的 MVC 实现方式？
流行的MVC架构模式
## 6.	什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
熟悉前后端通信相关知识


【前端面试题】NodeJS

1.   对Node的优点和缺点提出了自己的看法：

2.   需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？

4.   (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

5.   解释一下 Backbone 的 MVC 实现方式？

6.   什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

# 缓存
##  1. 介绍一下HTTP的缓存？（面试重点）
> [!NOTE]
> Http 的缓存主要利用 header 里的Cache-control 和 ETag

### 1.1 Cache-control
`Cache-control`主要包含以及几个字段：
 - public
   - 指HTTP请求返回的资源在所经过的所有路径包括一些中间代理服务器以及发出这个请求的客户端浏览器都可以进行缓存
 - private
   - 代表发起请求的浏览器才可以进行缓存
 - no-cache
   - 指可以存缓存，但是每次使用都需要去服务端验证
 - no-store
   - 本地和代理服务器都不允许去缓存
 - no-transform
   - 不允许代理/缓存服务器转换文件格式

到期
 - max-age=<seconds\>
   - 缓存到期时间
 - s-maxage=<seconds\>
   - 代理服务器专用
 - max-stale=<seconds\>
   - 指示客户机可以使用超出max-age时间的响应

重新验证
 - must-revalidate
   - 设置了max-age的资源过期后必须到源服务端验证资源是否还可用
 - proxy-revalidate
   - （缓存服务器用）设置了max-age的资源过期后必须到源服务端验证资源是否还可用


### 1.2 ETag
> [!NOTE]
> `ETag`:即用来进行对比缓存，Etag 是服务端资源的一个标识码

当客户端发送第一次请求时服务端会下发当前请求资源的标识码 Etag，下次再请求时，客户端则会通过 header 里的 If-None-Match 将这个标识码 Etag 带上，服务端将客户端传来的 Etag 与最新的资源 Etag 做对比，如果一样，则表示资源没有更新，返回 304。



### 1.3 缓存方案

#### 1.3.1 需求
有的静态资源会设置一个较长的缓存时间，但是我们希望用户还是能使用最新的资源。

#### 1.3.2 解决方案
在打包完成的文件名上加上一串哈希码，这个哈希码是根据内容进行的哈希计算。
所以，如果你的内容文件没有变，那么这个hash码不会变，即这个静态资源的url没有变。 而如果内容有变，那么hash码也会变，浏览器就会去请求新的资源请求。

#### 1.3.3 普通的缓存机制(重点理解)

![浏览器缓存](../img/browser-cache.jpg)

### 1.4 资源验证
> [!NOTE]
> 如果给Cache-Control设置了no-cache后，每次要使用资源时浏览器都要到服务器验证缓存是否过期。 如果直接使用缓存，返回码：**304**

如何验证资源是否过期：
 - Last-Modified（上次修改时间）
   - 配合 If-Modified-Since 或 If-Unmodified-Since 使用
   - 如果请求的资源头中有Last-Modified这个头，这个头指定了一个时间。那么浏览器重新访问资源时就会带上If-Modified-Since这个头，其时间是Last-Modified的时间，服务器就会拿这个时间去对比上次修改的时间，然后告诉浏览器是否可以直接使用。

 - Etag （数据签名）
   - 资源会依据它的内容产生一个唯一的数据签名，如果资源有更新，那么Etag就会发生变化。
   - 配合 If-Match 或 If-None-Match 使用


【计算机网络】缓存

1. 介绍一下HTTP的缓存？（面试重点）

1.3.3 普通的缓存机制(重点理解)

# 开发环境	
## 3.1 Git操作	
### 3.1.1 Git的基本命令有哪些
```js
git add .
git checkout xxx
git commit -m 'xxx'
git push origin master
git pull origin master
git branch
git checkout -b xxx / git checkout xxx(文件名)
git merge xxx
git diff
--------------git多人协作：
git branch                   查看当前分支
git checkout -v dev          创建新的分支
git checkout dev             切换当前分支
git push origin dev          提交代码到dev分支（修改bug…
git checkout matser          切换到已有的分支
git merge dev                合并dev分支到master分支
git push origin master       推送修改的内容到远程仓库

```	
### 3.1.2 git rebase和git merge的区别？
**git merge**：将两个分支，合并提交为一个新提交，并且新提交有2个parent。把公共分支和你当前的commit 合并在一起，形成一个新的 commit 提交

**git rebase**：会取消分支中的每个提交，并把他们临时存放，然后把当前分支更新到最新的origin分支，最后再吧所有提交应用到分支上。
### 3.1.3 git上线回滚的流程？
上线流程：
1. 将测试完成的代码提交到git版本库的master分支
2. 将当前服务器的代码全部打包并记录版本号，备份
3. 将master分支的代码提交覆盖到线上服务器，生效新的版本号
回滚流程：
1. 将当前服务器的代码打包并记录版本号，备份
2. 【将备份的上一个版本号解压，覆盖到线上服务器】，生成新的版本号

## 3.2 模块化	
### 3.2.1 谈一下你对JS模块化的理解	
### 3.2.2 AMD和CommonJS规范的区别和使用场景	
AMD规范：
1. require.js requirejs.org
2. 全局定义了define函数
3. 全局定义了require函数
4. 依赖JS会自动、异步加载
CommonJS规范：
1. 这是nodejs的模块化规范，现在被广泛应用于前端
2. 前端开发依赖的插件和库，都可以从npm中获取
3. 构建工具的高度自动化，使得使用npm的成本非常低
4. CommonJS不会异步加载JS，而是同步一次性加载进来
使用场景：
1. 需要异步加载JS，使用AMD
2. 使用了npm之后建议使用commonjs规范

## 3.3 构建工具	
### 3.3.1 Webpack的基本配置流程	
> [!NOTE]
> 主要是掌握Webpack的基本配置，包括文件的打包和压缩、CSS文件的处理和模块化、图片文件的处理以及一些开发环境的常用配置和性能优化知识点，理解打包的底层实现原理。
> - 具体配置可参考：https://www.jianshu.com/p/11e8f9668c0e

### 3.3.2 Gulp的基本配置流程，与webpack的区别？
> [!NOTE]
> 需要掌握基本的配置流程和打包过程，底层实现原理。

```js
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require("browser-sync").create(), //自动刷新
    reload = browserSync.reload;
const filter = require('gulp-filter');
// gulp-filter 包， 以确保只有 *.css 文件响应 .reload - 这样一来，
// 您还是会得到CSS注入，而不是整个页面重载。
const useref = require('gulp-useref'); //合并JS
const uglify = require('gulp-uglify'); //js压缩
const minifyCSS = require('gulp-minify-css'); //压缩css

var gulpIf = require('gulp-if');

var del = require('del');

var runSequence = require('run-sequence');//组织任务执行顺序,未使用

var rename = require('gulp-rename');//重命名

var watch=require('gulp-watch');//监视

var minifyHtml = require("gulp-minify-html");//压缩html

var babel = require("gulp-babel");
// npm install --save-dev gulp-babel@7 babel-core babel-preset-env

var jshint = require("gulp-jshint");//js检查
var imagemin = require('gulp-imagemin');//压缩图片文件
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
var connect=require('gulp-connect');//引入gulp-connect模块 浏览器刷新
var cache = require('gulp-cache');//压缩图片可能会占用较长时间，使用 gulp-cache 插件可以减少重复压缩。
var RevAll = require("gulp-rev-all");//md5后缀
 
gulp.task('html',function(){//编译html
    return gulp.src('app/*.html')
    .pipe(gulp.dest('app/dist'))
    .pipe(connect.reload());
})

gulp.task('css',function(){//编译scss
    return gulp.src('app/scss/**/*.scss')
    .pipe(sass())//编译scss
    // .pipe(gulp.dest('app/css')) //当前对应css文件
    .pipe(gulp.dest('app/dist/css')) //当前对应css文件
    .pipe(connect.reload());//更新
})
 
gulp.task('js',function(){//编译ES6并且压缩
    return gulp.src('app/js/**/*.js')
    .pipe(jshint())//检查代码
    .pipe(babel({//编译ES6
        presets: ['es2015']
    }))
    .pipe(uglify())//压缩js
    .pipe(gulp.dest('app/dist/js'))
    .pipe(connect.reload());
})

gulp.task('fonts', function() {
    return gulp.src('app/fonts/**/*')
        .pipe(gulp.dest('app/dist/fonts'))
})

gulp.task('images', function() {
    return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({//压缩图片文件
        interlaced: true,
        })))
        .pipe(gulp.dest('dist/images'))
});

gulp.task('clean:app/dist', function() {//删除之前生成的文件
    return del(['app/dist']);
});

gulp.task('clean:dist', function() {//异步清理除dist目录图片以外的文件
     return del(['app/dist/**/*', '!dist/images', '!dist/images/**/*']);
});

gulp.task('minFs', function() {//压缩文件
    return gulp.src('app/dist/*.html')
        .pipe(useref())//合并js
        .pipe(
            gulpIf('*.js',uglify())//压缩js
        )
        .pipe(gulpIf('*.css', minifyCSS()))//压缩css
        .pipe(RevAll.revision({//不被重命名
            dontRenameFile:[/^\/favicon.ico$/g, ".html"]
        }))  
        .pipe(gulp.dest('dist'));
});

gulp.task('connect:app',function(){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9998//端口
    })
})

gulp.task('connect:dist',function(cb){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9999//端口
    })
    cb()//执行回调，表示这个异步任务已经完成，起通作用,这样会执行下个任务
})

gulp.task('watchs',function(){//监听变化执行任务
    //当匹配任务变化才执行相应任务
    gulp.watch('app/*.html',gulp.series('html'));
    gulp.watch('app/scss/**/*.scss',gulp.series('css'));
    gulp.watch('app/js/**/*.js',gulp.series('js'));
    gulp.watch('app/fonts/**/*',gulp.series('fonts'));
    gulp.watch('app/images/**/*',gulp.series('images'));
})

//gulp.series|4.0 依赖顺序执行
//gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行

//下面1和2分别运行

//1.自动监测文件变化并刷新浏览器

//初始生成app/dist目录
gulp.task('init',gulp.series('clean:app/dist',gulp.parallel('html','css','js','fonts','images')));

//启动任务connect:app服务，并监控变化
gulp.task('run',gulp.series('init','connect:app','watchs'));

//2.生成打包文件
gulp.task('build',gulp.series('clean:dist',gulp.parallel('init'),'minFs'));

//启动任务connect:dist服务，生成打包文件后，监控其变化
gulp.task('serve',gulp.series('connect:dist','build','clean:app/dist','watchs'));
```
## 3.4 Linux环境基本命令	
> 可参见开发环境下的Linux面试题相关章节。

【JS相关】开发环境

3.2.1 谈一下你对JS模块化的理解

3.2.2 AMD和CommonJS规范的区别和使用场景

3.3.2 Gulp的基本配置流程，与webpack的区别？

# JS面试题总结

## [变量](变量类型和类型转换.md)

【JS相关】md

# Bootstrap
## 1.Bootstrap 的优缺点？
+ 优点：CSS代码结构合理，现成的代码可以直接使用（响应式布局）
+ 缺点：定制流程较为繁琐，体积大

## 2.如何实现响应式布局？
+ 原理：通过media query设置不同分辨率的class
+ 使用：为不同分辨率选择不同的class

## 3.如何定制自己的bootstrap样式?
1. 使用CSS同名类覆盖（门槛低，见效快，可能会有bug）
2. 修改源码重新构建（一次性彻底解决）
                [
                    bootstrap.scss是入口文件，修改这个文件内容之后，使用node-sass重新编译scss文件
                    node-sass --output-style expanded bootstrap/custom/scss/bootstrap.scss > bootstrap/custom/dist/css/bootstrap.css
                ]
3. 引用Scss源文件，修改变量(类似于预处理器的使用方式, 徐亚什么模块引入什么模块，会更加灵活，推荐)
                [
                    1. 创建一个自己的custom.scss文件
                    ```
                        $primary: greed;
                        @import './botstrap-custom/scss/bootstrap.scss'
                    ```
                ]


## 4.如何实现一个响应式布局框架？
> [!NOTE]
> 面试常考考点，要求模拟实现boostrap的底层实现原理。

上面的[!NOTE]是行匹配模式，默认情况下支持类型NOTE，TIP，WARNING和DANGER。
### 4.1 JS的模拟实现
```html
<style>
    .container{
　　　　height: 40px;
       margin: 0 auto;
       background-color: rebeccapurple;
   }
</style>
<div class="container"></div>
<script>
    window.addEventListener("load", function () {
        // 1. 获取容器
        let container = document.querySelector(".container");
        let clientW = 0;
        resize();
        // 2. 监听窗口的大小变化
        window.addEventListener("resize", resize);
        function resize() {
            // 2.1 获取改变后的宽度
            clientW = window.innerWidth;
            // 2.2 判断
            if(clientW >= 1200){ // 超大屏幕
                container.style.width = "1170px";
            }else if(clientW >= 992){ // 大屏幕
                container.style.width = "970px";
            }else if(clientW >= 768){ // 小屏幕
                container.style.width = "750px";
            }else { // 超小屏幕
                container.style.width = "100%";
            }
        }
    });
</script>
```

### 4.2 CSS的模拟实现
```html
<style>
        .container{
            height: 40px;
            margin: 0 auto;
            background-color: rebeccapurple;
        }

        /*媒体查询*/
        @media screen  and (max-width: 768px){
            .container{
                width: 100%;
            }
        }
　　　　　
        @media screen  and (min-width: 768px) and (max-width: 992px){
            .container{
                width: 750px;
            }
        }
        @media screen  and (min-width: 992px) and (max-width: 1200px){
            .container{
                width: 970px;
            }
        }
        @media screen  and (min-width: 1200px){
            .container{
                width: 1170px;
            }
        }
</style>
<div class="container"></div>
```
> [!NOTE]
> 关键点：mediaQuery, 浮动，响应式布局，resize事件


【CSS相关】Bootstrap

4.如何实现一个响应式布局框架？

# 虚拟滚动技术
## 1. 插入几万个 DOM，如何实现页面不卡顿？（面试加分项）

1. 肯定不能一次性把几万个 DOM 全部插入，这样肯定会造成卡顿，所以解决问题的重点应该是如何分批次部分渲染 DOM。部分人应该可以想到通过 `requestAnimationFrame` 的方式去循环的插入 DOM，其实还有种方式去解决这个问题：**虚拟滚动**（virtualized scroller）。

2. 这种技术的原理就是只渲染可视区域内的内容，非可见区域的那就完全不渲染了，当用户在滚动的时候就实时去替换渲染的内容。


![滚动](../../img/vScroll.png)


3. 从上图中我们可以发现，即使列表很长，但是渲染的 DOM 元素永远只有那么几个，当我们滚动页面的时候就会实时去更新 DOM，这个技术就能顺利解决这发问题。如果你想了解更多的内容可以了解下这个 [react-virtualized](https://github.com/bvaughn/react-virtualized)。


【性能优化】其他技术

1. 插入几万个 DOM，如何实现页面不卡顿？（面试加分项）

【流行框架】Vue相关

2.3.4 vm._c是什么，render函数返回了什么？

3. Vue的整个实现流程源码解读？？？（总结点）

3.3 首次渲染，显示页面，且绑定依赖

3.4 为何要监听get, 直接监听set不行吗？

3.5 data属性变化，触发rerender函数

4. 说一下从使用jQuery和使用框架的区别？

9. vue的数据劫持以及操作数组的坑？

12. defineReactive的实现(响应式手写实现)?

12.3 vue 的双向绑定的原理是什么(常考)

15. 请详细说下你对 vue 生命周期的理解？

17.1 active-class 是哪个组件的属性？

17.4 懒加载（按需加载路由）（常考）

17.4.1 不进行页面按需加载引入方式

17.4.2 进行页面按需加载的引入方式

17.5 vue-router 有哪几种导航钩子?

18.1 vuex 是什么？怎么使用？哪种功能场景使用它？

18.6 vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中

18.9.1 使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？

18.9.2  state 内部支持模块配置和模块嵌套，如何实现的？

18.9.3 在执行 dispatch 触发 action(commit 同理)的时候，只需传入(type, payload)，action 执行函数中第一个参数 store 从哪里获取的？

18.9.4 Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？

18.9.5 调试时的"时空穿梭"功能是如何实现的？

19.1 自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

19.2 说出至少 4 种 vue 当中的指令和它的用法

20.1 axios 是什么？怎么使用？描述使用它实现登录功能的流程

20.2 axios与ajax, fetch的区别和优缺点？

# NOdeJS 中间件

## 1. 中间件到底是个什么东西呢？
> [!NOTE]
> 中间件其是一个函数，在响应发送之前对请求进行一些操作

![中间件模型](../../img/node-中间件模型.png)

```js
    function middleware(req,res,next){
        // 做该干的事
    
        // 做完后调用下一个函数
        next();
    }
```
这个函数有些不太一样，它还有一个next参数，而这个next也是一个函数，它表示函数数组中的下一个函数

## 2. 函数数组又是什么呢?
> [!NOTE]
> express内部维护一个函数数组，这个函数数组表示在发出响应之前要执行的所有函数，也就是中间件数组

使用app.use(fn)后，传进来的fn就会被扔到这个数组里，执行完毕后调用next()方法执行函数数组里的下一个函数，如果没有调用next()的话，就不会调用下一个函数了，也就是说调用就会被终止

## 3. 如何实现一个中间件呢？
```js
    function express() {
      // 函数数组用于存放所有的中间件函数
      let fns = [];
      
      let app = function(req, res) {
        let i = 0;
        
        function next() {
          // 取出数组中的下一个函数
          let task = fns[i++];
          // 如果函数存在的u啊
          if (task) {
              // 就先去执行这个用户自定义的函数里面的业务逻辑(每次把当前的next继续向后传递)
              task(req, res, next);
          }
        }
        
        // 用户首次调用的执行第一个
        next();
      }
      
      // 使用use的时候就把用户指定的这个函数放入到一个函数数组里面去
      app.use = function(task) {
        fns.push(task);
      }
      
      return app;
    }
```


## 4. 模拟实现一个异步按顺序执行的函数？（面试重点）
```js
    function fn1(next) {
      next();
    }
    
    function fn2(next) {
      next();
    }
    
    function fn3(next) {
      next();
    }
    
    
    // 类似于一个异步的迭代器
    function nextRegister(...tasks) {
      let i = 0;
      
      
      function next() {
        let task = tasks[i];
        if (!task || typeof task !== 'function') {
            return ;
        }
        task(next);
      }
      
      // 第一次调用
      next();
    }
    
    // 开始注册三个异步函数
    nextRegister(fn1, fn2, fn3);
```


## 5. 描述一下express或者koa的技术架构？
> [!NOTE]
> 关键在于解释清楚对路由中间件的理解，可以以koa的洋葱模型讲解为例。

![洋葱模型](../../img/koa-洋葱模型.jpg)

【NodeJS相关】中间件

1. 中间件到底是个什么东西呢？

4. 模拟实现一个异步按顺序执行的函数？（面试重点）

5. 描述一下express或者koa的技术架构？

# 移动Web开发面试题
1. 如何实现移动端适配？
2. 移动端300ms延迟和解决方法？
3. 移动端点击穿透事件的原因和解决方法？
4. 移动web开发现有的解决方案有哪些？
5. 移动端常用类库及优缺点？
6. Zepto库和JQ区别？
7. 移动端最小触控区域是多大？