摘要：寫一個(gè)事件偵聽器函數(shù)相當(dāng)于封裝一個(gè)兼容主流瀏覽器和根據(jù)情況分別使用方式來添加事件根據(jù)情況分別獲取或者中的事件對(duì)象，事件目標(biāo)，阻止事件的默認(rèn)行為根據(jù)情況分別使用方式來刪除事件根據(jù)情況分別取消或者中事件冒泡如何書寫高性能代碼怎樣用實(shí)現(xiàn)千位分隔符

（相當(dāng)于封裝一個(gè)util兼容主流瀏覽器和IE）

var EventUtil = {
    //根據(jù)情況分別使用dom2 || IE || dom0方式 來添加事件
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        } else if(element.attachEvent) {
            element.attachEvent("on" + type,handler);
        } else {
            element["on" + type] = handler;
        }
    },

    //根據(jù)情況分別獲取DOM或者IE中的事件對(duì)象，事件目標(biāo)，阻止事件的默認(rèn)行為
    getEvent: function(event) {
        return event ? event: window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }

    //根據(jù)情況分別使用dom2 || IE || dom0方式 來刪除事件
    removeHandler: function(element,type,handler){
        if(element.removeHandler) {
            element.removeEventListener(type,handler,false);
        } else if(element.detachEvent) {
            element.detachEvent("on" + type,handler);
        } else {
            element["on" + type] = null;
        }
    }

    //根據(jù)情況分別取消DOM或者IE中事件冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}

var btn = document.getElementById("myBtn"),
    handler = function () {
        alert("Clicked");
    };

EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);

http://developer.51cto.com/ar...

function format (num) {  
    var reg=/d{1,3}(?=(d{3})+$)/g;   
    return (num + "").replace(reg, "$&,");  
}
``

    function format(num){  
     num=num+"";//數(shù)字轉(zhuǎn)字符串  
      var str="";//字符串累加  
      for(var i=num.length- 1,j=1;i>=0;i--,j++){  
          if(j%3==0 && i!=0){//每隔三位加逗號(hào)，過濾正好在第一個(gè)數(shù)字的情況  
              str+=num[i]+",";//加千分位逗號(hào)  
              continue;  
          }  
          str+=num[i];//倒著累加數(shù)字  
      }  
      return str.split("").reverse().join("");//字符串=>數(shù)組=>反轉(zhuǎn)=>字符串  
    }  
發(fā)現(xiàn)一個(gè)更好的方法補(bǔ)充一下

let arr = [];
function three(num){
  if(num<1){
    return num
  }
  arr.unshift(parseInt(num%1000))
  three(num/1000);
}
three(1234567)
console.log(arr.join(","))

function getByte(str){
    var len = str.length,
        bytes = len,
        i = 0;
    for(; i 255) bytes++;
    }
    return bytes;
}

    function clone(obj) {
            if (!obj && typeof obj !== "object") {
                return;
            }
            var copy = (obj instanceof Array)?[]:{};
            for(var o in obj) {
                if (typeof obj[o] === "object") {
                    copy[o] = clone(obj[o]);
                } else {
                    copy[o] = obj[o];
                }
            }
            return copy;
        }
        var obj = {
            name: "zhangsan",
            age: 33,
            child:{
                name:"zhangxiao",
                age:9,
                eat:[1,{el:2}]
            },
            hobby:undefined,
            eat:[1,2,3,4]
        }
        var a=clone(obj)
        obj.child.name = "lis";
        console.log(a);

    function say() {
        var num = 888;
        var sayAlert = function() { alert(num); }
        num++;
        return sayAlert;
    }
    var sayAlert = say();
    sayAlert();//889

剛調(diào)用say()函數(shù)的時(shí)候sayAlert不會(huì)執(zhí)行，因?yàn)闆]有啊sayAlert()這樣調(diào)用

if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(fn){
        for ( var i = 0; i < this.length; i++ ) {
            fn( this[i], i, this );
        }
    };
}

function getStyle(obj, attr){
      if(obj.currentStyle) {
        obj.currentStyle[attr]
      } else {
        getComputedStyle(obj, null)[attr];
      }
}

