知识小结

题(一) 路由优缺点:

1. hash模式:

优点：简单，不需要服务端支持可以完成路由跳转
缺点：url比较丑，不象一个真正的资源地址， hash只存在前端页面，用于锚点功能，当服务端往前端跳转地址的时候并不能正确的携带hash部分，导致路由丢失（例如：微信公众号登陆回跳业务逻辑，第十四方支付回跳详情，等等。。。）

2. history/browser模式:

优点：url地址比较优雅，像一个真正的资源地址
缺点：url并不是一个真正的资源地址，直接访问会出现资源404，需要服务端配合做重定向 (开发环境，devserver中配置：historyApiFallback，线上使用：nginx或者apache做404的重定向index.html)

题(二) js原型链:

__proto__ 是隐士原型   prototype 是显示原型

定义:

每个对象都有prototype属性，如果我们去找一个对象下边的属性，就回去这个对象的prototype去找，如果找不到就会继续往里面的prototype找，找到的会返回，找不到返回null

题(三) 节流和防抖的区别

使用场景:

比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源。

1.防抖:

所谓防抖，就是指触发事件在N秒后执行一次，如果在N秒内又触发了事件，则会重新计算函数执行时间。
  一种解决方案就是用户每次停止输入后，延迟超过500ms时，这时去搜索此时的string 这就是防抖。
原理:将若干个函数调用一次，如果又调用了，就先清空时间，在调用一次事件。 在一段时间内，如果有调用了，就先清空时间，在调用一次事件。

2.节流:

所谓节流，就是指连续触发事件但是在N秒中执行一次函数。
  另一种方案比防抖要宽松些，这时我们不想用户一味的输入，而给用户一些搜索提示，所以在当中限制每过500ms 就查询一次此时的string 这就是节流。
原理：节流函数不管事件触发有多频繁，都会保证在规定时间内一定执行一次真正的事件处理。

题(四) promise（解决异步回调深渊）

.then .catch promise.all promise.race promise.resolve promise.reject 

题(五) async await

在获取请求数据用到的多，如果发生错误用try catch 返回promise对象，使用.then方法添加回调函数，当函数执行的时候，一旦遇到await就先回返回，等到异步操作完成后，在接着执行函数体后面的语句。

题(六) new 操作符具体干了什么

1.创建了一个新的对象
2.设置原型链，obj.__proto__ = Object.prototype
3.让function的this指向obj,并执行function 函数体 Object.call(obj)
4. 判断function（构造函数）的返回类型

题(七) null 和 undefined 的区别

null 表示一个对象被定义了  值为"null"
undeined 表示不存在这个值
typeof null //"object"  
  null 是一个对象，（空对象，表示没有任何属性和方法） 例如作为函数的参数，表示改函数的参数不是对象
typeof undefined //"undefined"
  undefined 是一个表示"无"的原始值或表示"缺少值"，就是此处应该有一个值。但是还没有定义。
  当尝试读取时会返回undefined 例如变量被声明后没有赋值，就等于undefined
注意: 在验证null时，一定要使用=== ，因为 == 无法识别null 和 undefined，

题(八) 相等和全等的区别

（相等） ==

  定义:先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较.
  1.如果两个值类型相同，再进行三个等号(===)的比较.
  2.如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较.
    1.）如果一个是null，一个是undefined，那么相等.
    2.）如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较.

（全等） ===

定义:如果类型不同，直接就是false.
1.如果类型不同，就一定不相等.
2.如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。(判断一个值是否是NaN，只能使用isNaN( ) 来判断.).
3.如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等.
4.如果两个值都是true，或是false，那么相等.
5.如果两个值都引用同一个对象或是函数，那么相等，否则不相等.
6.如果两个值都是null，或是undefined，那么相等.

题(九) 运算符

1.逻辑与 &&

1.1两边条件都为true时，结果才为true；
1.2如果有一个为false，结果就为false；
1.3当第一个条件为false时，就不再判断后面的条件
注意：当数值参与逻辑与运算时，结果为true，那么会返回的会是第二个为真的值；如果结果为false，返回的会是第一个为假的值。

