javaScript函數封裝

本文轉載自查看原文 2018-08-02 23:26 1510 框架模板

本篇封裝了一些常用的函數，兼容IE8及以下的瀏覽器，怪異模式。

按需加載loadScript（）、綁定事件處理函數addEvet()、查看滾動尺寸getScrollOffset()、查看可視區窗口尺寸getViewportOffset()、返回計算樣式getStyle()、獲取事件源對象getEventScr(e)、判斷類型type()、取消冒泡stopBubble()、深度克隆deepClone()、阻止默認事件cancelHandler()、字節長度排序retBytes()、拖拽方塊drag()

按需加載loadScript（）

方法一：函數傳入一個匿名函數，在該函數參數傳入需要執行的參數

 1         function loadScript(url,callback){
 2             var script=document.createElement('script');
 3             script.type='text/javascript';
 4             if(script.readyState){
 5                 script.onreadystatechange=function (){
 6                     if(script.readyState=='complete'||script.readyState=='loaded'){
 7                         callback();
 8                     }
 9                 }
10             }else{
11                 script.onload=function (){
12                     callback();
13                 }
14             }//先啟動監聽事件后下載
15             script.src=url;
16             document.head.appendChild(script);
17         }
18 
19 
20         //執行函數需注意
21         loadScript('demo.js',function(){test()});

方法二：參數傳入字符串形式

function loadScript(url,callback){
            var script=document.createElement('script');
            script.type='text/javascript';
            if(script.readyState){
                script.onreadystatechange=function (){
                    if(script.readyState=='complete'||script.readyState=='loaded'){
                        eval(callback);
                    }
                }
            }else{
                script.onload=function (){
                    eval(callback);;
                }
            }//先啟動監聽事件后下載
            script.src=url;
            document.head.appendChild(script);
        }

        //執行函數需注意參數傳入字符串形式
        loadScript('demo.js','test()');

方法三：適合傳入一個tools工具庫，執行工具庫中的某個函數

function loadScript(url,callback){
            var script=document.createElement('script');
            script.type='text/javascript';
            if(script.readyState){
                script.onreadystatechange=function (){
                    if(script.readyState=='complete'||script.readyState=='loaded'){
                        tools[callback]();
                    }
                }
            }else{
                script.onload=function (){
                    tools[callback]();
                }
            }//先啟動監聽事件后下載
            script.src=url;
            document.head.appendChild(script);
        }

        //執行函數需注意參數傳入字符串形式
        loadScript('demo.js','test');

最后的封裝：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <script type="text/javascript">
12         //按需加載 執行js函數
13         function loadScript(url, callback) {
14             var script = document.createElement('script');
15             script.type = 'text/javascript';
16             //ie瀏覽器監測的方法
17             if (script.readyState) {
18                 script.onreadystatechange = function () {
19                     if (script.readyState == 'complete' || script.readyState == 'loaded') {
20                         callback();
21                     }
22                 }
23             } else {
24                 //chrome、Firefox、Safari、Opera瀏覽器的方法
25                 script.onload = function () {
26                     callback();
27                 }
28             }
29             script.src = url;//先綁定監測的事件，再加載URL。假設下載速度比電腦運行還快的情況
30             document.head.appendChild(script);
31         }
32 // 分界線--------------------------------
33 //執行需注意url是字符串。函數需傳一個匿名函數包裹該test()進去，因為代碼未加載就解析test會報錯
34 
35 /*        loadScript('demo.js',function(){
36             test();
37         });
38 */
39     </script>
40 
41 
42 </body>
43 
44 </html>

綁定事件處理函數addEvet()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <div style="width: 100px;height: 100px;background: red;"></div>
12 
13     <script type="text/javascript">
14 
15         // 給一個dom對象(elem)添加該事件類型(type)的處理函數(handle)
16         function addEvent(elem, type, handle) {
17             //兼容非ie9以下瀏覽器
18             if (elem.addEventListener) {
19                 elem.addEventListener(type, handle, false);
20             } else if (elem.attachEvent) {
21                 //兼容ie瀏覽器
22                 elem.attachEvent('on' + type, function () {
23                     handle.call(elem);
24                 })
25             } else {
26                 //兼容性很好
27                 elem['on' + type] = handle;
28             }
29         }
30 
31 
32 
33         //分界線------------------------------------------------
34         var div = document.getElementsByTagName('div')[0];
35         addEvent(div, 'click', test);
36         function test() {
37             console.log("a");
38         }
39 
40 
41 
42     </script>
43 
44 
45 </body>
46 
47 </html>

