前端知识点总结（JavaScript篇）

时间 2019-11-14

原文原文链接

同源策略及跨域请求的方法和原理（比较JSONP和document.domain的不一样及优劣，以及HTML5的跨域方案）
JavaScript数据类型
JavaScript字符串转化
JSONP原理及优缺点
XMLHttpRequest
事件委托
前端模块化（AMD和CommonJS的原理及异同，seajs和requirejs的异同和用法）
session
Cookie
seaJS的用法及原理，依赖加载的原理、初始化、实现等
this问题
模块化原理（做用域）
JavaScript动画算法
拖拽的实现
JavaScript原型链及JavaScript如何实现继承、类的
闭包及闭包的用处，以及闭包可能形成的不良后果。
常见算法的JS实现（如快排、冒泡等）
事件冒泡和事件捕获
浏览器检测（能力检测、怪癖检测等）
JavaScript代码测试
call与apply的做用及不一样
bind的用法，以及如何实现bind的函数和须要注意的点
变量名提高
== 与 ===
"use strict"做用
AJAX请求的细节和原理
函数柯里化（Currying）
NodeJS健壮性方面的实践（子进程等）
NodeJS可否用利用多核实如今计算性能上的劣势等
jQuery链式调用的原理
ES6及jQuery新引进的Promise有什么用处、Promise的原理
NodeJS的优缺点及使用场景
JS中random的几率问题
客户端存储及他们的异同（例如：cookie, sessionStorage和localStorage等）
AngularJS的文件管理及打包（包括模板打包及请求、JS的打包和请求等）
AngularJS的JS模块管理及实践
在你的Angular App页面里随意加一个JS文件，会有什么影响
AngularJS directive及本身如何定义directive
AngularJS双向绑定的原理及实现
你如何测试你的JS代码
DOM1\DOM2\DOM3都有什么不一样
XSS
经常使用数组方法和数组算法（如数组去重、求交集、并集等）
js数组去重复项
js中的垃圾回收机制
常见的JS设计模式
js获取服务器精准时间（客户端如何与服务器时间同步）
什么是js中的类数组对象
Node中exports和module.exports的区别
异步编程的了解
Grunt和Gulp的区别
AngularJS中service\factory\provider的区别
JavaScript中异步编程的几种方式
Nodejs开发踩过的坑
AngularJS中依赖注入的理解
JS中判断是否为数组
Nodejs内存溢出
关于BFC和hasLayout
统计页面中使用最多的三个标签
JS内存泄露及解决方法
在浏览器地址栏按回车、F五、Ctrl+F5刷新网页的区别
判断两个对象的相等
选取两个数的最大公约数
Node模块是如何寻址的
ES6新增的特性
escape(), decodeURIComponent(), decodeURI之间的区别是什么？
CSRF？

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++javascript

同源策略及跨域请求的方法和原理（比较JSONP和document.domain的不一样及优劣，以及HTML5的跨域方案）
答案：同源策略是客户端脚本（尤为是Javascript）的重要的安全度量标准。它最先出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不一样源装载。这里的同源指的是：同协议，同域名和同端口。这里说的js跨域是指经过js在不一样的域之间进行数据传输或通讯，好比用ajax向一个不一样的域请求数据，或者经过js获取页面中不一样域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不一样，都被看成是不一样的域。
浏览器的同源策略，其限制之一就是第一种方法中咱们说的不能经过ajax的方法去请求不一样源中的文档。它的第二个限制是浏览器中不一样域的框架之间是不能进行js的交互操做的。有一点须要说明，不一样的框架之间（父子或同辈），是可以获取到彼此的window对象的，但头疼的是你却不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外，还有些浏览器好比ie6也可使用top、parent等少数几个属性)，总之，你能够当作是只能获取到一个几乎无用的window对象。html

document.domain：只要将同一域下不一样子域的document.domain设置为共同的父域，则这个时候咱们就能够访问对应window的各类属性和方法了。例如：www.example.com父域下的www.lib.example.com和www.hr.example.com两个子域，将对应页面的document.domain设为example.com便可。缺点：只能在一级域名相同时才能运用。前端

JSONP：原理是动态添加一个script标签，而script标签的src属性是没有跨域的限制的。jquery中还提供了一个$.getJSON(url,arg,callback(data))用来进行jsonp访问。缺点：只支持get不支持post；只支持http请求这种状况，不能解决不一样域两个页面之间如何进行JavaScript调用的问题；JSONP请求失败时不返回http状态码。html5

CORS（跨域资源共享）：HTML5引入的新的跨域的方法，不过须要在请求头和相应头设置相应的Access-Control-属性。缺点：兼容性问题，适合一些新的浏览器。java

