JavaScript寫庫前的準備工作

作者：面包理想學院 2018-01-25 16:23:58

開發開發工具

雖然我覺得這個鄙視鏈很幼稚，但是不能不說很多人拿自己寫庫作為一個技能區分標準，不管怎樣寫庫都是一個提升技能的好辦法，然而并不難。

能夠獨立的書寫一個庫，是很多開發者或者HR認為區分技能的一個標志，而且還存在一個鄙視鏈：

切圖的<用JS<從網上趴代碼<自己寫簡單js<自己寫組件<自己數據交互<自己寫庫給別人用<寫nodejs等后臺js<自己寫后臺組件和數據庫交互的，

雖然我覺得這個鄙視鏈很幼稚，但是不能不說很多人拿自己寫庫作為一個技能區分標準，不管怎樣寫庫都是一個提升技能的好辦法，然而并不難。

好，我們看看寫庫之前需要什么準備知識。

1.嚴格模式

很多庫一開始就是這樣子的，

(function(global){ 
    //嚴格模式 
    'use strict' 
})(window);

不墨跡直接說嚴格模式的好處，

1.更利于調試，當不定義變量直接用的時候如果不適用嚴格模式不會報錯，而是結果不對。這個很難調試，因為大部分時間這種錯誤是你單詞拼寫錯誤，不報錯。

2.防止出現低級錯誤，除了上面的問題，還有比如if里面定義函數造成問題的情況

3.修復了很多不利的bug和擅長無用功能，比如with。

聽不懂我上面那三條也沒事記住一個字就夠了，以后必須用!

2.初始化。

舉個例子寫一個jquery的css方法，簡單點兒，只實現設置寬高顏色。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>大彬哥版權所有翻錄必究</title> 
    <meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864"> 
    <meta name="copyright" content="尼古拉斯·屌·大彬哥"> 
    <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <style> 
 
    </style> 
    <script> 
        function css(obj,width,height,color){ 
 
            obj.style['width'] = width+'px'; 
            obj.style['height'] = height+'px';; 
            obj.style['background'] = color; 
        } 
        document.addEventListener('DOMContentLoaded',function(){ 
            var oDiv = document.querySelector('#div1'); 
            css(oDiv,200,100,'red'); 
        },false); 
    </script> 
 
</head> 
<body> 
    <div id="div1"></div> 
</body> 
</html>

這樣寫至少有兩問題，

1.參數多了我記不住順序，就死翹翹了。

2.參數多了我忘寫兩個，就死翹翹了。

怎么解決用json的無序和增加默認值。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>大彬哥版權所有翻錄必究</title> 
    <meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864"> 
    <meta name="copyright" content="尼古拉斯·屌·大彬哥"> 
    <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <style> 
 
    </style> 
    <script> 
        function css(obj,json){ 
            json.width = json.width||100; 
            json.height = json.height||100; 
            json.background =  json.background||'#cccccc';    
            obj.style['width'] = json.width+'px'; 
            obj.style['height'] = json.height+'px';; 
            obj.style['background'] = json.background; 
        } 
        document.addEventListener('DOMContentLoaded',function(){ 
            var oDiv = document.querySelector('#div1'); 
//            css(oDiv,{width:200,height:50,background:'red'}); 
            css(oDiv,{background:'red'}); 
        },false); 
    </script> 
</head> 
<body> 
    <div id="div1"></div> 
</body> 
</html>

簡單吧。

3.數據類型判斷

我們有時候經常要判斷用戶輸入的數據類型。上代碼，重點是對象和數組的判斷。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>大彬哥版權所有翻錄必究</title> 
    <meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864"> 
    <meta name="copyright" content="尼古拉斯·屌·大彬哥"> 
    <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <style> 
 
    </style> 
    <script> 
        //usbnofunc 
        // undefine string boolean number  
        //這幾個直接用typeof 不考慮new Number這些情況，神經病才這么用,這里不墨跡 
       // alert(typeof 'abc' === 'string'); 
        //看看null,不要以為null類型是object 這孫子是一個bug 
//        alert(typeof null === 'object'); 
        // 判斷數組 
        var arr = [1,3]; 
        function isArray(value){ 
            if (typeof Array.isArray === "function") { 
                return Array.isArray(value); 
            }else{ 
                return Object.prototype.toString.call(value) === "[object Array]"; 
            } 
        } 
        alert(isArrayFn(arr));// true   
         
    </script> 
</head> 
<body> 
    <div id="div1"></div> 
</body> 
</html>

知道你可能不了解數組的判斷方式，但是我想告訴你，兩件事：

1.看別人的庫很有必要，因為你寫的不周全，人家已經很周全拿過去用就行了，前提是你知道原理。

2.不是每一個東西都會用到，不要為了學一個東西而去學，你一定是解決實際問題，比如很多人不會用call,bind,apply。其實是因為他們不知道用在哪，學以致用。

看別人庫是最快的學習方法，推薦兩個庫，一個是loadash，一個是underscore.

【本文為51CTO專欄作者“面包理想學院”的原創稿件，轉載請通過51CTO聯系作者獲取授權】

戳這里，看該作者更多好文

責任編輯：武曉燕來源： 51CTO專欄

JavaScript 寫庫初始化