摘要:函數(shù)聲明應(yīng)該在作用域的頂層。數(shù)組和對(duì)象字面量用數(shù)組和對(duì)象字面量來代替數(shù)組和對(duì)象構(gòu)造器。數(shù)組構(gòu)造器很容易讓人在它的參數(shù)上犯錯(cuò)。推薦對(duì)象構(gòu)造器不會(huì)有類似的問題,但是為了可讀性和統(tǒng)一性,我們應(yīng)該使用對(duì)象字面量。
javascript 代碼規(guī)范
代碼規(guī)范我們應(yīng)該遵循古老的原則:“能做并不意味著應(yīng)該做”。
全局命名空間污染總是將代碼包裹在一個(gè)立即的函數(shù)表達(dá)式里面,形成一個(gè)獨(dú)立的模塊。
不推薦
var x = 10, y = 100; console.log(window.x + " " + window.y);
推薦
;(function(window){ "use strict"; var x = 10, y = 100; console.log(window.x + " " + window.y); }(window));立即執(zhí)行函數(shù)
在立即執(zhí)行函數(shù)里面,如果有用到全局變量應(yīng)該通過變量傳遞的方式,讓立即執(zhí)行函數(shù)的函數(shù)體在調(diào)用時(shí),能以局部變量的形式調(diào)用,在一定程度上提升程序性能。
并且應(yīng)該在立即執(zhí)行函數(shù)的形參里加上undefined,在最后一個(gè)位置,這是因?yàn)镋S3里undefined是可以讀寫的,如果在全局位置更改undefined的值,你的代碼可能得不到逾期的結(jié)果。
另外推薦在立即執(zhí)行函數(shù)開始跟結(jié)尾都添加上分號(hào),避免在合并時(shí)因?yàn)閯e人的代碼不規(guī)范而影響到我們自己的代碼
不推薦
(function(){ "use strict"; var x = 10, y = 100, c, elem=$("body"); console.log(window.x + " " + window.y); $(document).on("click",function(){ }); if(typeof c==="undefined"){ //你的代碼 } }());
推薦
;(function($,window,document,undefined){ "use strict"; var x = 10, y = 100, c, elem=$("body"); console.log(window.x + " " + window.y); $(document).on("click",function(){ }); if(typeof c==="undefined"){ //你的代碼 } }(jQuery,window,document));嚴(yán)格模式
ECMAScript 5 嚴(yán)格模式可在整個(gè)腳本或獨(dú)個(gè)方法內(nèi)被激活。它對(duì)應(yīng)不同的 javascript 語境會(huì)做更加嚴(yán)格的錯(cuò)誤檢查。嚴(yán)格模式也確保了 javascript 代碼更加的健壯,運(yùn)行的也更加快速。
嚴(yán)格模式會(huì)阻止使用在未來很可能被引入的預(yù)留關(guān)鍵字。
你應(yīng)該在你的腳本中啟用嚴(yán)格模式,最好是在獨(dú)立的 立即執(zhí)行函數(shù) 中應(yīng)用它。避免在你的腳本第一行使用它而導(dǎo)致你的所有腳本都啟動(dòng)了嚴(yán)格模式,這有可能會(huì)引發(fā)一些第三方類庫的問題。
不推薦
"use strict"; (function(){ }());
推薦
(function(){ "use strict"; }());變量聲明
對(duì)所有的變量聲明,我們都應(yīng)該指定var,如果沒有指定var,在嚴(yán)格模式下會(huì)報(bào)錯(cuò),并且同一個(gè)作用域內(nèi)的變量應(yīng)該盡量采用一個(gè)var去聲明,多個(gè)變量用“,”隔開。
不推薦
function myFun(){ x=5; y=10; }
不完全推薦
function myFun(){ var x=5; var y=10; }
推薦
function myFun(){ var x=5, y=10; }使用帶類型判斷的比較判斷
總是使用 === 精確的比較操作符,避免在判斷的過程中,由 JavaScript 的強(qiáng)制類型轉(zhuǎn)換所造成的困擾。
如果你使用 === 操作符,那比較的雙方必須是同一類型為前提的條件下才會(huì)有效。
不推薦
(function(w){ "use strict"; w.console.log("0" == 0); // true w.console.log("" == false); // true w.console.log("1" == true); // true w.console.log(null == undefined); // true var x = { valueOf: function() { return "X"; } }; w.console.log(x == "X");//true }(window.console.log));
推薦
(function(w){ "use strict"; w.console.log("0" === 0); // false w.console.log("" === false); // false w.console.log("1" === true); // false w.console.log(null === undefined); // false var x = { valueOf: function() { return "X"; } }; w.console.log(x === "X");//false }(window));變量賦值時(shí)的邏輯操作
邏輯操作符 || 和 && 也可被用來返回布爾值。如果操作對(duì)象為非布爾對(duì)象,那每個(gè)表達(dá)式將會(huì)被自左向右地做真假判斷。基于此操作,最終總有一個(gè)表達(dá)式被返回回來。這在變量賦值時(shí),是可以用來簡化你的代碼的。
不推薦
if(!x) { if(!y) { x = 1; } else { x = y; } }
推薦
x = x || y || 1;分號(hào)
總是使用分號(hào),因?yàn)殡[式的代碼嵌套會(huì)引發(fā)難以察覺的問題。當(dāng)然我們更要從根本上來杜絕這些問題[1] 。以下幾個(gè)示例展示了缺少分號(hào)的危害:
// 1. MyClass.prototype.myMethod = function() { return 42; } //這里沒有分號(hào) (function() { })(); //2. var x = { "i": 1, "j": 2 } // 這里沒有分號(hào) //我知道這樣的代碼你可能永遠(yuǎn)不會(huì)寫,但是還是舉一個(gè)例子 [ffVersion, ieVersion][isIE](); // 3. var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // 這里沒有分號(hào) -1 == resultOfOperation() || die();
錯(cuò)誤結(jié)果
JavaScript 錯(cuò)誤 —— 首先返回 42 的那個(gè) function 被第二個(gè)function 當(dāng)中參數(shù)傳入調(diào)用,接著數(shù)字 42 也被“調(diào)用”而導(dǎo)致出錯(cuò)。
八成你會(huì)得到 ‘no such property in undefined’ 的錯(cuò)誤提示,因?yàn)樵谡鎸?shí)環(huán)境中的調(diào)用是這個(gè)樣子:xffVersion, ieVersion().
die 總是被調(diào)用。因?yàn)閿?shù)組減 1 的結(jié)果是 NaN,它不等于任何東西(無論 resultOfOperation 是否返回 NaN)。所以最終的結(jié)果是 die() 執(zhí)行完所獲得值將賦給 THINGS_TO_EAT.
語句塊內(nèi)的函數(shù)聲明切勿在語句塊內(nèi)聲明函數(shù),在 ECMAScript 5 的嚴(yán)格模式下,這是不合法的。函數(shù)聲明應(yīng)該在作用域的頂層。但在語句塊內(nèi)可將函數(shù)申明轉(zhuǎn)化為函數(shù)表達(dá)式賦值給變量。
不推薦
if (x) { function foo() {} }
推薦
if (x) { var foo = function() {}; }不要使用eval函數(shù)
eval() 不但混淆語境還很危險(xiǎn),總會(huì)有比這更好、更清晰、更安全的另一種方案來寫你的代碼,因此盡量不要使用 eval 函數(shù)。
數(shù)組和對(duì)象字面量 1.用數(shù)組和對(duì)象字面量來代替數(shù)組和對(duì)象構(gòu)造器。數(shù)組構(gòu)造器很容易讓人在它的參數(shù)上犯錯(cuò)。不推薦
//數(shù)組長度3 var a1 = new Array(x1, x2, x3); //數(shù)組長度2 var a2 = new Array(x1, x2); //如果x1是一個(gè)自然數(shù),那么它的長度將為x1 //如果x1不是一個(gè)自然數(shù),那么它的長度將為1 var a3 = new Array(x1); var a4 = new Array();
正因如此,如果將代碼傳參從兩個(gè)變?yōu)橐粋€(gè),那數(shù)組很有可能發(fā)生意料不到的長度變化。為避免此類怪異狀況,請(qǐng)總是采用可讀的數(shù)組字面量。
推薦
var a = [x1, x2, x3]; var a2 = [x1, x2]; var a3 = [x1]; var a4 = [];2.對(duì)象構(gòu)造器不會(huì)有類似的問題,但是為了可讀性和統(tǒng)一性,我們應(yīng)該使用對(duì)象字面量。
不推薦
var o = new Object(); var o2 = new Object(); o2.a = 0; o2.b = 1; o2.c = 2; o2["strange key"] = 3;
推薦
var o = {}; var o2 = { a: 0, b: 1, c: 2, "strange key": 3 };三元條件判斷(if 的快捷方法)
用三元操作符分配或返回語句。在比較簡單的情況下使用,避免在復(fù)雜的情況下使用。沒人愿意用 10 行三元操作符把自己的腦子繞暈。
不推薦
if(x === 10) { return "valid"; } else { return "invalid"; }
推薦
return x === 10 ? "valid" : "invalid";for循環(huán)
使用for循環(huán)過程中,數(shù)組的長度,使用一個(gè)變量來接收,這樣有利于代碼執(zhí)行效率得到提高,而不是每走一次循環(huán),都得重新計(jì)算數(shù)組長度
不推薦
for(var i=0;i推薦
for(var i=0,len=arr.length;i重復(fù)的dom操作 重復(fù)的dom操作,使用一個(gè)變量來進(jìn)行接收很有必要,而不是頻繁的去操作dom樹,這對(duì)性能與代碼的整潔及易維護(hù)性帶來不好的影響
不推薦$(".myDiv").find(".span1").text("1"); $(".myDiv").find(".span2").text("2"); $(".myDiv").find(".span3").text("3"); $(".myDiv").find(".span4").text("4");推薦
var mydiv=$(".myDiv"); mydiv.find(".span1").text("1"); mydiv.find(".span2").text("2"); mydiv.find(".span3").text("3"); mydiv.find(".span4").text("4");在jquery .end()可使用的情況下應(yīng)該優(yōu)先使用.end()
推薦$(".myDiv").find(".span1").text("1") .end().find(".span2").text("2"); .end().find(".span3").text("3"); .end().find(".span4").text("4");注釋規(guī)范在描寫注釋時(shí),推薦格式化且統(tǒng)一的注釋風(fēng)格,在寫注釋時(shí)盡量描述寫代碼時(shí)的思路,而不是代碼做了什么。
不推薦//獲取訂單 function getOrderByID(id){ var order; //... return order; }方法的注釋應(yīng)該統(tǒng)一用塊級(jí)注釋
推薦/** * 根據(jù)訂單id獲取訂單詳細(xì)數(shù)據(jù) * @param {[number]} id [訂單ID] * @return {[order]} [訂單詳細(xì)信息] */ function getOrderByID(id){ var order; //... return order; }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/80332.html
摘要:特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多,可以很快搞定,沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補(bǔ)充。有錯(cuò)誤的地方,還請(qǐng)斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會(huì)及時(shí)更新,平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...
摘要:本周于上海閉幕,掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答,但會(huì)議的視頻目前都還沒放出來,有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范,可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答,但會(huì)議的視頻目前都還沒放出來,有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范,可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答,但會(huì)議的視頻目前都還沒放出來,有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范,可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要:樣式屬性順序單個(gè)樣式規(guī)則下的屬性在書寫時(shí),應(yīng)按功能進(jìn)行分組,組之間需要有一個(gè)空行。同時(shí)要以的順序書寫,提高代碼的可讀性。 在書寫css樣式的時(shí)候總是無意中就寫亂了,無論是命名或者是樣式的書寫順序,這里做一個(gè)總結(jié),提醒自己在書寫css的時(shí)候時(shí)刻注意,大家可以參考哈。 1. 樣式屬性順序 單個(gè)樣式規(guī)則下的屬性在書寫時(shí),應(yīng)按功能進(jìn)行分組,組之間需要有一個(gè)空行。同時(shí)要以Positioning ...
閱讀 1894·2021-11-24 11:16
閱讀 3257·2021-09-10 10:51
閱讀 3180·2021-08-03 14:03
閱讀 1261·2019-08-29 17:03
閱讀 3238·2019-08-29 12:36
閱讀 2219·2019-08-26 14:06
閱讀 493·2019-08-23 16:32
閱讀 2662·2019-08-23 13:42