體驗javascript之美-第十課寫庫前的準備工做

時間 2020-02-07

原文原文鏈接

可以獨立的書寫一個庫，是不少開發者或者HR認爲區分技能的一個標誌，並且還存在一個鄙視鏈css

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

雖然我以爲這個鄙視鏈很幼稚，可是不能不說不少人拿本身寫庫做爲一個技能區分標準，無論怎樣寫庫都是一個提高技能的好辦法，然而並不難。node

好，咱們看看寫庫以前須要什麼準備知識。jquery

1.嚴格模式

不少庫一開始就是這樣子的，數據庫

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

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

1.更利於調試,當不定義變量直接用的時候若是不適用嚴格模式不會報錯，而是結果不對。這個很難調試，由於大部分時間這種錯誤是你單詞拼寫錯誤，不報錯。
2.防止出現低級錯誤 除了上面的問題，還有好比if裏面定義函數形成問題的狀況
3.修復了不少不利的bug和擅長無用功能  好比with

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

2.初始化。

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

<!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.