参考:
说说JSON和JSONP
js中几种实用的跨域方法原理详解
 The Same Origin Policy: JSONP vs The document.domain Property
HTTP访问控制(CORS)node
JavaScript数据类型
答案： JavaScript中有5种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object，Object本质上是由一组无序的名值对组成的。jquery
JavaScript字符串转化
答案：熟悉基本的字符串操做函数，参考
JavaScript中常见的字符串操做函数及用法git
JSONP原理及优缺点
答案：具体JSONP的原理可参考1，说白了就是插入一个script标签，其src指向跨域接口，返回对应的callback(data)，其中data是json格式，callback是页面已存在的function。
优势：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中均可以运行，不须要XMLHttpRequest或ActiveX的支持；而且在请求完毕后能够经过调用callback的方式回传结果。
缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种状况，不能解决不一样域的两个页面之间如何进行JavaScript调用的问题。angularjs
XMLHttpRequest
答案：轻松掌握XMLHttpRequest对象es6
事件委托
答案：使用事件委托技术能让你避免对特定的每一个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪一个子元素的事件。
前端模块化（AMD和CommonJS的原理及异同，seajs和requirejs的异同和用法
答案：
使用AMD\CommonJS\ES Harmony编写模块化的JavaScript
RequireJS中文网

SeaJS对模块的态度是懒执行,SeaJS只会在真正须要使用(依赖)模块时才执行该模块；而RequireJS对模块的态度是预执行；会先尽早地执行(依赖)模块, 至关于全部的require都被提早了, 并且模块执行的顺序也不必定
SeaJS和RequireJS最大的不一样，其中AMD和CMD的区别能够看玉伯在知乎上的回答
session

Cookie
答案：8与9的知识能够参考：参考1和参考2

常见的cookie操做包括建立cookie、添加cookie、删除cookie等，相应函数参考：

//添加（daysToLive大于0）cookie/删除（daysToLive为0）cookie

function setcookie(name,value,daysToLive){

  var cookie = name + "=" + encodeURIComponent(value);

  if(typeof daysToLive === "number"){
     cookie += ";max-age=" + (daysToLive*60*60*24);
  }
  document.cookie = cookie;
}

//解析cookie,直接getcookie()[name]获取对应的name cookie

function getcookie(){
  var cookies = {};
  var all = document.cookie;
  if(all === ""){
     return false;
  }
  var list = all.split(";");
  for(var i=0;i < list.length; i++){
     var cookie = list[i];
     var p = cookie.indexOf("=");
     var name = cookie.substring(0,p);
     var value = cookie.substring(p+1);
     value = decodeURIComponent(value);
     cookies[name] = value;
  }
  return cookies;
}

//删除某个cookie
function deletecookie( name ) {
   document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
   //或者  document.cookie = name + '=; expires=' + (new Date(1970)).toGMTString();
 }

seaJS的用法及原理，依赖加载的原理、初始化、实现等
答案：模块化开发之sea.js实现原理总结，简言之就是要解决三个问题，分别为：
1.模块加载（插入script标签来加载模块。你在页面看不到标签是由于模块被加载完后删除了对应的script标签）；
2.模块依赖（按依赖顺序依赖）；
3.命名冲突（封装一层define，全部的都成为了局部变量，并经过exports暴漏出去）。
this问题
答案：别再为了this发愁了------JS中的this机制
模块化原理（做用域）
答案：其中seajs的原理参考第10题。大体原理都相似。
JavaScript动画算法
拖拽的实现
JavaScript原型链及JavaScript如何实现继承、类的
答案：原型链：就是每一个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针（prototype），而实例则包含一个指向原型对象的内部指针（proto），经过将子构造函数的原型指向父构造函数的实例。
参考：
JS 面向对象之继承 -- 原型链
 js 基于原型的类实现详解
闭包及闭包的用处，以及闭包可能形成的不良后果
答案：好处：可以实现封装和缓存等；坏处：就是消耗内存、不正当使用会形成内存溢出的问题。
聊一下JS中的做用域scope和闭包closure
javascript 闭包的好处及坏处
常见算法的JS实现（如快排、冒泡等）

