Js知识点集锦

// 阻止事件冒泡  
function stopBubble(e) {  
  if(e && e.stopPropagation){  
      e.stopPropagation();  
  } else {  
    window.event.cancelBubble = true;  
  }  
};  
// 阻止浏览器的默认事件  
function stopDefault(e){  
  if(e && e.preventDefault) {  
    e.preventDefault();  
  } else {  
    window.event.returnValue = false;  
  }  
  return false;  
};  

事件模型解释： https://segmentfault.com/a/11...
Javascript的事件流模型都有什么？如何阻止？

两种事件模型：捕获型事件和冒泡型事件
事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。
1、事件：是文档或浏览器窗口中发生的一些特定的交互瞬间
 2、事件流：事件发生的顺序，页面中接受事件的顺序
3、事件冒泡：(事件从最深的节点开始，然后逐步向上传播事件，)事件会从最内层的元素开始发生，一直向上传播，直到document对象。发生click事件的顺序应该是p -> div -> body -> html -> document
4、事件捕获：事件会从最外层开始发生，直到最具体的元素。发生click事件的顺序应该是document -> html -> body -> div -> p
5、事件代理（事件委托）：通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上，给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。

事件委托的好处：

事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。
使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。

https://zhuanlan.zhihu.com/p/...
https://www.cnblogs.com/zhana...
https://www.cnblogs.com/liuga...

jQuery中实现事件委托的三种方法：
1)    $.on: 基本用法:$(".parent").on("click", "a", function () { console.log("click event on tag a"); })，它是 .parent 元素之下的 a 元素的事件代理到$(".parent")之上，只要在这个元素上有点击事件，就会自动寻找到.parent元素下的a元素，然后响应事件；
2)    $.delegate: 基本用法:$(".parent").delegate("a", "click", function () { console.log("click event on tag a"); })，同上，并且还有相对应的$.delegate来删除代理的事件；
3)    $.live: 基本使用方法:$("a", $(".parent")).live("click", function () { console.log("click event on tag a"); })，同上，然而如果没有传入父层元素$(.parent)，那事件会默认委托到$(document)上；(已废除)

事件委托原理：

事件委托是通过事件冒泡的原理，利用父级去触发子级的事件。
如果不用事件委托，将ul下每一个li都去添加click事件监听，非常麻烦，而且对于内存消耗是非常大的，效率上需要消耗很多性能；
另外就是如果通过js动态创建的子节点，需要重新绑定事件。
而利用事件委托的话，只需要给父级绑定一个事件监听，即可让每个li都绑定上相应的事件，让你避免对特定的每个节点添加事件监听器；事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。

不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

18、事件冒泡和事件捕获

什么是事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。  
2、ie支持事件冒泡，火狐支持捕获和冒泡两种
3.  w3c支持 e.stopPropagation()，IE则是使用e.cancelBubble = true

https://blog.csdn.net/cyqzy/a...
https://www.cnblogs.com/linxu...
https://www.cnblogs.com/alsy/...

IE和DOM事件流的区别
https://www.cnblogs.com/lucky...

执行顺序不一样、
参数不一样
事件侦听函数不一样
this指向不一样

https://www.cnblogs.com/amcy/...
19、JavaScript防XSS攻击

XSS（Cross Site Scripting），跨站脚本攻击，是一种允许攻击者在另外一个用户的浏览器中执行恶意代码脚本的脚本注入式攻击。XSS攻击其实就是代码的注入。

XSS危害

通过document.cookie盗取cookie

使用js或css破坏页面正常的结构与样式

流量劫持（通过访问某段具有window.location.href定位到其他页面）

Dos攻击：利用合理的客户端请求来占用过多的服务器资源，从而使合法用户无法得到服务器响应。

利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。

利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。

如何防止攻击

编码，就是转义用户的输入，把用户的输入解读为数据而不是代码

校验，对用户的输入及请求都进行过滤检查，如对特殊字符进行过滤，设置输入域的匹配规则等。

设置CSP：CSP也是采用白名单的方式来匹配网页的解析和代码的执行，只不过，执行的层次上升到了浏览器的高度

