瀏覽器主要也就是IE有點(diǎn)獨(dú)特，所以把IE重點(diǎn)區(qū)分開(kāi)

下面是積累下來(lái)的一些兼容函數(shù)，可以當(dāng)做模板用

添加多個(gè)onload事件

處理ActiveXObject/XMLHttpRequest問(wèn)題

請(qǐng)求對(duì)象的屬性和方法設(shè)置

發(fā)送表單數(shù)據(jù)

跨瀏覽器的CORS

跨瀏覽器事件處理程序

處理target/srcelemnt問(wèn)題，代替this

實(shí)現(xiàn)insertAfter

給element加上類(lèi)名

判斷是不是數(shù)組

IE10之前不支持docunment.getElementByClassName

獲取css樣式

手寫(xiě)動(dòng)畫(huà)

取得窗口左邊和上邊的位置

取得頁(yè)面視口大小

檢測(cè)插件方法

獲取元素

檢查對(duì)象的某個(gè)特性是否存在

對(duì)象轉(zhuǎn)換成數(shù)組

返回指定的屬性

ele是否存在指定屬性

ele是否符合選擇器selector

獲取內(nèi)文本

獲取鼠標(biāo)事件的父元素

探測(cè)按的是鼠標(biāo)的哪個(gè)鍵

鼠標(biāo)滾動(dòng)事件

提取選中的文本

設(shè)置文本選中

bind方法對(duì)老版本的瀏覽器不起作用

包裝cookie

包裝子cookie

indexedDB

手寫(xiě)typeof

深度克隆

組合使用構(gòu)造函數(shù)模式和原型模式創(chuàng)建對(duì)象

組合繼承

觀察者模式

分享一個(gè)題目

function addLoadEvent(func){
   var oldonload=window.onload;
   if(typeof window.onload!= "function"){
       window.onload=func;
   }
   else{
       window.onload=function(){
           oldonload();
           func();
       }
   }

}

