瀏覽器主要也就是IE有點獨特，所以把IE重點區(qū)分開

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

添加多個onload事件

處理ActiveXObject/XMLHttpRequest問題

請求對象的屬性和方法設置

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

跨瀏覽器的CORS

跨瀏覽器事件處理程序

處理target/srcelemnt問題，代替this

實現(xiàn)insertAfter

給element加上類名

判斷是不是數(shù)組

IE10之前不支持docunment.getElementByClassName

獲取css樣式

手寫動畫

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

取得頁面視口大小

檢測插件方法

獲取元素

檢查對象的某個特性是否存在

對象轉換成數(shù)組

返回指定的屬性

ele是否存在指定屬性

ele是否符合選擇器selector

獲取內(nèi)文本

獲取鼠標事件的父元素

探測按的是鼠標的哪個鍵

鼠標滾動事件

提取選中的文本

設置文本選中

bind方法對老版本的瀏覽器不起作用

包裝cookie

包裝子cookie

indexedDB

手寫typeof

深度克隆

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

組合繼承

觀察者模式

分享一個題目

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

}

//第一種寫法，《js高級程序設計》的寫法  惰性載入技巧
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
請求對象的屬性和方法設置
var xhr=createXHR();
xhr.onreadystatechange=function(){//firfox引入onlaod，readyState==4時觸發(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){//進度信息是否可用
        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));//第一種寫法
xhr.send(new FormData(form));//第二種寫法
跨瀏覽器的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={
   // 頁面加載完成后
   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級
           obj.addEventListener(eventName, handler, false);//false- 默認。事件句柄在冒泡階段執(zhí)行
       }
       else{//DOM0級
           obj["on"+eventName]=handler;
       }
   },

   removeEventHandler:function(obj, eventName, handler){
       if (document.attachEvent) {//IE
           obj.detachEvent("on" + eventName, handler);
       } else if (document.addEventListener) {//DOM2級
           obj.removeEventListener(eventName, handler, false);
       }
       else{//DOM0級
           obj["on"+eventName]=null;
       }
   },
  //獲取event對象的引用，取到事件的所有信息，確保隨時能使用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;
   },
   //事件類型
   getType: function (e) {
       return e.type;

   },
   //調用事件的元素
   getElement: function (e) {
       return e.target|| e.srcElement;
   },
   //阻止默認事件
   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
     }

   },
   //鍵盤事件鍵盤的編號
   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");
   },
   //設置剪貼板文本
   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問題，代替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;
}
實現(xiàn)insertAfter
/**
* 把newElement插在targetElement后面 ,js的API只有insertBefore，沒有insertAfter
*/
function insertAfter(newElement,targetElement) {
   var parent = targetElement.parentNode;
   if (parent.lastChild == targetElement) {
       parent.appendChild(newElement);
   } else {
       parent.insertBefore(newElement,targetElement.nextSibling);
   }
}
給element加上類名
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ù)組都有一個包含單詞"arry"的constructor,最后的i表示不區(qū)分大小寫
       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];
   }
}

手寫動畫
//動畫 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]){//使得所有屬性做完運動才結束
               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;
取得頁面視口大小
var pageWidth=window.innerWidth,
   pageHeight=window.innerHeight;
   if(typeof pageHeight!="number"){
       if(document.compatMode=="CSS1Compat"){//標準模式
           pageHeight=window.documentElement.clientHeight;
           pageWidth=window.documentElement.clientWidth;
       }
       else {//BackCompat
           pageHeight=window.body.clientHeight;
           pageWidth=window.body.clientWidth;
       }
   }
檢測插件方法
/**
*
* 檢測插件方法一，IE下無效
*/
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!");
   }
}
檢查對象的某個特性是否存在
function isHostMethod(object,property){
   var t =typeof object[property];
   return t=="function"||
          (!!(t=="object")&&object[property])||
          t=="unknown";//不懂
}
對象轉換成數(shù)組
function convertToArray(nodes){
   var array=null;
   try{
       array=Array.propotype.slice.call(nodes,0);//IE8前無效
   }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;
}
獲取鼠標事件的父元素
   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;
   }
探測按的是鼠標的哪個鍵
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;
           }
       }
   }
鼠標滾動事件
//鼠標滾動，正數(shù)表示向上滾動
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之前沒有selectionStart，selectionEnd屬性
       return document.selection.createRange().text;
   }
}
設置文本選中
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方法對老版本的瀏覽器不起作用
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);
}
手寫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) {//因為對不同標簽，toString會返回對應不同標簽的構造函數(shù)
       return "element";
   }
   return map[toString.call(obj)];
}
深度克隆
/**
* 
* 深度克隆方法一，用的是instanceof
*/
function clone(Obj) {
   var buf;   
   if (Obj instanceof Array) {
       buf = [];  // 創(chuàng)建一個空的數(shù)組
       var i = Obj.length;
       while (i--) {
           buf[i] = clone(Obj[i]);
       }
       return buf;
   } else if (Obj instanceof Object){
       buf = {};  // 創(chuàng)建一個空對象
       for (var k in Obj) {  // 為這個對象添加新的屬性
           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;
   }
}

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

組合使用構造函數(shù)模式和原型模式創(chuàng)建對象
//組合使用構造函數(shù)模式和原型模式創(chuàng)建對象
function Person(name,age){
   this.name=name;
   this.age=age;
   this.friends=["may","john"];
}
Person.prototype={
   constructor:Person,//字面量形式的原型默認構造函數(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;//這個很重要??！
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); 
         }
     }
};
分享一個題目
//[附加題] 請實現(xiàn)下面的自定義事件 Event 對象的接口，功能見注釋(測試1)
//該 Event 對象的接口需要能被其他對象拓展復用(測試2)
//測試1
Event.on("test", function (result) {
   console.log(result);
});
Event.on("test", function () {
   console.log("test");
});
Event.emit("test", "hello world"); // 輸出 "hello world" 和 "test"
// 測試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"); // 沒有輸出
person2.emit("call1"); // 沒有輸出
person2.emit("call2"); // 輸出 "person2"
var Event = {
   // 通過on接口監(jiān)聽事件eventName
   // 如果事件eventName被觸發(fā)，則執(zhí)行callback回調函數(shù)
   on: function (eventName, callback) {
       //你的代碼
       if(!this.handles){
           //Object.assign(target, source);
//這個是ES6的新對象方法，用于對象的合并，將源對象（source）的所有可枚舉屬性，復制到目標對象（target）。
           Object.defineProperty(this, "handles", {
               value: {},
               enumerable: false,//關鍵！
               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;
}