5個書寫JavaScript代碼的壞習(xí)慣，看看你中槍了沒？
Javascript在互聯(lián)網(wǎng)上名聲很臭，但你又很難再找到一個像它這樣如此動態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語言。它的低學(xué)習(xí)門檻讓很多人都稱它為學(xué)前腳本語言，它另外一個讓人嘲笑的東西是動態(tài)語言的概念是偏偏使用了高標(biāo)準(zhǔn)的靜態(tài)數(shù)據(jù)類型。其實(shí)，你和Javascript都站錯了立場，而現(xiàn)在，你讓Javascript很生氣。這里有五個原因能說明你的Javascript技術(shù)很爛。
1. 你沒有使用命名空間。
是否還記得在大學(xué)里老師告訴你不要在家庭作業(yè)里使用全局變量？Javascript里的全局變量的使用方法也不例外。Web網(wǎng)頁稍不留神就會變的混亂不堪、到處都是從互聯(lián)網(wǎng)上各個角落里找來的亂糟糟的相互侵犯的腳本和腳本庫。如果你把一個變量命名成loader()，那你是成心自找麻煩。如果你在無意識的情況下重載了一個函數(shù)，Javascript根本不會提醒你。你還把它叫做一種學(xué)前教育編程語言，還記得吧？我要說的是，你需要知道在做了這些后發(fā)生什么情況。
function derp(){ alert(“one”); }
function derp(){ alert(“two”); }
derp();
“two”，答案是“two”。并不是一定會這樣，它也可能是“one”。所以，把你所有的代碼都放在自己的命名空間里，這很容易。下面是定義自己的命名空間的一個簡單做法。
var foospace={};
foospace.derp=function(){ alert(“one”); }
function derp(){ alert(“two”); }
foospace.derp();
2. 你在變戲法，你把變量定義的東一個西一個。
你使用莫名其妙的數(shù)字字母組合作為變量名是一個雙輸?shù)慕Y(jié)局。在40行的代碼塊中尋找一個不帶任何表意的字符變量，對于維護(hù)工作來說簡直是場噩夢。把對變量的第一次聲明混合到一個40行的代碼塊里同樣也是一場噩夢。即使你自己遇到這樣的變量時，你也要不由的問自己：“這是在哪里定義的？”，然后迅速的使用Ctrl+F組合在源代碼里尋找這個變量最初定義的位置。不，不要這樣，相反，這是對Javascript的濫用，是一種愚蠢的做法。你應(yīng)該始終把變量定義在它的使用范圍的頂部。并不能說因?yàn)檫@不是必須的，你就可以不這樣做。
function(){
var a,//description
b; //description
//process…
}
3. 你沒有理解Javascript的變量范圍。
你是個天才的程序員，你吃的是C++、拉的是List。你知道什么是變量范圍，你對你的變量有完全的控制，你就像太上皇似的的注視著它們。然而，Javascript卻在你的咖啡里拉了一泡屎，并且大笑不止。
var herp=”one”;
{
var herp=”two”;
}
alert(herp);
在這種情況下你得到的herp不是“one”，而是“two”。Javascript的變量有效范圍并不是跟其它語言一樣依賴于代碼塊。Javascript的變量范圍是以函數(shù)為基礎(chǔ)的。每個函數(shù)都有它自己的變量范圍，Javascript這一點(diǎn)上表現(xiàn)的很酷，根本不理睬這毫無意義的花括弧包起來的范圍。事實(shí)上，Javascript是如此的酷，以至于你甚至可以將變量范圍像命名空間或變量那樣進(jìn)行傳遞。
4. 你以為Javascript的面向?qū)ο筇卣髦皇羌藿佣鴣淼摹?/strong>
Javascript，自從呱呱落地起，它就是一個面向?qū)ο蟮恼Z言。所有的東西在Javascript里都是對象，所有的！甚至數(shù)字和字符這樣的文字符號都可以通過它自身固有的構(gòu)造器轉(zhuǎn)化成對象。跟其它面向?qū)ο蟮恼Z言比起來，Javascript的不同之處在于，它沒有類(class)。Javascript對象像函數(shù)那樣定義，甚至函數(shù)自己也是對象。Javascript有個屬性叫做prototype，所有對象里都內(nèi)置了這個屬性，你可以通過它來改變對象的構(gòu)造，修改對象、添加更多的變量、更多的功能。
var derp; //will hold a Herp instance
var Herp= function(){
this.opinion=”Javascript is cooler than BASIC.”;
}
Herp.prototype.speak=function(){ alert(this.opinion); }
var derp= new Herp();
derp.speak();
如果這個看起來跟你毫不相干，我愿意介紹我的好朋友Google給你，Google擅長于幫助人們學(xué)習(xí)知識。面向?qū)ο髮τ谖疫@篇簡短的、低姿態(tài)的文章來說實(shí)在是個太大的話題。
5. 你使用“new”關(guān)鍵字時就像是盲人瞎馬。
Javascript肯定是你的初戀女友，因?yàn)槟泔@得無所適從。如果你想像真人那樣取悅Javascript，你需要去了解對象符號。除了在需要實(shí)例化一個對象，或罕見的需要延時加載數(shù)據(jù)的情況外，你基本上不需要使用new關(guān)鍵字。在Javascript里分配大量的new變量地址是一項(xiàng)很慢的操作，為了效率起見，你應(yīng)該始終使用對象符號。
var rightway= [1, 2, 3];
var wrongway= new Array(1, 2, 3);
是否還記得我說過Javascript的變量范圍是以函數(shù)為基礎(chǔ)的？是否還記得有人說Javascript的對象像函數(shù)那樣定義？如果你不使用new關(guān)鍵字來聲明一個對象，你將會使這個對象成為全局范圍內(nèi)的對象。所以，永遠(yuǎn)使用new關(guān)鍵字來聲明對象是一個好習(xí)慣。
var derp=”one”;
var Herp=function(){
this.derp=”two”;
}
var foo=Herp();
alert(derp);
如果你這樣寫，Javascript并不會在意，而你真正彈出的答案是“two”！有很多方法可以防止對象做出這樣的行為，可以以使用instanceOf，但更好的方法是正確的使用new關(guān)鍵字，這樣顯得更專業(yè)。
現(xiàn)在你知道你的Javascript代碼寫的很爛了吧，如果你記住了上面所說的東西，你的代碼就會有所改善。我喜歡用3個tab鍵來縮進(jìn)代碼，我喜歡用下劃線來連接單詞，我喜歡把函數(shù)名首字母大寫來表示它是對象。當(dāng)然，這個是另外一場討論了。有很多原因會導(dǎo)致你的Javascript代碼寫的很爛，就像我有很多技術(shù)很爛一樣，所以，盡情的在評論里表達(dá)你的意見，支持，反對，不吝賜教。
非常感謝rogeliorv和 Jared Wein指出第五點(diǎn)中存在的錯誤。你們很強(qiáng)。
相關(guān)文章
這篇文章主要為大家分享了一份很全面的JavaScript常用功能匯總集合，一些常用的額JS 對象、基本數(shù)據(jù)結(jié)構(gòu)、功能函數(shù)等，感興趣的小伙伴們可以參考一下2016-01-01
Axios?get?post請求傳遞參數(shù)的實(shí)現(xiàn)代碼
axios是基于promise用于瀏覽器和node.js的http客戶端，支持瀏覽器和node.js，能攔截請求和響應(yīng)，這篇文章主要介紹了axios?get?post請求傳遞參數(shù)的操作代碼,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計(jì)時器，小程序點(diǎn)擊事件觸發(fā)計(jì)時器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了JS中substring與substr的用法講解，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
Bpmn.js activiti 流程編輯器詳細(xì)教程
流程編輯器是一種用于創(chuàng)建、編輯和管理流程圖的工具,它提供了一個可視化的界面,使用戶能夠以圖形化的方式定義和配置流程的各個步驟、條件和流程間的關(guān)系,說明關(guān)于bpmn.js的一些事件, 通過本文你可以了解到,感興趣的朋友一起看看吧2023-10-10
js無縫滾動，圖片無縫滾動，文字無縫滾動，基于js代碼如何實(shí)現(xiàn)，本篇文章給大家詳解js代碼實(shí)現(xiàn)無縫滾動(文字和圖片)，需要的朋友可以參考下2015-08-08
我們在使用JS渲染DOM時，一般使用字符串創(chuàng)建DOM然后附加到父元素上，如果附加的DOM是動態(tài)易變的，那需要在函數(shù)中寫大量邏輯。如果在控件實(shí)現(xiàn)過程中，這帶來的問題更為嚴(yán)重。2013-04-04
JavaScript中5個重要的Observer函數(shù)小結(jié)
瀏覽器為開發(fā)者提供了功能豐富的Observer,本文主要介紹了JavaScript中5個重要的Observer函數(shù)小結(jié),具有一定的參考價值,感興趣的可以了解一下2024-01-01
微信小程序?qū)崿F(xiàn)拍照畫布指定區(qū)域生成圖片
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拍照畫布指定區(qū)域生成圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序原生自定義彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07