http://www.cnblogs.com/caizhe...
http://www.cnblogs.com/unclek...
20、适配方案fontsize为什么设在html不是body

使用rem布局，实质都是通过动态改写html的font-size基准值，来实现不同设备下的良好统一适配

rem是基于root根元素(html)计算的,html{font-size:62.5%} body{font-size:3rem}，rem的实质是等比缩放

https://www.cnblogs.com/axl23...
https://segmentfault.com/a/11...

21、get和post
https://www.cnblogs.com/logsh...

HTTP是什么？HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。
HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
GET和POST是HTTP请求的两种基本方法，最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数
GET和POST还有一个重大区别，简单的说：GET产生一个TCP数据包；POST产生两个TCP数据包。
长的说：对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
注意： 并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。

22、http协议中除了get和post之外还有哪些

根据HTTP标准，HTTP请求可以使用多种方法，其功能描述如下所示。
HTTP1.0定义了三种请求方法： GET、POST、HEAD
HTTP1.1新增了五种请求方法：OPTIONS、PUT、DELETE、TRACE 、CONNECT

23、前端缓存（cookies、localStorage、sessionStorage）:https://segmentfault.com/a/11...

1、cookies是服务器发送给客户端的特殊信息，只能保存字符串类型，以文本的形式保存在客户端，每次请求都带着它；如果不在浏览器设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称为会话cookie；如果浏览器设置了过期时间，cookie被保存在硬盘中，关闭浏览器，cookie仍存在，直到过期时间结束才消失。

cookie的应用场景：

（1）判断用户是否登陆过网站，以便下次实现自动登录（或记住密码）。如果我们删除cookie，每次登录都必须重新填写登录信息，
（2）保存上次登录时间等信息。
（3）保存上次查看的页面。
（4）浏览计数。

2、localStorage 的生命周期是永久的，关闭页面或浏览器之后localStorage的数据也不会消失。除非localStorage主动删除数据。否则数据永远不会消失。
3、sessionStorage 的生命周期仅在当前会话下有效，sessionStorage是在同源窗口中始终保存数据，只要浏览器没有关闭，即使刷新页面或进入同源的另一个页面，数据依然存在。但是sessionStorage在浏览器关闭后就会被销毁。同时独立打开同一个页面或同一个窗口，sessionStorage也不是一样的。
其中localStorage 和 sessionStorage 都保存在客户端，不与服务器进行交互通信。

localStorage 和 sessionStorage 的应用场景：

（1）localStorage 常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
（2）sessionStorage适用于敏感账号一次性登录。

cookie和session的区别

cookie数据存放在客户的浏览器上，session数据放在服务器上

cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑*到安全应当使用session

session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie

单个cookie保存的数*据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie

建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中

session保存在服务器，客户端不知道其中的信息；cookie保存在客户端，服务器能够知道其中的信息

session中保存的是对象，cookie中保存的是字符串

session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到，而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的

Cookie和session的作用。区别、应用范围。Session的工作原理是什么

区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中

描述一下cookies，sessionStorage，localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

**web storage和cookie的区别**

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

localStorage、sessionStorage、Cookie的区别及用法:https://segmentfault.com/a/11...

浅谈session,cookie,sessionStorage,localStorage的区别及应用场景:https://www.cnblogs.com/cence...

24、常用的本地存储-----cookie篇
https://www.cnblogs.com/cxyin...
怎么设置cookie，怎么设置cookie以及删除cookie和cookie详解：https://www.cnblogs.com/mader...
编写web端cookie的设置和获取方法：https://blog.csdn.net/u010081...
设置获取cookie，setCookie，getCookie
https://www.cnblogs.com/zmj-b...
25、javascript用户密码加密

md5加密是单向不可逆的，md5 是一种 hash 算法

MD5：信息摘要的一种实现，它可以从任意长度的明文字符串生成128位的哈希值。即使明文消息只改动了一点点，生成的结果也会完全不同。