答案：经常使用排序算法之JavaScript实现。这里有一篇阮一峰老师写的，很是不错的快排算法，快速排序（Quicksort）的Javascript实现。
和排序算法. 还有如《五大经常使用算法》等。
事件冒泡和事件捕获
答案：W3C中定义事件的发生经历三个阶段：捕获阶段（capturing）、目标阶段（targeting）、冒泡阶段（bubbling）。
阻止事件传播的方法：ie下：window.event.cancelBubble = true; 其余浏览器:e.stopPropagation()。
参考：
事件冒泡和事件捕获
浏览器检测（能力检测、怪癖检测等）
JavaScript代码测试
答案：平时在测试方面作的比较少，通常用JSlint检查一些常见的错误。对于功能性的可能会使用基于karma+Jasmine测试框架来作。
call与apply的做用及不一样
答案：做用是绑定this指针，设定函数中this的上下文环境。第二个参数不一样，apply是类数组，而call是一些列参数。
bind的用法，以及如何实现bind的函数和须要注意的点
答案：bind的做用与call和apply相同，区别是call和apply是当即调用函数，而bind是返回了一个函数，须要调用的时候再执行。
一个简单的bind函数实现以下：
```
Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};
```
可参考：How is bind() different from call() & apply() in Javascript?
变量名提高
答案：参考16中的博客及评论部分。
== 与 ===
答案：前者隐式类型转换，后者严格对比。
"use strict"做用
答案：做用是为了规范js代码，消除一些不合理、不严谨的地方；提升效率；为之后新版本js作铺垫。
主要限制：
1.全局变量显式声明；
2.禁止使用with，不推荐使用eval；
3.加强安全措施，好比禁止this关键字指向全局对象；
4.禁止删除变量；
5.显式报错；好比对只读属性赋值，对一个使用getter方法读取属性赋值，对禁止扩展的对象添加新属性；
6.重名错误，对象不能有重名的属性，函数不能有重名的参数；
7.禁止八进制表示法；
8.argument对象的限制；好比禁止使用arguments.callee；
9.函数必须声明在顶层；
10.新增保留字：implements, interface, let, package, private, protected, public, static, yield

Javascript 严格模式详解
AJAX请求的细节和原理
答案：原生的细节也须要重点研究，实际上是jQuery ajax
函数柯里化（Currying）
答案：柯里化（Currying），是把接受多个参数的函数变换为接受单一参数（最初函数的第一个参数）的函数，而且返回接受余下的参数并且返回结果的新函数的技术。
做用:
1.参数复用；在柯里化的外围函数中添加复用的参数便可。
2.提早返回；参看“参考”中绑定事件的例子。
3.延迟计算/运行；其实Function.prototype.bind的方法中延迟计算就是运用的柯里化。
参考：
JS中的柯里化(currying)
NodeJS健壮性方面的实践（子进程等）

答案：同29。
NodeJS可否用利用多核实如今计算性能上的劣势等

答案：《解读Nodejs多核处理模块cluster》
jQuery链式调用的原理
ES6及jQuery新引进的Promise有什么用处、Promise的原理

答案：JavaScript Promise和JavaScript Promise Mini Book
NodeJS的优缺点及使用场景

答案：NodeJS优缺点及适用场景讨论
JS中random的几率问题
客户端存储及他们的异同（例如：cookie, sessionStorage和localStorage等）
共同点：都是保存在浏览器端，且同源的。
区别：
1.cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2.cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下。
3.存储大小限制也不一样，cookie数据不能超过4k，同时由于每次http请求都会携带cookie，因此cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，通常为5M左右。
4.数据有效期不一样，sessionStorage仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持；localStorage始终有效（除非清除），窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。
5.做用域不一样，sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。
6.Web Storage 支持事件通知机制（storage事件），能够将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
AngularJS的文件管理及打包（包括模板打包及请求、JS的打包和请求等）
AngularJS的JS模块管理及实践

答案：AngularJS —— 使用模块组织你的代码
在你的Angular App页面里随意加一个JS文件，会有什么影响

答案：这个啥问题XX。
AngularJS directive及本身如何定义directive

答案：AngularJS之directive
AngularJS双向绑定的原理及实现

答案：AngularJS数据绑定及AngularJS的工做机制，参考《AngularJS up and running》第203页，十三章第一节。简单说检查数据有无更新，仅在如下事件发生时，即：XHR请求、页面加载、用户交互事件等。
你如何测试你的JS代码

答案：平时在测试方面作的比较少，通常用JSlint检查一些常见的错误。对于功能性的可能会使用基于karma的Jasmine测试框架来作。
DOM1\DOM2\DOM3都有什么不一样
XSS

答案：1. 《浅谈javascript函数劫持》 2. 《xss零碎指南》
经常使用数组方法和数组算法（如数组去重、求交集、并集等）

答案：javascript经常使用数组算法总结和Merge/flatten an Array of Arrays in JavaScript
js数组去重复项

答案：js数组去重复项的四种方法
js中的垃圾回收机制

