JavaScript寫庫前的準備工作
能夠獨立的書寫一個庫，是很多開發者或者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聯系作者獲取授權】