/*

  apply call bind
  this 千變?nèi)f化
  都是改變this的智享
  前兩者：相當(dāng)于返回是立即執(zhí)行函數(shù) fn.call(obj) 相當(dāng)于obj的prototype上面有一個(gè)        fn()函數(shù)  obj就能順著原型鏈網(wǎng)上找 this指向obj
  bind:返回的是一個(gè)函數(shù)不會(huì)立即執(zhí)行
*/
var a = 1;
var obj = {
  a:2,
  fn:function(){
    console.log(this.a)
  }
}
obj.fn.call(obj)  //2
var fn2=obj.fn.bind(obj)
var fn3 = obj.fn.bind()
console.log(fn2)  //fn(){console.log(this.a)}
fn2()            //2
fn3()            //1

let aa = document.getElementById("aa")
for(var i=0;i<5;i++){
  (function(i){
    let el_a = document.createElement("a");
    el_a.innerHTML = i+"
"
    el_a.addEventListener("click",function(e){
      e.preventDefault()
      console.log(i)
    },)
    aa.appendChild(el_a)
  })(i)
}

也可以把for的var改成let

// 閉包  1.能調(diào)用其他函數(shù)內(nèi)部變量（給變量添加了緩存 但要注意在適當(dāng)?shù)臅r(shí)候清除緩存）  2.匿名執(zhí)行函數(shù)（防止全局變量污染）
function f1(){
      var a = 1;
      return function(){
        console.log(a)
      }
    }
    let a = f1();
    function f2(f){
      var a =2;
      f()
    }
    f2(a)

/寫回調(diào)函數(shù)：通常axios請(qǐng)求的函數(shù)是封裝起來的（便于維護(hù)） 發(fā)起請(qǐng)求的頁面是分開的/

let params = {
  a:1,
  b:1,
  callback:function({datas}){
    console.log("hhhh")
    console.log(datas)
  }
}
apiAxios(params)

// 封裝到一個(gè)js里面
function apiAxios(params){
  // axios.get("url").then((resp)=>{
    let datas = [1,2,3,4]
    params.callback({datas:datas})
  // })
}

用戶輸入url到頁面顯示這個(gè)過程中發(fā)生了什么呢？
1、輸入url發(fā)送請(qǐng)求
2、瀏覽器拿到服務(wù)器返回的HTML
3、瀏覽器開始解析HTML生產(chǎn)DOM樹、css生產(chǎn)css樹，兩個(gè)樹合在一起生成渲染數(shù)
4、瀏覽器根據(jù)渲染樹來繪制頁面
注意：重繪和重排兩個(gè)關(guān)鍵字
1）重繪：dom節(jié)點(diǎn)不發(fā)生位置的變化，例如改變background，不影響周邊的節(jié)點(diǎn)
2）重排：dom發(fā)生節(jié)點(diǎn)變化，涉及到的周邊節(jié)點(diǎn)也會(huì)發(fā)生重排，因此消耗性能較大，例如操作節(jié)點(diǎn)，修改樣式的寬高，偽類的操作等
3）js的執(zhí)行會(huì)影響dom樹和css樹的渲染
4）瀏覽器遇到這個(gè)標(biāo)簽 不會(huì)停下來，而是繼續(xù)下來，等圖片請(qǐng)求下來再返回去重排
總結(jié)：一些動(dòng)畫類的操作節(jié)點(diǎn)盡量使用absolute或者fixed，避免影響周邊節(jié)點(diǎn)

最近刷博客看到的，window.perforance.timing這個(gè)方法下面有很多的屬性可以獲取

DNS查詢耗時(shí) = domainLookupEnd - domainLookupStart
TCP鏈接耗時(shí) = connectEnd - connectStart
request請(qǐng)求耗時(shí) = responseEnd - responseStart
解析dom樹耗時(shí) = domComplete - domInteractive
白屏?xí)r間 = domloadng - fetchStart
domready時(shí)間 = domContentLoadedEventEnd - fetchStart
onload時(shí)間 = loadEventEnd - fetchStart