喜迎春节之一个总结

下面每页的排序都是从1开始，这样看起来内容就会少一点。

上面这个草稿的表格画得不是很好看，优秀的我又用excel做了一个：

绑定事件的方法	解绑	~~阻止冒泡~~ 阻止默认行为
HTML 扫描二维码关注公众号，回复： 5696566 查看本文章
DOM 0级	demo.onclick=null	demo.onclick=function(){ console.log(123) return false }
DOM 2级	demo.removeEventListener('click',demoFunc,false)	demo.addEventListener("click",function(e){ var event=e\|\|window.event console.log(123) event.preventDefault() },false)
	demo.detachEvent('onclick',demofunc)	demo.attachEvent("onclick",function(e){ var event=e\|\|window.event console.log(123) event.returnValue=false })

JS精准定位参数：https://blog.csdn.net/XIAOZHUXMEN/article/details/52050613

深入理解scroll：http://www.cnblogs.com/xiaohuochai/p/5831640.html

闭包

嵌套的内部函数可以引用外部函数的参数和变量

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
}

var myFunc = makeFunc();
myFunc();

function createIncrementor(start) {
  return function () {
    return start++;
  };
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7

var aaa =(function(){
var a = 1;
return function(){ 
a++;
alert(a);
}
})();

aaa(); //2
aaa(); //3

我们想在页面上添加一些可以调整字号的按钮：

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

这三个函数gLogNumber, gIncreaseNumber, gSetNumber 共享访问同一个闭包，即setupSomeGlobals（）的局部变量。
特别注意：当第二次调用setupSomeGlobals（）时，一个新的闭包（stack-frame堆栈框架）就被创建了。原来的 gLogNumber, gIncreaseNumber, gSetNumber被新的匿名函数给重写。在JavaScript中，只要你在一个函数内部声明了另一个函数，只要外部函数被调用，那么内部函数就会被重新创建。

/*-----Example2-----*/
    var gLogNumber, gIncreaseNumber, gSetNumber;
    function setupSomeGlobals() {
        // Local variable that ends up within closure
        var num = 42;
        // Store some references to functions as global variables
        gLogNumber = function() { 
            console.log(num); 
        }
        gIncreaseNumber = function() { 
            num++; 
        }
        gSetNumber = function(x) { 
            num = x; 
        }
    }

    setupSomeGlobals();
    gIncreaseNumber();
    gLogNumber(); // 43
    gSetNumber(5);
    gLogNumber(); // 5

    var oldLog = gLogNumber;
    setupSomeGlobals();
    gLogNumber(); // 42
    oldLog() // 5

用闭包模拟私有方法-封装：

当在一个函数里声明了多个函数，可以通过json的格式返回，然后我们就可以在外面这样调用，这些函数就成了函数aaa的私有成员。

创建了一个词法环境，为三个函数所共享：Counter.increment，Counter.decrement 和 Counter.value。该共享环境创建于一个立即执行的匿名函数体内。这个环境中包含两个私有项：名为 privateCounter 的变量和名为 changeBy 的函数。这两项都无法在这个匿名函数外部直接访问。必须通过匿名函数返回的三个公共函数访问。

var Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }   
})();

console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }  
};

var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */
/* 每个闭包都是引用自己词法作用域内的变量 privateCounter 。
每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。
然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。 */

循环闭包：

普通的for循环：

function box(){
    var arr = [];
    for(var i=0;i<5;i++){
        arr[i] = i;        
    }
    return arr;
}
alert(box())   //正常情况不需要闭包，就可以达到预期效果，输出结果为一个数组0,1,2,3,4

有时我们需要在for循环里面添加一个匿名函数来实现更多功能，看下面代码（2种写法）：

window.onload = function(){ 
　　var aLi = document.getElementsByTagName('li');

　　for(var i=0;i<aLi.length;i++){ 
　　　　aLi[i].onclick = (function(i){ 
　　　　　　return function(){
　　　　　　alert(i);
　　　　　　}
　　　　})(i);         　　}

}
/*首先将一个函数表达式的调用赋给了点击事件。当事件后面等于的不是函数名，而直接是调用的话，那不点击，函数也已经执行了，
所以在循环的时候，i已经作为参数，传进了函数表达式，
而这个函数表达式的返回值又是一个函数，函数嵌套，闭包关系，这个函数可以访问外面函数传进来的每个i。*/

window.onload = function(){ 
　　var aLi = document.getElementsByTagName('li');
　　for(var i=0;i<aLi.length;i++){ 
　　　　(function(i){ 
　　　　　　aLi[i].onclick = function(){ 
　　　　　　　　alert(i);
　　　　　　}
　　　　})(i);
　　}

}
/*在点击事件的函数的外面再加上一个函数，就形成了闭包，
然后每循环一次，通过函数表达式的形式，将i传进去，
而通过闭包特性可以知道，事件绑定的函数就可以访问外面函数里面的参数i。*/

解决内存泄漏方法：

function handler(){
    var ele = document.getElementById("ele");
    var id = ele.id;
    ele.onclick = function(){
        alert(id);
    }
    ele = null;
}

优雅降级渐进增强
浏览器内核
处理flex布局兼容性
实现继承什么是面向对象
http协议状态码
vue路由传值方式组件间如何传值生命周期
从输入网址到页面浏览器发生了什么三次握手四次挥手
MVVM是什么
vue插槽
跨越问题浏览器为了安全实施的同源策略导致的
CSS3新增属性 html5新增属性
get从服务器获取资源 post重点向服务器发送数据
移动端适配：媒体查询响应式布局; CSS hack ；浏览器私有属性
性能优化：减少http请求减少DNS查询使用CDN 避免重定向使用外部js和css 等
link 和 @import
cookie sessionStorage localStorage
new操作符
前端存在哪些安全问题
原生实现AJAX
vue优点 node.js优点 jQuery优点
axios