2.逻辑或 ||

2.1只要有一个条件为true时，结果就为true；
2.2当两个条件都为false时，结果才为false；
2.3当一个条件为true时，后面的条件不再判断
注意：当数值参与逻辑或运算时，结果为true，会返回第一个为真的值；如果结果为false，会返回第二个为假的值；

3.逻辑非 ！

3.1当条件为false时，结果为true；反之亦然。

4.按位与运算 &

运算方法：两个数值的个位分别相与，同时为1才得1，只要一个为0就为0。
例: 31&2  结果为2  理由：31的二进制为11111，2的二进制为10  11111&00010 的结果为00010，即2

5.按位或运算 |

运算方法：两个位只要有一个为1，那么结果都为1。否则就为0
例: 31|2 结果为31  理由：31的二进制为11111，2的二进制为10  11111|00010 的结果为11111，即31

题(十) Promise 构造函数 new Promise() 解决异步编程深层嵌套问题

promise 特点: 状态一旦发生改变 就不会再改变 内部不受外部影响

promise 内部有三种状态 pending 进行中、 resolve 成功、 reject 失败
promise 内部状态的改变 1.pending ===》 fulfilled  2. pending ===》 reject 

实例

.then(()=>{},()=>{})  //第一个参数接受成功信息  第二个参数接受失败信息

.catch(()=>{}) //接受失败状态信息

.finally(()=>{}) //不管成功还是失败 都可以执行这个方法

Promise.all([promise1,promise2,···]) //把多个promise实例包装成一个promise实例 同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
Promise.race([promise1,promise2,···]) //把多个promise实例包装成一个promise实例 哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

题(十一)Async / await

async/await 是es7 推出的一套关于异步解决的方案，async/await 是一对好基友，缺一不可，他们的出生是为Promise服务的，可以说是Promise的进化版

语法:

    1 async function (function return Promise)
    函数返回Promise对象
    promise对象的结果由async函数执行的返回值决定

    2 await expression (value or Promise)
    expression一般是Promise对象，也可以是其他值
    如果是Promise对象，await返回的是Promise成功的值
    如果是其他值，直接将此值作为await的返回值

    3 await必须写在async中，但async可以没有await
    如果await的Promise失败，就会抛出异常，需通过try…catch…捕获处理 

    注：await右侧表达式为Promise，得到的结果就是promise成功的value
    注：await右侧表达式不为Promise，得到的结果就是它本身

题(十二) 代理和跨域JSONP区别

跨域问题是由于浏览器为了防止CSRF攻击，避免恶意攻击而带来的风险而采取的同源策略限制，当一个页面中使用XMKHTTPRequest对象发送HTTP请求时（XHR请求），必须保证当前页面和请求的对象是同源的，即协议，域名，端口号 要完全一致，否则浏览器就会阻止此跨域请求返回的数据。

http://www.a.com 与 https://www.a.com 是不同源的，它们协议不同
http://www.a.com 与 http://www.b.com 是不同源的，它们域名不同
http://www.a.com：80 与 http://www.a.com：8080 是不同源的，它们端口号不同
http://www.a.com/test1.js 与 http://www.a.com/test2.js 是同源的

跨域请求的解决方案

虽然同源限制可以有效的防止网络上恶意攻击，但是在实际开发应用中，我们往往需要从本站点想第三方站点发送XHR请求，这就需要有效的解决跨域问题
1. JSONP:只支持GRT,不支持POST请求，
2. 代理:使用代理去边开跨域请求，例如www.a.com/index.html 页面去调用www.b.com/service.jsp 可以通过写一个接口www.a.com/service.jsp，由于这个接口在后端去调用www.b.com/service.jsp 并取到返回值，然后在返回给index.html

服务端修改：例外在服务端页面添加header限制：
//允许所有来源访问header(‘Access-Control-Allow-Method:POST,GET’); 
// 允许访问的方式
header(‘Access-Control-Allow-Origin:*’);