第三方支付平台如何验证请求的签名？
1.发送方和请求方约定相同的字符串拼接规则，约定相同的密钥。
2.第三方平台接到支付请求，按规则拼接业务参数和密钥，利用 MD5 算法生成 Sign。
3.用第三方平台自己生成的 Sign 和请求发送过来的 Sign 做对比，如果两个 Sign 值一模一样，则签名无误，如果两个 Sign 值不同，则信息做了篡改。这个过程叫做验签。

md5原理：https://www.cnblogs.com/secon...

DES对称加密

DES加密原理：https://www.cnblogs.com/xqxac...

26、谈谈你对this的理解

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象。

个人建议，可以先回答this在不同的场合指向的是什么，在来回答什么时候用到this，这样回答的逻辑会比较好。

this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写。

this是对应执行环境，在全局作用域下，this默认指向window对象。全局环境的this始终指向的是window对象；局部环境下，对象函数调用，this指向的永远是调用该方法的对象，哪个对象调用就指向哪个对象

显示绑定就是通过apply，call，bind，直接将函数中的this绑定到想要的对象上

创建一个构造函数的实例，构造函数中的this会绑定到这个实例对象上

This指针作用域：
1）、在全局执行环境中使用this，表示Global对象，在浏览器中就是window对象。
2）、当在函数执行环境中使用this时，情况就有些复杂了。如果函数没有明显的作为非window对象的属性，而只是定义了函数，不管这个函数是不是定义在另一个函数中，这个函数中的this仍然表示window对象。如果函数显示地作为一个非window对象的属性，那么函数中的this就代表这个对象。
3）、当通过new运算符来调用函数时，函数被当做一个构造函数，this指向构造函数创建出来的对象。
注：当函数被调用时，我们看紧邻括号“()”的左边。如果在括号的左侧存在一个引用，传递给调用函数的“this”值是引用所属于的那个对象，否则this的值就是全局对象。

var name = "window在手，天下我有！";
var obj = {
  name: "敲代码的怪蜀黍",
  objBar: {
    name: "BOBO",
    barFun: function(){
      console.log(this.name);
    }
  }
};
 
//()左侧是barFun引用，它指向objBar对象，所以打印出 “BOBO”
var test1 = obj.objBar.barFun(); //BOBO
 
//()左侧是test2，test2它并不是某个对象的引用，所以打印出 “window在手，天下我有！”
var test2 = obj.objBar.barFun;
test2(); //window在手，天下我有！
 
//下面这个看起来复杂，其实抓住一点就行了：()左侧是testBar，testBar并不属于某个对象的引用，当然打印出来的还是 “window在手，天下我有！”
var test3 = obj.objBar;
var testBar = test3.barFun;
testBar(); //window在手，天下我有！

http://www.ruanyifeng.com/blo...
https://blog.csdn.net/lxcao/a...
https://www.cnblogs.com/liubi...
https://www.cnblogs.com/banzh...
https://www.cnblogs.com/yuanb...

和箭头函数的区别

箭头函数中的this:

1.箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，自己本身并没有this值；
2.箭头函数的this永远指向其上下文的this，任何方法都改变不了其指向，如call(), bind(), apply()。
3.箭头函数作为匿名函数,是不能作为构造函数的,不能使用new
4.箭头函数没有原型属性

https://www.jianshu.com/p/8f7...

27、如何规避javascript多人开发函数重名问题
https://www.cnblogs.com/zhuzh...

可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀;
将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就行;
JS中是没有块级作用域的只有函数作用域，尽量少的使用全局变量，尽可能使用局部变量，这不仅会减少变量重名的几率，更会减少内存开销，因为局部变量一般都会在函数结束后自动销毁释放出内存，而全局变量会直到进程结束才会被销毁,其次，当我们需要一个作用域来关住变量时一般会用一个匿名函数来充当这个作用域。
用类来封装子页, 定义一个空对象，变量和方法都挂载到了不同的对象上，这无形中就给每个同名变量和方法增加了一个顶部命名空间，这样可以最大化的减少代码耦合的几率，项目也容易维护。

// A同学负责的工作人员信息
var A = {} //定义一个空对象
A.name = "tom";
A.gender = "male";
A.age = 30;
A.showName = function() {
    alert(this.name);
}
A.showAge = function() {
    alert(this.age);
}