//第一種寫(xiě)法，《js高級(jí)程序設(shè)計(jì)》的寫(xiě)法  惰性載入技巧
function createXHR(){
   if(typeof XMLHttpRequest!="undefined"){//XMLHttpRequest
       createXHR=function(){
           return new XMLHttpRequest();
       };
   }else if(typeof ActiveXObject!="undefined"){//IE ActiveXObject
       createXHR=function(){
           if(typeof arguments.callee.activeXString!="string"){
               var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],//IE
                   i,len;
                for(i=0,len=versions.length;i
請(qǐng)求對(duì)象的屬性和方法設(shè)置
var xhr=createXHR();
xhr.onreadystatechange=function(){//firfox引入onlaod，readyState==4時(shí)觸發(fā),代替onreadystatechange
    if(xhr.readyState==4){
        try{
            if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
                alert(xhr.responseText);
            }else {
                alert("unsuccessful");
            }
        }catch(ex){}
    }
}
xhr.onload=function(){
    if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
                alert(xhr.responseText);
            }else {
                alert("unsuccessful");
            }
}
xhr.onprogress=function(event){
    if(event.lengthComputable){//進(jìn)度信息是否可用
        console.log("Received"+event.position+"of"+event.totalSize);
    }
}
xhr.onerror=function(){
    alert("error");
}
xhr.timeout=1000;
xhr.ontimeout=function(){
    alert("timeout");
}
xhr.open("get","example.php",true);
xhr.overrideMimeType("text/xml");
xhr.send(null);//GET
發(fā)送表單數(shù)據(jù)
var form=document.getElementById("info");
xhr.send(serialize(form));//第一種寫(xiě)法
xhr.send(new FormData(form));//第二種寫(xiě)法
跨瀏覽器的CORS
function createCORSRequest(method,url){
    var xhr=new XMLHttpRequest();
    if("withCredentials" in xhr){
        xhr.open(method,url,true);
    }else if(typeof XDomainRequest !="undefined"){
        xhr=new XDomainRequest();
        xhr.open(method,url);
    }else {
        xhr=null;
    }
    return xhr;
}
var request=createCORSRequest("get","http://www.somewhere");
if(request){
    request.onload=function(){};
    request.send();
}
跨瀏覽器事件處理程序
var eventUtil={
   // 頁(yè)面加載完成后
   readyEvent : function(fn) {
       if (fn==null) {
           fn=document;
       }
       var oldonload = window.onload;
       if (typeof window.onload != "function") {
           window.onload = fn;
       } else {
           window.onload = function() {
               oldonload();
               fn();
           };
       }
   },

   addEventHandler: function (obj, eventName, handler) {
       if (document.attachEvent) {//IE
           obj.attachEvent("on" + eventName, handler);
       } else if (document.addEventListener) {//DOM2級(jí)
           obj.addEventListener(eventName, handler, false);//false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行
       }
       else{//DOM0級(jí)
           obj["on"+eventName]=handler;
       }
   },

   removeEventHandler:function(obj, eventName, handler){
       if (document.attachEvent) {//IE
           obj.detachEvent("on" + eventName, handler);
       } else if (document.addEventListener) {//DOM2級(jí)
           obj.removeEventListener(eventName, handler, false);
       }
       else{//DOM0級(jí)
           obj["on"+eventName]=null;
       }
   },
  //獲取event對(duì)象的引用，取到事件的所有信息，確保隨時(shí)能使用event；
   getEvent: function (e) {
       var ev = e || window.event;
       if (!ev) {
           var c = this.getEvent.caller;
           while (c) {
               ev = c.arguments[0];
               if (ev && Event == ev.constructor) {
                   break;
               }
               c = c.caller;
           }
       }
       return ev;
   },
   //事件類(lèi)型
   getType: function (e) {
       return e.type;

   },
   //調(diào)用事件的元素
   getElement: function (e) {
       return e.target|| e.srcElement;
   },
   //阻止默認(rèn)事件
   preventDefault: function (e) {
       e= this.getEvent(e);
       if(e.preventDefault){
           e.preventDefault();
       }
       else {
           return e.returnValue=false;//IE
       }
   },
   //阻止冒泡
   stopPropagation:function(e) {
     if(e.stopPropagation){
         e.stopPropagation();
     }
       else {
         e.cancelBubble=true;//IE
     }

   },
   //鍵盤(pán)事件鍵盤(pán)的編號(hào)
   getCharCode:function (e){
       if(typeof e.charCode=="number")return e.charCode;
       else return e.keyCode;
   },
   //獲取剪貼板的文本
   getClipbordText:function(e){
       var clipboardData=(e.clipboardData||window.clipboardData);
       return clipboardData.getData("text");
   },
   //設(shè)置剪貼板文本
   setClipboardText:function(e,value){
       if(e.clipboardData){
           return e.clipboardData.setData("text/plain",value);
       }else if(window.clipboardData){
           return window.clipboardData.setData("text",value);
       }
   },

}
處理target/srcelemnt問(wèn)題，代替this
function getActivatedObject(e) {
   var obj;
   if (!e) {
       // early version of IE
       obj = window.event.srcElement;
   } else if (e.srcElement) {
       // IE 7 or later
       obj = e.srcElement;
   } else {
       // DOM Level 2 browser
       obj = e.target;
   }
   return obj;
}
實(shí)現(xiàn)insertAfter
/**
* 把newElement插在targetElement后面 ,js的API只有insertBefore，沒(méi)有insertAfter
*/
function insertAfter(newElement,targetElement) {
   var parent = targetElement.parentNode;
   if (parent.lastChild == targetElement) {
       parent.appendChild(newElement);
   } else {
       parent.insertBefore(newElement,targetElement.nextSibling);
   }
}
給element加上類(lèi)名
function addClass(element,value) {
   if (!element.className) {
       element.className = value;
   } else {
       newClassName = element.className;
       newClassName+= " ";
       newClassName+= value;
       element.className = newClassName;
   }
}
判斷是不是數(shù)組
function isArray(arg) {
   //return Object.prototype.toString.call(arr)=="[Object Array]";這種方法也可以
   if (typeof arg == "object") {
       //所有數(shù)組都有一個(gè)包含單詞"arry"的constructor,最后的i表示不區(qū)分大小寫(xiě)
       var criteria = arg.constructor.toString().match(/array/i);
       return (criteria != null);
   }
   return false;
}
IE10之前不支持docunment.getElementByClassName
function getByClass(clsName,parent){
   if(docunment.getElementByClassName) return docunment.getElementByClassName(clsName);
   //IE10之前
   var oParent=parent?document.getElementById(parent):document,
       eles=[],
       elements=oParent.getElementsByTagName("*");

   for(var i=0,l=elements.length;i
獲取css樣式
function getStyle(obj,attr){
   if(obj.currentStyle) {//IE 瀏覽器
       return obj.currentStyle[attr];
   }else{//Firefox瀏覽器
       return getComputedStyle(obj,false)[attr];
   }
}

手寫(xiě)動(dòng)畫(huà)
//動(dòng)畫(huà) startMove(oLi,{width:400,height:200,opacity:100})
function startMove(obj,json,fn){
   clearInterval(obj.timer);
   obj.timer=setInterval(function () {
       for(var attr in json){
           var cur=0;
           if(attr=="opacity"){
               cur=Math.round(parseFloat(getStyle(obj,attr))*100);
           }
           else {
               cur=parseInt(getStyle(obj,attr));
           }
           var speed=(json[attr]-cur)/8;
           speed=speed>0?Math.ceil(speed):Math.floor(speed);
           var flag=true;
           if(cur!=json[attr]){//使得所有屬性做完運(yùn)動(dòng)才結(jié)束
               flag=false;
           }
           if(attr=="opacity"){
               obj.style.filter="alpha(opacity:"+(cur+speec)+")";
               obj.style.opacity=(cur+speed)/100;
           }
           else{
               obj.style[attr]=(cur+speed)+"px";
           }
       }
       if(flag){
           clearInterval(obj.timer);
           if(fn){
               fn();
           }
       }
   })
}
取得窗口左邊和上邊的位置
var leftPos=(typeof window.screenLeft =="number")?window.screenLeft:window.screenX;
取得頁(yè)面視口大小
var pageWidth=window.innerWidth,
   pageHeight=window.innerHeight;
   if(typeof pageHeight!="number"){
       if(document.compatMode=="CSS1Compat"){//標(biāo)準(zhǔn)模式
           pageHeight=window.documentElement.clientHeight;
           pageWidth=window.documentElement.clientWidth;
       }
       else {//BackCompat
           pageHeight=window.body.clientHeight;
           pageWidth=window.body.clientWidth;
       }
   }
檢測(cè)插件方法
/**
*
* 檢測(cè)插件方法一，IE下無(wú)效
*/
function hasPlugin(name){
   name=name.toLowerCase();
   for(var i=0;i
獲取元素
function getElement(id){
   if(document.getElementById){
       return document.getElementById(id);
   }else if(document.all){//IE5前
       return document.all[id];
   }else {
       throw new Error("no way to retrieve element!");
   }
}
檢查對(duì)象的某個(gè)特性是否存在
function isHostMethod(object,property){
   var t =typeof object[property];
   return t=="function"||
          (!!(t=="object")&&object[property])||
          t=="unknown";//不懂
}
對(duì)象轉(zhuǎn)換成數(shù)組
function convertToArray(nodes){
   var array=null;
   try{
       array=Array.propotype.slice.call(nodes,0);//IE8前無(wú)效
   }catch(ex){
       for(var i=0,len=nodes.length;i
返回指定的屬性
/**
* 
* 返回指定的屬性 IE ele.attribute[]
* Element.getAttribute()
*/
function outputAttribute(ele){
   var pairs=new Array(),
       attrname,attrvalue,u,len;
   for(i=0,len=ele.attribute.length;i
ele是否存在指定屬性
/**
* 
* ele是否存在指定屬性 attr
*/
function hasattribute(ele,attr){
   if(ele.hasAttribute){
       return ele.hasAttribute(attr);
   }else {//IE
       return ele.attributes[attr].specified;
   }
}
ele是否符合選擇器selector
/**
* ele是否符合選擇器selector
*/
function matchesSelector(ele,selector){
   if(ele.matchesSelector){
       return ele.matchesSelector(selector);
   }else if(ele.msmatchesSelector){
       return ele.msmatchesSelector(selector);
   }else if(ele.mozmatchesSelector){
       return ele.mozmatchesSelector(selector);
   }else if(ele.webkitmatchesSelector){
       return ele.webkitmatchesSelector(selector);
   }else{
       throw new Error("not support");
   }
}
獲取內(nèi)文本
//innerText/textContent
function getInnerText(ele){
   return (typeof ele.innerText=="string")?
   ele.innerText:ele.textContent;
}
獲取鼠標(biāo)事件的父元素
   function getRelatedTarget(e){
       if(e.relatedTarget) return e.relatedTarget;
       else if(e.fromElement) return e.fromElement;//mouseover
       else if(e.toElement) return e.toElement;//mouseout
       else return null;
   }
探測(cè)按的是鼠標(biāo)的哪個(gè)鍵
function getButton(e){
       if(document.implementation.hasFeature("MouseEvents","2.0")){
           return e.button;
       }else {
           switch(e.button){
               case 0 :
               case 1:
               case 3:
               case 5:
               case 7: return 0;
               case 2:
               case 6:return 2;
               case 4:return 1;
           }
       }
   }
鼠標(biāo)滾動(dòng)事件
//鼠標(biāo)滾動(dòng)，正數(shù)表示向上滾動(dòng)
function getWheelDelta(e){
       if(e.wheelData){
           return (client.engine.opera&&client.engine.opera<9.5)?
       -e.wheelData:e.wheelData;
       }else {
           return -e.detail*40;//firefox
       }
       
}

提取選中的文本
function getSelectedText(textbox){
   if(typeof selectionStart=="number"){
       return textbox.value.subString(textbox.selectionStart,textbox.selectionEnd);
   }else if(document.selection){//IE8之前沒(méi)有selectionStart，selectionEnd屬性
       return document.selection.createRange().text;
   }
}
設(shè)置文本選中
function selectText(textbox,startIndex,stopIndex){
    if(textbox.setSelectionRange){
        textbox.setSelectionRange(startIndex,stopIndex);
    }else if(textbox.createTextRange){//IE
        var range=textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character",0);
        range.moveEnd("character",stopIndex-startIndex);
        range.select();
    }
}
bind方法對(duì)老版本的瀏覽器不起作用
Function.prototype.bind = Function.prototype.bind || function(context){
     var self = this;

     return function(){
       return self.apply(context, arguments);
     };
   }

包裝cookie

//cookie
var cookieUtil={
   // 創(chuàng)建cookie
   setcookie:function (name, value, expires, path, domain, secure) {
   var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
   if (expires instanceof Date) {
       cookieText += "; expires=" + expires.toGMTString();
   }
   if (path) {
       cookieText += "; path=" + path;
   }
   if (domain) {
       cookieText += "; domain=" + domain;
   }
   if (secure) {
       cookieText += "; secure";
   }
   document.cookie = cookieText;
},
   // 獲取cookie
   getcookie:function (name) {
   var cookieName = encodeURIComponent(name) + "=";
   var cookieStart = document.cookie.indexOf(cookieName);
   var cookieValue = null;
   if (cookieStart > -1) {
       var cookieEnd = document.cookie.indexOf(";", cookieStart);
       if (cookieEnd == -1) {
           cookieEnd = document.cookie.length;
       }
       cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
   }
   return cookieValue;
},
  // 刪除cookie
   unsetcookie:function (name,path,domain,secure) {
   this.setcookie(name,"",new Date(0),path,domain,secure);
}
}
包裝子cookie
//子cookie
var subcookieUtil={
   get:function(name,subname){
       var subcookie=getAll(name);
       if(subcookie){
           return subcookie[subname];
       }else {
           return null;
       }
   },
   getAll:function(name){
       var cookieName = encodeURIComponent(name) + "=";
       var cookieStart = document.cookie.indexOf(cookieName);
       var cookieValue = null;
       var subcookie,result={};
       var len,i,parts;
       if (cookieStart > -1) {
           var cookieEnd = document.cookie.indexOf(";", cookieStart);
           if (cookieEnd == -1) {
           cookieEnd = document.cookie.length;
          }
       cookieValue = document.cookie.substring(cookieStart + cookieName.length, cookieEnd);
       if(cookieValue.length>0){
           subcookie=cookieValue.split("&");
           len=subcookie.length;
           for(i=0;i0){
           cookieText+=subcookiesParts.join("&");
           if (expires instanceof Date) {
               cookieText += "; expires=" + expires.toGMTString();
           }
           if (path) {
               cookieText += "; expires=" + expires;
            }
           if (domain) {
               cookieText += "; domain=" + domain;
           }
           if (secure) {
               cookieText += "; secure";
           }
       }
   
       document.cookie = cookieText;
   },
   unset:function(name,subname,path,domain,secure){
         var subcookies=this.getAll(name);
       if(subcookies){
             delete subcookies[subname];
             this.setAll(name,subcookies,null,path,domain,secure);
         }
       },
   unsetAll:function(name,path,domain,secure){
         this.setAll(name,null,new Date(0),path,domain,secure);
   }
}
indexedDB
var indexedDB=window.indexedDB||window.mozIndexedDB||window.msIndexedDB||window.webkitIndexedDB;
var idbRequest=indexedDB.open("vvv");
idbRequest.onsuccess=function(event){
   database=event.target.result;
}
idbRequest.onerror=function(event){
   alert(event.target.errorCode);
}
手寫(xiě)typeof
function type(obj) {
   var toString = Object.prototype.toString;
   var map = {
       "[object Boolean]"  : "boolean", 
       "[object Number]"   : "number", 
       "[object String]"   : "string", 
       "[object Function]" : "function", 
       "[object Array]"    : "array", 
       "[object Date]"     : "date", 
       "[object RegExp]"   : "regExp", 
       "[object Undefined]": "undefined",
       "[object Null]"     : "null", 
       "[object Object]"   : "object"
   };
   if(obj instanceof Element) {//因?yàn)閷?duì)不同標(biāo)簽，toString會(huì)返回對(duì)應(yīng)不同標(biāo)簽的構(gòu)造函數(shù)
       return "element";
   }
   return map[toString.call(obj)];
}
深度克隆
/**
* 
* 深度克隆方法一，用的是instanceof
*/
function clone(Obj) {
   var buf;   
   if (Obj instanceof Array) {
       buf = [];  // 創(chuàng)建一個(gè)空的數(shù)組
       var i = Obj.length;
       while (i--) {
           buf[i] = clone(Obj[i]);
       }
       return buf;
   } else if (Obj instanceof Object){
       buf = {};  // 創(chuàng)建一個(gè)空對(duì)象
       for (var k in Obj) {  // 為這個(gè)對(duì)象添加新的屬性
           buf[k] = clone(Obj[k]);
       }
       return buf;
   }else{
       return Obj;
   }
}

/**
* 
* 深度拷貝方法二，用的是 toString
*/
function deepClone(data) {
   var t = type(data), o, i, ni;
   
   if(t === "array") {
       o = [];
   }else if( t === "object") {
       o = {};
   }else {
       return data;
   }
   
   if(t === "array") {
       for (i = 0, ni = data.length; i < ni; i++) {
           o.push(deepClone(data[i]));
       }
       return o;
   }else if( t === "object") {
       for( i in data) {
           o[i] = deepClone(data[i]);
       }
       return o;
   }
}

//通過(guò)JSON.stringify一下，然后再JSON.parse一下，就能實(shí)現(xiàn)深拷貝。但是數(shù)據(jù)類(lèi)型只支持基本數(shù)值類(lèi)型。
var obj = {
   a: "a",    
   b: function(){console.log("b")}
}
JSON.stringify(obj);// "{"a":"a"}"

組合使用構(gòu)造函數(shù)模式和原型模式創(chuàng)建對(duì)象
//組合使用構(gòu)造函數(shù)模式和原型模式創(chuàng)建對(duì)象
function Person(name,age){
   this.name=name;
   this.age=age;
   this.friends=["may","john"];
}
Person.prototype={
   constructor:Person,//字面量形式的原型默認(rèn)構(gòu)造函數(shù)是object,所以在這里要指定constructor
   sayName=function(){
       alert(this.name);
   }
}
組合繼承
//組合繼承
funcion super(name){
   this.name=name;
   this.color=["red","blue"];
   
}
Super.prototype.sayname=function(){
   alert(this.name);
}
function Sub(age){
   Super.call(this);
   this.age=age;
}
Sub.prototype=new Super();//
Sub.prototype.constructor=Sub;//這個(gè)很重要??！
Sub.prototype.sayage=function(){
   alert(this.age);
}

觀察者模式
//觀察者模式
function EventTarget(){     
   this.handlers = {}; 
} 
EventTarget.prototype = {     
   constructor: EventTarget,
   addHandler: function(type, handler){
        if (typeof this.handlers[type] == "undefined"){
             this.handlers[type] = [];
        }
        this.handlers[type].push(handler);
    }, 
   fire: function(event){//執(zhí)行
        if (!event.target){
            event.target = this;
        }
        if (this.handlers[event.type] instanceof Array){
            var handlers = this.handlers[event.type];
            for (var i=0, len=handlers.length; i < len; i++){
                handlers[i](event); 
           }
        }
    },
    removeHandler: function(type, handler){ 
       if (this.handlers[type] instanceof Array){ 
           var handlers = this.handlers[type]; 
           for (var i=0, len=handlers.length; i < len; i++){ 
               if (handlers[i] === handler){ 
                   break;
                }
            }
            handlers.splice(i, 1); 
         }
     }
};
分享一個(gè)題目
//[附加題] 請(qǐng)實(shí)現(xiàn)下面的自定義事件 Event 對(duì)象的接口，功能見(jiàn)注釋(測(cè)試1)
//該 Event 對(duì)象的接口需要能被其他對(duì)象拓展復(fù)用(測(cè)試2)
//測(cè)試1
Event.on("test", function (result) {
   console.log(result);
});
Event.on("test", function () {
   console.log("test");
});
Event.emit("test", "hello world"); // 輸出 "hello world" 和 "test"
// 測(cè)試2
var person1 = {};
var person2 = {};
Object.assign(person1, Event);
Object.assign(person2, Event);
person1.on("call1", function () {
   console.log("person1");
});
person2.on("call2", function () {
   console.log("person2");
});
person1.emit("call1"); //輸出 "person1"
person1.emit("call2"); // 沒(méi)有輸出
person2.emit("call1"); // 沒(méi)有輸出
person2.emit("call2"); // 輸出 "person2"
var Event = {
   // 通過(guò)on接口監(jiān)聽(tīng)事件eventName
   // 如果事件eventName被觸發(fā)，則執(zhí)行callback回調(diào)函數(shù)
   on: function (eventName, callback) {
       //你的代碼
       if(!this.handles){
           //Object.assign(target, source);
//這個(gè)是ES6的新對(duì)象方法，用于對(duì)象的合并，將源對(duì)象（source）的所有可枚舉屬性，復(fù)制到目標(biāo)對(duì)象（target）。
           Object.defineProperty(this, "handles", {
               value: {},
               enumerable: false,//關(guān)鍵！
               configurable: true,
               writable: true
           })
       }
      
      if(!this.handles[eventName]){
           this.handles[eventName]=[];
      }
      this.handles[eventName].push(callback);
   },
   // 觸發(fā)事件 eventName
   emit: function (eventName) {
       //你的代碼
      if(this.handles[arguments[0]]){
          for(var i=0;i 50 && nHeight > 50) {
           aResult.push(oNode);
       }
   }
   var aChildNodes = oNode.childNodes;
   if (aChildNodes.length > 0) {
       for (var i = 0, l = aChildNodes.length; i < l; i++) {
           var oTmp = aChildNodes[i];
           aResult = aResult.concat(traverse(oTmp));
       }
   }
   return aResult;
}