JSONP 是最灵活的，也是最常见的

原理:浏览器支队XHR（XHRHttpRequest)请求有同源请求限制，面对script标签的src属性，link标签ref标签和img标签属性没有这种限制，利用这个漏洞就可以解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的门当向第三方站点请求时，我们可以将此请求放在 < script src=“http://www.b.com/request?para1=1”>< /script >

JSONP请求实现:

//Javascript实现
服务端：
public void ProcessRequest(HttpContext context) {context.Response.ContentType = “text/plain”;

//指定的回调函数名称string callbackFuncName = context.Request.QueryString[“callback”]; string reponseData = “test jsonp”;
//回调脚本string scriptContent = callbackFuncName + “(’” + reponseData + “’”; context.Response.Write(scriptContent);

前端：
运行的结果显示test jsonp,可以看出整个过程：

script标签设置src属性为请求的地址，并判断回调函数作为参数
服务端构建JS脚本，传递返回给客户端的数据
客户端在回调函数中解析服务器生成的数据

题(十三) 严格模式

es5的代码前面加上'use strict' 就处于严格模式
es5的严格模式是可选的
es6代码就处于严格模式

设立严格模式的目的:

消除javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
消除代码运行的一些不安全之处，保证代码运行的安全
提高编译效率，增加运行速度

严格模式的特点

使用变量前必须先定义，不允许遗漏声明
不允许使用8进制的数字。var num = 012; //正常模式。表示10;严格模式不能这么写
不能把函数定义再if语句中 --这条有问题，可以定义
不能给对象声明重名的属性
函数不能有重名的形参
arguments不再跟踪形参的变化
function中的this指向window 

题(十四) 模块规范 AMD CMD ES6 COMMONJS

模块定义:在js里 一个js文件就是一个模块
规定了 抛出和引入

commonjs 规范 require引入 默认去找module.exports 抛出模块

module.exports 抛出模块不能多次赋值，后者会覆盖前者 如果想抛出多个方法，需要以对象的形式去抛出
exports 抛出模块 不能直接赋值 直接复制会修改他的地址执向 通过 exports.去抛出 是module.exports 的一个别名

es6 模块规范 浏览器不支持

import 引入一个模块
export 抛出一个模块

题(十五) script标签的位置

script 放在底部 对于前端页面优化来讲是最佳的，因为DOM文档是从上到下执行 如果js代码出现了问题 页面中的元素 还是能及加载出来的，

DOM 对 script 标签有什么影响？

DOM（Document Object Model,文档对象模型）是HTML和XML文档的编程接口。
DOM文档是自上而下的执行方式 但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>标签是则终端线程，待该script脚本执行结束之后程序菜继续往下执行

script 标签在 body 闭合标签之后可以吗？

许多人认为只要放在底部了，无论是 </body> 标签之前还是在 </body> 标签之后都是一样的。其实还是有差别的，因为从 HTML 2.0 起，放在 </body> 标签之后就是不合标准的。之所以但是浏览器却不会报错，是因为如果在 </body> 标签之后再出现 <script> 或任何元素的开始标签， 都是 parse error，浏览器会忽略之前的 </body>，即视作仍旧在 body 内。所以实际效果和写在 </body> 标签之前是没有区别的。  
所以，只要是让浏览器做了多余的事都是不好的，虽然差别细微，但是还是应该按照标准来，即放在 </body> 标签之前”

导入js的script标签放在那里？

规范是放在head中，主要是先加载和后加载的区别，各有各的好处
放在head中 可以统一管理用户，方便维护；但是浏览器会先加载js文件 如果js文件太大 会造成浏览器在加载页面的时间太长 影响用户的体验。
放在body中（或放在body后）浏览器会首先加载js文件之前的元素，并显示到界面上，这样给用户的体验较好，但是不方便维护。

建议：页面初始化需要用到的 JS 或者比较小版的 JS 文件，放在 head 中；比较特殊的用于页面指定位权置的 JS 文件放在 body 中对应位置；较大的、影响用户体验的 JS 文件放在 body 后。