查看滾動尺寸getScrollOffset()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <!-- br*100 顯示滾動條-->
10     
11     <script type="text/javascript">
12 
13         function getScrollOffset() {
14             if (window.pageXOffset) {
15                 return {
16                     x: window.pageXOffset,
17                     y: window.pageYOffset
18                 }
19             } else {
20                 //兼容ie8及ie8以下
21                 return {
22                     x: document.body.scrollLeft + document.documentElement.scrollLeft,
23                     y: document.body.scrollTop + document.documentElement.scrollTop
24                 }
25             }
26         }
27 
28     </script>
29 </body>
30 
31 </html>

查看可視區窗口尺寸getViewportOffset()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <script type="text/javascript">

        function getViewportOffset() {
            //兼容非ie瀏覽器
            if (window.innerWidth) {
                w: window.innerWidth,
                    h : window.innerHeight
            } else {
                //兼容怪異模式
                if (document.compatMode == "BackCompat") {
                    return {
                        w: document.body.clientWidth,
                        h: document.body.clientHight
                    }
                } else {
                    //兼容標准模式 ie瀏覽器
                    return {
                        w: document.documentElement.clientWidth,
                        h: document.documentElement.clientHight
                    }
                }
            }
        }

    </script>


</body>

</html>

返回計算樣式getStyle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style="width: 100px;height:100px;background: red;"></div>
    <script type="text/javascript">

        function getStyle(elem,prop){
            //兼容非ie8及以下瀏覽器
            if(window.getComputedStyle){
                return window.getComputedStyle(elem,null)[prop]; //null可以放偽元素 但是這里沒有做偽元素兼容
            }else{
            //兼容ie瀏覽器
                return elem.currentStyle[prop];
            }
        }

    </script>


</body>
</html>

獲取事件源對象getEventScr(e)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10     <div style="width: 100px;height: 100px;background: red;"></div>
11     <script type="text/javascript">
12 
13         function getEventScr(e) {
14             var event = e || window.event;//兼容ie
15             var target = event.target || event.scrEvent;//event.target兼容火狐、event.scrEvent兼容ie。Chrome兩兼容
16             console.log(target);
17         }
18 
19 
20         //分界線-------------------------------------
21         var div = document.getElementsByTagName('div')[0];
22         div.onclick = function (e) {
23             getEventScr(e);
24         }
25 
26     </script>
27 
28 
29 </body>
30 
31 </html>

判斷類型type()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <script type="text/javascript">
12 
13         function type(target) {
14             var template = {
15                 "[object Array]": "array",
16                 "[object Object]": "object",
17                 "[object Number]": "number-object",
18                 "[object Boolean]": "boolean-object",
19                 "[object String]": "string-object"
20             }
21 
22             //1.分兩類 原始值 引用值
23             //2.區分引用值
24             if (target == null) {
25                 return null;
26             }
27             if (typeof (target) == 'object') {
28                 //數組
29                 //對象
30                 //包裝類 Object.prototype.toString
31                 var str = Object.prototype.toString.call(target);//屬性名
32                 return template[str];//屬性值
33             } else {
34                 return typeof (target);//原始值 和 function
35             }
36         }
37 
38 
39     </script>
40 
41 
42 
43 </body>
44 
45 </html>

取消冒泡stopBubble()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <script type="text/javascript">

        function stopBubble(event) {
            //兼容非ie9以下瀏覽器
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                //兼容ie瀏覽器
                event.cancelBubble = true;
            }
        }

    </script>


</body>

</html>

深度克隆deepClone()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <script type="text/javascript">
12 
13         function deepClone(origin, target) {
14             var target = target || {},
15                 toStr = Object.prototype.toString,
16                 arrStr = "[object Array]";
17             for (var prop in origin) {
18                 if (origin.hasOwnProperty(prop)) {
19                     if (origin[prop] !== "null" && typeof (origin[prop]) == 'object') {
20                         if (toStr.call(origin[prop]) == arrStr) {
21                             target[prop] = [];
22                         } else {
23                             target[prop] = {};
24                         }
25                         deepClone(origin[prop], target[prop]);
26                     } else {
27                         target[prop] = origin[prop]
28                     }
29                 }
30             }
31             return target;
32         };
33 
34 
35         // 以下為界限
36         var obj = {
37             name: "liang",
38             age: 18,
39             son: {
40                 name: "hua",
41                 age: 11,
42                 arr: [1, 2, 3]
43             }
44         };
45 
46 
47     </script>
48 
49 
50 </body>
51 
52 </html>

