首頁 > web前端 > js教程 > 主體

5個書寫JavaScript程式碼的壞習慣,看看你中槍了沒?

PHPz
發布: 2018-09-30 13:45:56
原創
1422 人瀏覽過

這篇文章主要介紹了5個書寫JavaScript程式碼的壞習慣,看看你中槍了沒? ,本章指出了你沒有使用命名空間、變數定義的東一個西一個、Javascript的變數範圍、Javascript的物件導向、new關鍵字等問題,需要的朋友可以參考。

Javascript在網路上名聲很臭,但你又很難再找到一個像它這樣如此動態、如此被廣泛使用、如此根植於我們的生活中的另外一種語言。它的低學習門檻讓很多人稱它為學前腳本語言,它另外一個讓人嘲笑的東西是動態語言的概念是偏偏使用了高標準的靜態資料類型。其實,你和Javascript都站錯了立場,而現在,你讓Javascript很生氣。這裡有五個原因可以說明你的Javascript技術很爛。

1. 你沒有使用命名空間。

是否還記得在大學老師告訴你不要在家庭作業裡使用全域變數? Javascript裡的全域變數的使用方法也不例外。 Web網頁稍不留神就會變的混亂不堪、到處都是從網路上各個角落找來的亂糟糟的相互侵犯的腳本和腳本庫。如果你把一個變數命名成loader(),那你是成心自找麻煩。如果你在無意識的情況下重載了一個函數,Javascript根本不會提醒你。你還把它叫做一種學前教育程式語言,還記得吧?我要說的是,你需要知道做了這些後會發生什麼情況。

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. 你在變戲法,你把變數定義的東一個西一個。

你使用莫名其妙的數字字母組合作為變數名稱是一個雙輸的結局。在40行的程式碼區塊中尋找一個不帶任何表意的字元變量,對於維護工作來說簡直是場惡夢。把變數的第一次宣告混合到一個40行的程式碼區塊裡同樣也是一場惡夢。即使當你自己遇到這樣的變數時,你也要不由的問自己:“這是在哪裡定義的?”,然後迅速的使用Ctrl F組合在源代碼裡尋找這個變數最初定義的位置。不,不要這樣,相反,這是對Javascript的濫用,是一種愚蠢的做法。你應該始終把變數定義在它的使用範圍的頂部。並不能說因為這不是必須的,你就可以不這麼做。

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的變數範圍是以函數為基礎的。每個函數都有它自己的變數範圍,Javascript這一點上表現的很酷,根本不理睬這毫無意義的花括弧包起來的範圍。事實上,Javascript是如此的酷,以至於你甚至可以將變數範圍像命名空間或變數一樣進行傳遞。

4. 你以為Javascript的物件導向特徵只是嫁接而來的。

Javascript,自從呱呱落地起,它就是一個物件導向的語言。所有的東西在Javascript裡都是對象,所有的!甚至數字和字元這樣的文字符號都可以透過它本身固有的構造器轉換成物件。跟著它物件導向的語言比起來,Javascript的不同之處在於,它沒有類別(class)。 Javascript物件像函數一樣定義,連函數本身也是物件。 Javascript有個屬性叫做prototype,所有物件裡都內建了這個屬性,你可以透過它來改變物件的構造,修改物件、增加更多的變數、更多的功能。

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擅長於幫助人們學習知識。物件導向對於我這篇簡短的、低姿態的文章來說實在是個太大的話題。

5. 你使用「new」關鍵字時就像是盲人瞎馬。

Javascript肯定是你的初戀女友,因為你顯得無所適從。如果你想像真人那樣取悅Javascript,你需要去了解物件符號。除了在需要實例化一個對象,或罕見的需要延遲載入資料的情況外,你基本上不需要使用new關鍵字。在Javascript裡分配大量的new變數位址是一項很慢的操作,為了效率起見,你應該永遠使用物件符號。

var rightway= [1, 2, 3];
var wrongway= new Array(1, 2, 3);
登入後複製

是否还记得我说过Javascript的变量范围是以函数为基础的?是否还记得有人说Javascript的对象像函数那样定义?如果你不使用new关键字来声明一个对象,你将会使这个对象成为全局范围内的对象。所以,永远使用new关键字来声明对象是一个好习惯。

var derp=”one”;
var Herp=function(){
this.derp=”two”;
}
var foo=Herp();
alert(derp);
登入後複製

如果你这样写,Javascript并不会在意,而你真正弹出的答案是“two”!有很多方法可以防止对象做出这样的行为,可以以使用instanceOf,但更好的方法是正确的使用new关键字,这样显得更专业。

现在你知道你的Javascript代码写的很烂了吧,如果你记住了上面所说的东西,你的代码就会有所改善。更多相关教程请访问JavaScript视频教程

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!