JavaScript寫庫(kù)前的準(zhǔn)備工作
能夠獨(dú)立的書寫一個(gè)庫(kù)，是很多開發(fā)者或者HR認(rèn)為區(qū)分技能的一個(gè)標(biāo)志，而且還存在一個(gè)鄙視鏈：
切圖的<用JS<從網(wǎng)上趴代碼<自己寫簡(jiǎn)單js<自己寫組件<自己數(shù)據(jù)交互<自己寫庫(kù)給別人用<寫nodejs等后臺(tái)js<自己寫后臺(tái)組件和數(shù)據(jù)庫(kù)交互的，
雖然我覺得這個(gè)鄙視鏈很幼稚，但是不能不說(shuō)很多人拿自己寫庫(kù)作為一個(gè)技能區(qū)分標(biāo)準(zhǔn)，不管怎樣寫庫(kù)都是一個(gè)提升技能的好辦法，然而并不難。
好，我們看看寫庫(kù)之前需要什么準(zhǔn)備知識(shí)。
1.嚴(yán)格模式
很多庫(kù)一開始就是這樣子的，
- (function(global){
- //嚴(yán)格模式
- 'use strict'
- })(window);
不墨跡直接說(shuō)嚴(yán)格模式的好處，
1.更利于調(diào)試，當(dāng)不定義變量直接用的時(shí)候如果不適用嚴(yán)格模式不會(huì)報(bào)錯(cuò)，而是結(jié)果不對(duì)。這個(gè)很難調(diào)試，因?yàn)榇蟛糠謺r(shí)間這種錯(cuò)誤是你單詞拼寫錯(cuò)誤，不報(bào)錯(cuò)。
2.防止出現(xiàn)低級(jí)錯(cuò)誤，除了上面的問(wèn)題，還有比如if里面定義函數(shù)造成問(wèn)題的情況
3.修復(fù)了很多不利的bug和擅長(zhǎng)無(wú)用功能，比如with。
聽不懂我上面那三條也沒事記住一個(gè)字就夠了，以后必須用!
2.初始化。
舉個(gè)例子寫一個(gè)jquery的css方法，簡(jiǎn)單點(diǎn)兒，只實(shí)現(xiàn)設(shè)置寬高顏色。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>大彬哥版權(quán)所有翻錄必究</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>
這樣寫至少有兩問(wèn)題，
1.參數(shù)多了我記不住順序，就死翹翹了。
2.參數(shù)多了我忘寫兩個(gè)，就死翹翹了。
怎么解決用json的無(wú)序和增加默認(rèn)值。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>大彬哥版權(quán)所有翻錄必究</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>
簡(jiǎn)單吧。
3.數(shù)據(jù)類型判斷
我們有時(shí)候經(jīng)常要判斷用戶輸入的數(shù)據(jù)類型。上代碼，重點(diǎn)是對(duì)象和數(shù)組的判斷。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>大彬哥版權(quán)所有翻錄必究</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
- //這幾個(gè)直接用typeof 不考慮new Number這些情況，神經(jīng)病才這么用,這里不墨跡
- // alert(typeof 'abc' === 'string');
- //看看null,不要以為null類型是object 這孫子是一個(gè)bug
- // alert(typeof null === 'object');
- // 判斷數(shù)組
- 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>
知道你可能不了解數(shù)組的判斷方式，但是我想告訴你，兩件事：
1.看別人的庫(kù)很有必要，因?yàn)槟銓懙牟恢苋?，人家已?jīng)很周全拿過(guò)去用就行了，前提是你知道原理。
2.不是每一個(gè)東西都會(huì)用到，不要為了學(xué)一個(gè)東西而去學(xué)，你一定是解決實(shí)際問(wèn)題，比如很多人不會(huì)用call,bind,apply。其實(shí)是因?yàn)樗麄儾恢烙迷谀模瑢W(xué)以致用。
看別人庫(kù)是最快的學(xué)習(xí)方法，推薦兩個(gè)庫(kù)，一個(gè)是loadash，一個(gè)是underscore.
【本文為51CTO專欄作者“面包理想學(xué)院”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過(guò)51CTO聯(lián)系作者獲取授權(quán)】