答案：JavaScript垃圾回收机制
常见的JS设计模式

js获取服务器精准时间（客户端如何与服务器时间同步）

答案：思路：简而言之就是发送一个ajax请求，而后获取对应的HTTP Header中的time，因为时延等问题形成时间在JS客户端获取后当前时间已经再也不是服务器此时的时间，而后用本地的时间减去获取的服务器的时间，这应该就是时间偏移量。再新建一个时间，加上此偏移量应该就是此时此刻服务器的时间。代码以下：

var offset = 0;
function calcOffset() {
    var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    xmlhttp.open("GET", "http://stackoverflow.com/", false);
    xmlhttp.send();

    var dateStr = xmlhttp.getResponseHeader('Date');
    var serverTimeMillisGMT = Date.parse(new Date(Date.parse(dateStr)).toUTCString());
    var localMillisUTC = Date.parse(new Date().toUTCString());
    offset = serverTimeMillisGMT -  localMillisUTC;  
}
function getServerTime() {
    var date = new Date();
    date.setTime(date.getTime() + offset);
    return date;
}

或者是：

var start = (new Date()).getTime();

var serverTime;//服务器时间

$.ajax({
  url:"XXXX",
success: function(data,statusText,res){
        var delay = (new Date()).getTime() - start;
        serverTime = new Date(res.getResponseHeader('Date')).getTime() + delay;
        console.log(new Date(serverTime));//标准时间
        console.log((new Date(serverTime)).toTimeString());//转换为时间字符串
        console.log(serverTime);//服务器时间毫秒数
    }
}）

什么是js中的类数组对象

答案：一、它们都有一个合法的 length 属性(0 到 2**32 - 1 之间的正整数)。二、length 属性的值大于它们的最大索引(index)。
Node中exports和module.exports的区别

答案：exports 和 module.exports 的区别
异步编程的了解

答案：
Grunt和Gulp的区别

答案：Gulp vs Grunt
AngularJS中service\factory\provider的区别

答案:讲的很是不错，能够看看。Differences Between Providers In AngularJS和stackoverflow上的回答Service vs provider vs factory。若是英文看的不爽，这里有一篇中文的，还不错那伤不起的provider们啊。
JavaScript中异步编程的几种方式

答案：参加阮一峰前辈写的Javascript异步编程的4种方法，简单说就是1回调函数2事件监听3发布/订阅4promise
Nodejs开发踩过的坑

答案：那些年，在nodejs上踩过的坑
AngularJS中依赖注入的理解

答案：Understanding Dependency Injection
JS中判断是否为数组

答案：isArray/typeof/instanceof,还有toString方法返回的字符串（数组返回'[Object Array]'）。
Nodejs内存溢出

答案：如何本身检查NodeJS的代码是否存在内存泄漏
关于BFC和hasLayout

答案：关于Block Formatting Context－－BFC和IE的hasLayout

统计页面中使用最多的三个标签

答案：思路大体是首先获取页面中全部用到的标签数组，而后依次遍历，将用到的标签放置新的hash表里，每次检测到相同标签对应的key的value值加1.最后转为数组，排序，取前三个。实现方法以下：

function findTags(){
    var allTags = document.getElementsByTagName("*"),
        hash = {};

    for(var i = 0, j = allTags.length; i < j; i++){
        var temp = allTags[i].tagName;
        if(hash[temp]){
            hash[temp]++;
        }else{
            hash[temp] = 1;
        }
    }

    var sortable = [];
    for (var i in hash){
       sortable.push([i, hash[i]]);
     }
    sortable.sort(function(a, b) {return b[1] - a[1]});

    return sortable.splice(0,3);
 }

JS内存泄露及解决方法

答案：JS内存泄露及解决方法
在浏览器地址栏按回车、F五、Ctrl+F5刷新网页的区别

答案：在浏览器地址栏按回车、F五、Ctrl+F5刷新网页的区别
判断两个对象的相等

答案: How to determine equality for two JavaScript objects?
选取两个数的最大公约数

答案：JS how to find the greatest common divisor
Node模块是如何寻址的

答案：《NodeJS深刻浅出》模块开发那一章有详解。
ES6新增的特性

答案：
escape(), decodeURIComponent(), decodeURI之间的区别是什么？
答案：
- 传递参数时须要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。
- 进行url跳转时能够总体使用encodeURI
- js使用数据时可使用escape
- escape对0-255之外的unicode值进行编码时输出%u****格式，其它状况下escape，encodeURI，encodeURIComponent编码结果相同。
  另外：
- escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z
- encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
- encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z
CSRF？
答案：浅谈CSRF攻击方式