阻止默認事件cancelHandler()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <script type="text/javascript">
12 
13         function cancelHandler(event) {
14             // 兼容非ie瀏覽器
15             if (event.preventDefault) {
16                 event.preventDefault();
17             } else {
18                 // 兼容ie瀏覽器
19                 event.returnValue = false;
20             }
21         }
22 
23         //分界線-------------------------------------
24         document.oncontextmenu = function (e) {
25             console.log(e);
26             cancelHandler(e);
27         }
28 
29     </script>
30 
31 
32 
33 </body>
34 
35 </html>

字節長度排序retBytes()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <script type="text/javascript">
12 
13         function retBytes(str) {
14             var num = len = str.length;
15             for (var i = 0; i < len; i++) {
16                 if (str.charCodeAt(i) > 255) {
17                     num++;
18                 }
19             }
20             return num;
21         }
22         var arr = ['a鄧', 'bbbbden鄧哥過', 'ddddnkkjkdjfkffhhaf'];
23         arr.sort(function (a, b) {
24             return retBytes(a) - retBytes(b);
25         });
26 
27     </script>
28 </body>
29 
30 </html>

拖拽方塊drag()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <div style="width:100px;height:100px;background-color:red;position:absolute;left:0;top:0;border-radius: 50%"></div>
12 
13     <script type="text/javascript">
14 
15         var div = document.getElementsByTagName('div')[0];
16 
17         function drag(elem) {
18             elem.onmousedown = function (e) {
19                 var event = e || window.event;
20                 disX = event.pageX - parseInt(elem.style.left);
21                 disY = event.pageY - parseInt(elem.style.top);
22                 document.onmousemove = function (e) {
23                     var event = e || window.event;
24                     elem.style.left = event.pageX - disX + "px";
25                     elem.style.top = event.pageY - disY + "px";
26                 }
27                 document.onmouseup = function () {
28                     document.onmousemove = null;
29                 }
30             }
31         }
32 
33 
34         drag(div);
35 
36     </script>
37 
38 </body>
39 
40 </html>

時鍾定時器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         input{
 8             border:1px solid rgba(0,0,0,0.8);
 9             text-align: right;
10             font-size: 18px;
11             font-weight: bold;
12         }
13 
14     </style>
15 </head>
16 <body>
17 
18     minutes:<input type="text" value="0">
19     seconds:<input type="text" value="0">
20 
21 <script type="text/javascript">
22     var minutesNode=document.getElementsByTagName('input')[0];
23     var secondsNode=document.getElementsByTagName('input')[1];
24     var    minutes=0,
25         seconds=0;
26     var timer=setInterval(function(){
27         seconds++;
28         if(seconds==60){
29             seconds=0;
30             minutes++;
31         }
32         secondsNode.value=seconds;
33         minutesNode.value=minutes;
34         if(minutes==3){
35             clearInterval(timer);
36         }
37 
38     },10);
39     
40 </script>
41 
42 
43 </body>
44 </html>

仿新搜索框

<input type="text" style="color: #999;position: relative;" onfocus="if(this.value=='請輸入用戶名') {this.value=''; this.style.color='#424242'}" onblur="if (this.value=='') {this.value='請輸入用戶名'; this.style.color='#999'}" value="請輸入用戶名">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .inp-txt {
            color: #666;
            border: #ff8400 solid 1px;
        }

        .submit-second-btn {
            background: #ff8400;
            border: 0;
        }
    </style>
</head>

<body>


    <input type="text" maxlength="40" value="請輸入關鍵字" name="SerchKey" class="inp-txt" onfocus="if(this.value=='請輸入關鍵字'){this.value='';this.className='inp-txt inp-txt-active'}"
     onblur="if(this.value==''){this.value='請輸入關鍵字';this.className='inp-txt'}" autocomplete="off">
    <input type="submit" name="SearchSubButton" class="submit-second-btn" value="搜索" onmouseover="this.className='submit-second-btn submit-second-btn-hover'"
     onmouseout="this.className='submit-second-btn'" suda-uatrack="key=index_new_search&amp;value=search_click">


</body>

</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 javascript如何封裝函數 Javascript：常用函數封裝 javascript封裝函數入門『JavaScript』封裝我自己的Javascript 庫，封裝了一些常用函數什么是函數封裝。原生JavaScript封裝Ajax vue之JavaScript封裝 Javascript 封裝問題 javaScript封裝的各種寫法