本身封裝的js工具

 1 // 封裝函數insertAfter;功能相似insertBefore();
 2 
 3 var div = document.getElementsByTagName("div")[0];
 4 var span = document.createElement("span");
 5 var a = document.getElementsByTagName("a")[0];
 6 div.appendChild(span);
 7 
 8 HTMLElement.prototype.insertAfter = function(tag, now){
 9     if(now.nextSibling.nextSibling){
10         this.insertBefore(tag, now.nextSibling.nextSibling)
11     }else{
12         this.appendChild(tag)
13     }
14 
15 };
16 div.insertAfter(span, a);
17 
18 // 將目標節點內節點反轉
19 
20 var div = document.getElementsByTagName("div")[0];
21 HTMLElement.prototype.reverse = function () {
22     var len = this.children.length;
23     console.log(len);
24     while(len){
25         this.insertBefore(this.lastChild,this.firstChild);
26         len --;
27     }
28 }
29 div.reverse()
30 
31 // 獲取窗口滾動條的兼容性方法
32 function getScrollOffset() {
33     if(window.pageXOffset){
34         return {
35             x : window.pageXOffset,
36             y : window.pageYOffset
37         }
38     }else{
39         return {
40             x : document.body.scrollLeft + document.documentElement.scrollLeft,
41             x : document.body.scrollTop + document.documentElement.scrollTop,
42 
43         }
44     }
45 }
46 
47 // 獲取窗口尺寸的兼容性方法
48 function getViewportOffset() {
49     if(window.innerWidth){
50         return {
51             w : window.innerWidth,
52             w : window.innerHeight
53         }
54     }else{
55         if(documen.compatMode === "BackCompat"){
56             return {
57                 w : document.body.clientWidth,
58                 h : document.body.clientHeight
59             }
60         }else {
61             return {
62                 w : document.documentElement.clientWidth,
63                 h : document.documentElement.clientHeight
64             }
65         }
66     }
67 }
68 
69 //時間處理函數
70 
71 function addEvent(elem, type, handle){//第一個標籤，第二個類型，第三個函數
72     if(elem.addEventListener){
73         elem.addEventListener(type,handle,false);
74     }else if(elem.attachEvent){
75         elem.attachEvent("on" + type, function () {
76             handle.call(elem);
77         })
78     }else{
79         elem["on" + type] = handle;
80     }
81 }

Tools

 

1         // 封裝兼容性獲取樣式
2         function getComputedStyle(elem,prop){
3             if (window.getComputedStyle){
4                 return window.getComputedStyle(elem,null)[prop];
5             }else{
6                 return elem.currentStyle[prop];
7             }
8         }

封裝兼容性獲取樣式

 

 1     <script 描述="兼容性異步加載最終方式">
 2         function loadScript(url, callback){
 3             var script = document.createElement("script")
 4             script.type = "text/javascript";
 5             if (script.readyState){
 6                 script.onreadystatechange = function () {
 7                     if (script.readyState == "complete" || script.readyState == "loadded"){
 8                         //IE9如下的兼容
 9                         tools[callback]();//須要工具包js配合
10                         // eval(callback);//eval 最好不要使用
11                     }
12                 }
13             }else{
14                 //Safari chrome firefox opera 的兼容
15                 script.onload = function () {
16                     tools[callback]();//須要工具包js配合
17                     // eval(callback);//eval 最好不要使用
18                 }
19             }
20             script.src = url;
21             document.head.appendChild(script);
22         }
23         // 異步執行js包裏面的函數，按需執行，也能夠修改爲return信號，肯定是否加載完畢等功能
24         // loadScript(js包連接,執行的函數)
25         // 1.defer 異步加載，但要等到dom文檔所有解析完纔會被執行。只有IE能用，也能夠將代碼寫到內部。
26         // 2.aysnc 異步加載，加載完就執行，async只能加載啊我i不腳本，不能把js寫在script標籤裏，w3c標準，IE9以及其餘主流瀏覽器均可以用
27     </script>

兼容性異步加載最終方式