// B同学负责的老师信息
var B = {}
B.name = "Jack";
B.gender = "male";
B.age = 28;
B.showName = function() {
    alert(this.name);
}
B.showAge = function() {
    alert(this.age);
}

// C同学负责的学生信息
var C = {}
C.name = "Lucy";
C.gender = "female";
C.age = 17;
C.showName = function() {
    alert(this.name);
}
C.showAge = function() {
    alert(this.age);
}

https://www.cnblogs.com/leftf...
https://www.cnblogs.com/luoge...

命名空间
封闭空间
js模块化mvc（数据层、表现层、控制层）
seajs
变量转换成对象的属性
对象化

解决全局变量命名空间变量名重复冲突（技巧）

只在函数里面声明变量。虽然有时候也不是绝对可行，但是函数级作用域可以防止其本地变量跟其他变量发生冲突。

只声明一个全局对象，然后把本来想作为全局变量的值都作为这个对象的属性。

var Vis = {};   //声明空的全局对象
Vis.id = 1;
Vis.name = "dashuaibi";
// 这样所有的变量都被关在了全局对象Vis里面，因此就不会再污染全局命名空间

28、编写自己的jquery组件
https://blog.csdn.net/54power...
29、javascript标签到底是应该放在头部还是尾部？

一般地：
js是立即交互性优先的顶部
延迟交互性稍后的尾部。
javascript标签放在尾部当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。
但在某种情况下也觉得放在头部比较好，比如一个给页面中的某个元素添加了事件的js脚本。页面出来了但是js没加载完的那段时间，用户对此元素做事件操作的时候就出不来应该有的效果。
现在比较倾向于放在头部，做一些优化的工作尽量让js加载快一点。
如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码~~~ 所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

30、创建一个对象

function Person(name, age) {
        this.name = name;
        this.age = age;
        this.sing = function() { 
        alert(this.name)
         } 
 }

var Person = function(name, age){
    //共有属性
    this.name = name;
    this.age = age;
    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };
}

31、封装一个简单的javascript类

//函数声明,然后使用对象或数组访问
function Person() {
   this.name = "jee";
   this.age = 25;
   this.getName = function() {
      return this.name;
   }
} 
var person = new Person();
alert(person.age);
alert(person.getName());

32、答案是多少？

(function(x){
    delete x;
    alert(x);
})(1+5);

1）delete是用来删除对象的属性的，它不能够删除函数中传递的参数
2）所以这里delete x这句其实并没有什么软用，函数正常执行传参及返回参数；
当然，删除失败也不会报错，所以代码运行会弹出“6”。

var Employee = {
  age: 28,
  name: "abc",
  designation: "developer"
}

console.log(delete Employee.name);   // returns true
console.log(delete Employee.age);    // returns true

// 当试着删除一个不存在的属性时
// 同样会返回true
console.log(delete Employee.salary); // returns true

https://blog.csdn.net/travelz...
33、模块化怎么做？

立即执行函数,不暴露私有成员

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

34、js延迟加载的方式有哪些(写出异步加载js方案)？

JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。 
JS延迟加载有助于提高页面加载速度。

http://www.php.cn/js-tutorial...

defer和async

注释：有多种执行外部脚本的方法：
如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack,用的最多）
按需异步载入js（ajax异步加载）：http://blog.csdn.net/lxcao/ar...

异步加载和延迟加载
https://www.cnblogs.com/mylan...

35、new操作符具体干了什么

new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。

https://www.jianshu.com/p/354...
https://developer.mozilla.org...
https://www.cnblogs.com/onepi...

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

36、stopPropagation, preventDefault 和 return false 的区别

事件在特定节点执行完之后不再传递,可以使用事件对象的 stopPropagation() 方法。

// 在弹出对话框上点击时, 不进行任何页面操作, 并阻止冒泡
document.getElementById("dialog").onclick = function(ev) {
    ev.stopPropagation();
};
// 在 documentElement 节点上监听到点击事件时, 隐藏对话框
document.documentElement.onclick = function(ev) {
    document.getElementById("dialog").style.display = "none";
};

使用 preventDefault() 阻止后面将要执行的浏览器默认动作。