摘要:函數(shù)聲明應(yīng)該在作用域的頂層。數(shù)組和對(duì)象字面量用數(shù)組和對(duì)象字面量來(lái)代替數(shù)組和對(duì)象構(gòu)造器。數(shù)組構(gòu)造器很容易讓人在它的參數(shù)上犯錯(cuò)。推薦對(duì)象構(gòu)造器不會(huì)有類似的問題,但是為了可讀性和統(tǒng)一性,我們應(yīng)該使用對(duì)象字面量。
Coding Standards
轉(zhuǎn)載自掘金 作者:Sivan 簡(jiǎn)介:前端開發(fā)的老新人,原生JavaScript的愛好者,致力做一名專業(yè)的開發(fā)者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 語(yǔ)境會(huì)做更加嚴(yán)格的錯(cuò)誤檢查。嚴(yán)格模式也確保了 javascript 代碼更加的健壯,運(yùn)行的也更加快速。
嚴(yán)格模式會(huì)阻止使用在未來(lái)很可能被引入的預(yù)留關(guān)鍵字。
你應(yīng)該在你的腳本中啟用嚴(yán)格模式,最好是在獨(dú)立的 立即執(zhí)行函數(shù) 中應(yīng)用它。避免在你的腳本第一行使用它而導(dǎo)致你的所有腳本都啟動(dòng)了嚴(yán)格模式,這有可能會(huì)引發(fā)一些第三方類庫(kù)的問題。
不推薦"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í)的邏輯操作
邏輯操作符 || 和 && 也可被用來(lái)返回布爾值。如果操作對(duì)象為非布爾對(duì)象,那每個(gè)表達(dá)式將會(huì)被自左向右地做真假判斷?;诖瞬僮?,最終總有一個(gè)表達(dá)式被返回回來(lái)。這在變量賦值時(shí),是可以用來(lái)簡(jiǎn)化你的代碼的。
不推薦if(!x) { if(!y) { x = 1; } else { x = y; } }推薦
x = x || y || 1;分號(hào)
總是使用分號(hào),因?yàn)殡[式的代碼嵌套會(huì)引發(fā)難以察覺的問題。當(dāng)然我們更要從根本上來(lái)杜絕這些問題[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é)果
1.JavaScript 錯(cuò)誤 —— 首先返回 42 的那個(gè) function 被第二個(gè)function 當(dāng)中參數(shù)傳入調(diào)用,接著數(shù)字 42 也被“調(diào)用”而導(dǎo)致出錯(cuò)。
2.八成你會(huì)得到 ‘no such property in undefined’ 的錯(cuò)誤提示,因?yàn)樵谡鎸?shí)環(huán)境中的調(diào)用是這個(gè)樣子:xffVersion, ieVersion().
3.die 總是被調(diào)用。因?yàn)閿?shù)組減 1 的結(jié)果是 NaN,它不等于任何東西(無(wú)論 resultOfOperation 是否返回 NaN)。所以最終的結(jié)果是 die() 執(zhí)行完所獲得值將賦給 THINGS_TO_EAT.
切勿在語(yǔ)句塊內(nèi)聲明函數(shù),在 ECMAScript 5 的嚴(yán)格模式下,這是不合法的。函數(shù)聲明應(yīng)該在作用域的頂層。但在語(yǔ)句塊內(nèi)可將函數(shù)申明轉(zhuǎn)化為函數(shù)表達(dá)式賦值給變量。
不推薦if (x) { function foo() {} }推薦
if (x) { var foo = function() {}; }不要使用eval函數(shù)
eval() 不但混淆語(yǔ)境還很危險(xiǎn),總會(huì)有比這更好、更清晰、更安全的另一種方案來(lái)寫你的代碼,因此盡量不要使用 eval 函數(shù)。
數(shù)組和對(duì)象字面量1.用數(shù)組和對(duì)象字面量來(lái)代替數(shù)組和對(duì)象構(gòu)造器。數(shù)組構(gòu)造器很容易讓人在它的參數(shù)上犯錯(cuò)。
不推薦//數(shù)組長(zhǎng)度3 var a1 = new Array(x1, x2, x3); //數(shù)組長(zhǎng)度2 var a2 = new Array(x1, x2); //如果x1是一個(gè)自然數(shù),那么它的長(zhǎng)度將為x1 //如果x1不是一個(gè)自然數(shù),那么它的長(zhǎng)度將為1 var a3 = new Array(x1); var a4 = new Array();
正因如此,如果將代碼傳參從兩個(gè)變?yōu)橐粋€(gè),那數(shù)組很有可能發(fā)生意料不到的長(zhǎng)度變化。為避免此類怪異狀況,請(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的快捷方法)
用三元操作符分配或返回語(yǔ)句。在比較簡(jiǎn)單的情況下使用,避免在復(fù)雜的情況下使用。沒人愿意用 10 行三元操作符把自己的腦子繞暈。
不推薦if(x === 10) { return "valid"; } else { return "invalid"; }推薦
return x === 10 ? "valid" : "invalid";for循環(huán)
使用for循環(huán)過程中,數(shù)組的長(zhǎng)度,使用一個(gè)變量來(lái)接收,這樣有利于代碼執(zhí)行效率得到提高,而不是每走一次循環(huán),都得重新計(jì)算數(shù)組長(zhǎng)度
不推薦for(var i=0;i推薦 for(var i=0,len=arr.length;i重復(fù)的DOM操作 重復(fù)的dom操作,使用一個(gè)變量來(lái)進(jìn)行接收很有必要,而不是頻繁的去操作dom樹,這對(duì)性能與代碼的整潔及易維護(hù)性帶來(lái)不好的影響。
不推薦$(".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://systransis.cn/yun/82731.html
摘要:注本文算是筆者對(duì)規(guī)范翻譯學(xué)習(xí)筆記,之后會(huì)陸續(xù)翻譯剩余的規(guī)范,可能翻譯的有錯(cuò)誤的地方,希望讀者能夠指正,非常感謝什么是是標(biāo)準(zhǔn)建議的簡(jiǎn)寫,是由組織框架交互操作組織提出。的工作是尋找項(xiàng)目之間的共性,以及讓開發(fā)者能更好協(xié)同工作的方式。 注:本文算是筆者對(duì)PSR規(guī)范翻譯/學(xué)習(xí)筆記,之后會(huì)陸續(xù)翻譯剩余的規(guī)范,可能翻譯的有錯(cuò)誤的地方,希望讀者能夠指正,非常感謝. 什么是PSR? ? ??? PSR是...
摘要:公認(rèn)規(guī)范總結(jié)規(guī)范中文版大部分來(lái)源翻譯部分包含例子,附錄包含了一些規(guī)范的實(shí)現(xiàn)基本編碼標(biāo)準(zhǔn)編碼風(fēng)格指南日志接口規(guī)范自動(dòng)加載規(guī)范規(guī)范英文版未使用草案已棄用規(guī)范原理實(shí)現(xiàn)實(shí)現(xiàn)自動(dòng)加載實(shí)現(xiàn)原理資料來(lái)源與參考 PSR公認(rèn)規(guī)范總結(jié) PSR規(guī)范中文版(大部分來(lái)源google翻譯)(cn) 部分psr包含例子,附錄包含了一些規(guī)范的實(shí)現(xiàn) PSR-1:基本編碼標(biāo)準(zhǔn) PSR-2:編碼風(fēng)格指南 PSR-3:日志...
摘要:今天這篇分享將簡(jiǎn)單地梳理一下規(guī)范,并介紹一個(gè)代碼檢查工具,結(jié)合以及進(jìn)行實(shí)踐。目前流行的一些規(guī)范是的簡(jiǎn)寫,由組織制定的規(guī)范,是開發(fā)的實(shí)踐標(biāo)準(zhǔn)。目前已表決通過了套標(biāo)準(zhǔn),已經(jīng)得到大部分框架的支持和認(rèn)可。 > 作為一個(gè)新手,寫出規(guī)范的代碼也是一門必修課,除了閱讀相應(yīng)的代碼規(guī)范文檔之外,充分利用相關(guān)的工具能使得進(jìn)階之路事半功倍。今天這篇分享將簡(jiǎn)單地梳理一下 PHP 規(guī)范,并介紹一個(gè)代碼檢查工具 ...
摘要:標(biāo)準(zhǔn)規(guī)范簡(jiǎn)介是的簡(jiǎn)寫,由組織制定的規(guī)范,是開發(fā)的實(shí)踐標(biāo)準(zhǔn)。具體標(biāo)準(zhǔn)有有了統(tǒng)一編碼風(fēng)格規(guī)范,更有利于查看和學(xué)習(xí)各個(gè)框架或類庫(kù),不不需要每次都適應(yīng)新的編碼風(fēng)格。同時(shí)在開發(fā)團(tuán)隊(duì)內(nèi)部使用統(tǒng)一的編碼規(guī)范更有利于代碼審查版本控制團(tuán)隊(duì)內(nèi)部交流。 PHP 標(biāo)準(zhǔn)規(guī)范 PSR PSR 簡(jiǎn)介 PSR 是 PHP Standard Recommendations 的簡(jiǎn)寫,由 PHP FIG 組織制定的 PHP...
摘要:探測(cè)器的代碼就是寫的,真厲害 New Horizon 探測(cè)器的代碼就是 JPL 寫的,真厲害 http://pixelscommander.com/wp-content/uploads/2014/12/P10.pdf Gerard J. Holzmann NASA/JPL Laboratory for Reliable Software Pasadena, CA 91109 Mo...
閱讀 759·2023-04-26 01:30
閱讀 3309·2021-11-24 10:32
閱讀 2197·2021-11-22 14:56
閱讀 1994·2021-11-18 10:07
閱讀 563·2019-08-29 17:14
閱讀 636·2019-08-26 12:21
閱讀 3115·2019-08-26 10:55
閱讀 2951·2019-08-23 18:09