在之前的一篇文章《前端開發(fā)過程中的HTML規(guī)范,來學(xué)習(xí)一下吧》中,我們有講過前端開發(fā)過程中需要注意到的HTML規(guī)范問題,今天這篇文章我們繼續(xù)來看下關(guān)于Javascript的規(guī)范問題。
Javascript
我們總是會在Javascript文件中定義變量,但是一不留神就會將其定義成全局變量,如果引用的外部JS文件較多,很容易出現(xiàn)全局變量污染的情況。
我們不推薦總是在全局空間定義變量的行為,因?yàn)樗性谌挚臻g定義的變量都是掛在window對象上,很容易出現(xiàn)變量污染,如下所示。
不推薦-全局變量
IIFE就可以防止出現(xiàn)全局變量污染的情況,IIFE是立即執(zhí)行的函數(shù)表達(dá)式,在IIFE內(nèi)部會創(chuàng)建一個(gè)封閉的作用域,內(nèi)部定義的變量不會影響外部的執(zhí)行環(huán)境,而且可以通過參數(shù)傳遞的形式引用外部變量,最重要的一點(diǎn)是在函數(shù)執(zhí)行完后會立即釋放占用的內(nèi)存。
我們推薦使用下面這種寫法。
推薦寫法-IIFE
為了避免全局變量的干擾,我們建議所有腳本文件都從IIFE開始。
我們都知道之所以叫立即執(zhí)行的函數(shù)表達(dá)式,是因?yàn)樵诤瘮?shù)表達(dá)式后面會多一個(gè)執(zhí)行的括號。這個(gè)執(zhí)行的括號可以出現(xiàn)在兩個(gè)地方,不管是在內(nèi)部還是外部,都是有效的。但是為了讓整個(gè)函數(shù)表達(dá)式看起來像一個(gè)整體,我們推薦將括號寫在里面。
因此我們不推薦以下寫法。
不推薦寫法
而推薦以下寫法。
推薦寫法
同樣,我們可以通過參數(shù)傳遞的形式引用外部變量。
引用外部變量
我們都知道在ES5中是沒有塊級作用域概念的,只有函數(shù)級作用域,而且由于變量提升的存在,在函數(shù)內(nèi)部聲明的變量都會提升至函數(shù)頂部,這就會造成一些難以預(yù)料的問題。
首先我們來看看變量提升是什么樣的情況?看看下面一段代碼。
變量提升
上面這段代碼返回的結(jié)果是undefined,并不是'Hello Shenzhen',這是因?yàn)樽兞縱會在函數(shù)內(nèi)部被提升至函數(shù)頂部,實(shí)際執(zhí)行的其實(shí)是下面這段代碼。
實(shí)際執(zhí)行
為了降低變量提升所帶來的編碼風(fēng)險(xiǎn),我們應(yīng)該手動(dòng)聲明定義的變量和方法,并把其放在函數(shù)頂部。
我們不推薦以下寫法。
不推薦寫法
我們推薦以下寫法。
推薦寫法
在編寫判斷相等類型的條件語句時(shí),總是使用嚴(yán)格相等(===),這樣可以避免Javascript在執(zhí)行類型轉(zhuǎn)換時(shí)帶來的問題。
我們看下面一個(gè)例子,定義一個(gè)函數(shù),傳入一個(gè)數(shù)字,如果等于5,則將這個(gè)數(shù)加5返回。如果不使用嚴(yán)格等于,在傳入一個(gè)字符串'5'后,會返回'55'。
沒有使用嚴(yán)格相等
因此,我們推薦在使用相等判斷時(shí)都采用嚴(yán)格相等(===)。
強(qiáng)烈建議在所有結(jié)束語句后面加上分號,如果不加上分號會引起一些很難發(fā)現(xiàn)的問題。我們看看下面一段代碼。
代碼
在上面這段代碼執(zhí)行后,我們發(fā)現(xiàn)即使resultOperation()函數(shù)返回-1,與-1相等,后面的method方法仍然被調(diào)用。
這是因?yàn)樵谏厦娑x的數(shù)組末尾沒有加上分號,這個(gè)數(shù)組會與下面一行的-1當(dāng)做表達(dá)式執(zhí)行,任何非空數(shù)組-1都會返回NaN,NaN與resultOperation的返回結(jié)果-1不相等,因此后面的method方法會被執(zhí)行。
省略分號不寫,不只是會出現(xiàn)上述的問題,還有很多,這里不一一列舉。
因此,建議在每個(gè)結(jié)尾的語句后加上分號,養(yǎng)成一個(gè)好的習(xí)慣。
閉包作為前端面試題中必不可少的知識點(diǎn)是應(yīng)該要掌握的,而且在前端開發(fā)中經(jīng)常會涉及到,關(guān)于閉包的問題,在我寫的一篇文章《前端面試中不可逃避的閉包問題,你真的了解嗎?》中有詳細(xì)介紹,大家可以好好看下。
今天這篇文章詳細(xì)的介紹了在前端開發(fā)過程中涉及到的Javascript規(guī)范問題,可能還不夠全面,大家可以自行補(bǔ)充。
在之前的一篇文章《前端開發(fā)過程中的HTML規(guī)范,來學(xué)習(xí)一下吧》中,我們有講過前端開發(fā)過程中需要注意到的HTML規(guī)范問題,今天這篇文章我們繼續(xù)來看下關(guān)于Javascript的規(guī)范問題。
Javascript
我們總是會在Javascript文件中定義變量,但是一不留神就會將其定義成全局變量,如果引用的外部JS文件較多,很容易出現(xiàn)全局變量污染的情況。
我們不推薦總是在全局空間定義變量的行為,因?yàn)樗性谌挚臻g定義的變量都是掛在window對象上,很容易出現(xiàn)變量污染,如下所示。
不推薦-全局變量
IIFE就可以防止出現(xiàn)全局變量污染的情況,IIFE是立即執(zhí)行的函數(shù)表達(dá)式,在IIFE內(nèi)部會創(chuàng)建一個(gè)封閉的作用域,內(nèi)部定義的變量不會影響外部的執(zhí)行環(huán)境,而且可以通過參數(shù)傳遞的形式引用外部變量,最重要的一點(diǎn)是在函數(shù)執(zhí)行完后會立即釋放占用的內(nèi)存。
我們推薦使用下面這種寫法。
推薦寫法-IIFE
為了避免全局變量的干擾,我們建議所有腳本文件都從IIFE開始。
我們都知道之所以叫立即執(zhí)行的函數(shù)表達(dá)式,是因?yàn)樵诤瘮?shù)表達(dá)式后面會多一個(gè)執(zhí)行的括號。這個(gè)執(zhí)行的括號可以出現(xiàn)在兩個(gè)地方,不管是在內(nèi)部還是外部,都是有效的。但是為了讓整個(gè)函數(shù)表達(dá)式看起來像一個(gè)整體,我們推薦將括號寫在里面。
因此我們不推薦以下寫法。
不推薦寫法
而推薦以下寫法。
推薦寫法
同樣,我們可以通過參數(shù)傳遞的形式引用外部變量。
引用外部變量
我們都知道在ES5中是沒有塊級作用域概念的,只有函數(shù)級作用域,而且由于變量提升的存在,在函數(shù)內(nèi)部聲明的變量都會提升至函數(shù)頂部,這就會造成一些難以預(yù)料的問題。
首先我們來看看變量提升是什么樣的情況?看看下面一段代碼。
變量提升
上面這段代碼返回的結(jié)果是undefined,并不是'Hello Shenzhen',這是因?yàn)樽兞縱會在函數(shù)內(nèi)部被提升至函數(shù)頂部,實(shí)際執(zhí)行的其實(shí)是下面這段代碼。
實(shí)際執(zhí)行
為了降低變量提升所帶來的編碼風(fēng)險(xiǎn),我們應(yīng)該手動(dòng)聲明定義的變量和方法,并把其放在函數(shù)頂部。
我們不推薦以下寫法。
不推薦寫法
我們推薦以下寫法。
推薦寫法
在編寫判斷相等類型的條件語句時(shí),總是使用嚴(yán)格相等(===),這樣可以避免Javascript在執(zhí)行類型轉(zhuǎn)換時(shí)帶來的問題。
我們看下面一個(gè)例子,定義一個(gè)函數(shù),傳入一個(gè)數(shù)字,如果等于5,則將這個(gè)數(shù)加5返回。如果不使用嚴(yán)格等于,在傳入一個(gè)字符串'5'后,會返回'55'。
沒有使用嚴(yán)格相等
因此,我們推薦在使用相等判斷時(shí)都采用嚴(yán)格相等(===)。
強(qiáng)烈建議在所有結(jié)束語句后面加上分號,如果不加上分號會引起一些很難發(fā)現(xiàn)的問題。我們看看下面一段代碼。
代碼
在上面這段代碼執(zhí)行后,我們發(fā)現(xiàn)即使resultOperation()函數(shù)返回-1,與-1相等,后面的method方法仍然被調(diào)用。
這是因?yàn)樵谏厦娑x的數(shù)組末尾沒有加上分號,這個(gè)數(shù)組會與下面一行的-1當(dāng)做表達(dá)式執(zhí)行,任何非空數(shù)組-1都會返回NaN,NaN與resultOperation的返回結(jié)果-1不相等,因此后面的method方法會被執(zhí)行。
省略分號不寫,不只是會出現(xiàn)上述的問題,還有很多,這里不一一列舉。
因此,建議在每個(gè)結(jié)尾的語句后加上分號,養(yǎng)成一個(gè)好的習(xí)慣。
閉包作為前端面試題中必不可少的知識點(diǎn)是應(yīng)該要掌握的,而且在前端開發(fā)中經(jīng)常會涉及到,關(guān)于閉包的問題,在我寫的一篇文章《前端面試中不可逃避的閉包問題,你真的了解嗎?》中有詳細(xì)介紹,大家可以好好看下。
今天這篇文章詳細(xì)的介紹了在前端開發(fā)過程中涉及到的Javascript規(guī)范問題,可能還不夠全面,大家可以自行補(bǔ)充。
言
也許你曾經(jīng)看到過很多樣式命名規(guī)則,也參考了我們制定的命名規(guī)范,但是大部分的具體樣式還是不知道如何命名,主要思想或者標(biāo)準(zhǔn)是什么,也就是前面.m-panel-后面的應(yīng)該如何命名,子模塊與父模塊依賴關(guān)系怎么體現(xiàn),等等類似的問題。如何友好科學(xué)的解決問題,能夠與最大程度的降低我們后期對樣式的維護(hù)難度。
本文將帶你了解目前前端基本的命名規(guī)則,各自的優(yōu)劣,然后我們會給出具體的方案。
一 指定的格式
駝峰式命名
類似于.mLayerTitle這樣形式的,但這個(gè)僅僅是格式,不代表命名規(guī)則,和應(yīng)該如何去思考用什么名稱。
以-格式分割開
類似于.m-layer-title ,這種格式也是很常見的。同樣也是只有格式,沒有命名方式的核心思想的。
二 樣式組織思想
BEM(block+element+modify)
塊級,元素,修改,它的主要設(shè)計(jì)思路是需要定義塊級,對于子元素分別利用_區(qū)分,對于修飾的部分增加--實(shí)現(xiàn)。對于比較復(fù)雜的塊級元素用-實(shí)現(xiàn)連接。舉證如下:
site-nav site-nav_logo site-nav_login site-nav--active site-nav--active
OOCSS
SMACSS 可擴(kuò)展和模塊化結(jié)構(gòu)的 CSS
SMACSS是可擴(kuò)展和模塊化結(jié)構(gòu)CSS的簡稱. 該方法的主要目標(biāo)是減少代碼量并簡化代碼維護(hù).
Jonathan Snook把它歸納為5個(gè)部分:
Atomic CSS 原子 CSS
MCSS 多層 CSS
AMCSS 屬性模塊 CSS
AMCSS是"屬性模塊CSS"的縮寫.
先讓我們來看一個(gè)例子:
<div class="button button--large button--blue">Button</div>
如果這樣寫CSS類的鏈, 是有點(diǎn)復(fù)雜的, 所以讓我們通過屬性來為這些CSS類分組. 分組后就變成下面這樣了:
<div button="large blue">Button</div>
為了避免屬性名稱沖突, 好的方式是為屬性加上命名空間. 然后, 我們的button代碼就變成這樣了:
<div am-button="large blue">Button</div>
如果您使用了驗(yàn)證器去檢查你的代碼, 并且它(驗(yàn)證器)不喜歡類似于am-button這樣的屬性名稱, 你可以把屬性的命名空間(am-)換成data-. 例如: data-button.
使用一個(gè)不是那么常用的選擇器"~="(IE7以上都支持), 它類似于CSS類屬性: 所有屬性值包含指定的單詞(以空格分開)的元素都會被選中. 所以, 選擇器[class ~= "link"][class~= "button"]相對于選擇器a.link.button. 這種選擇器(選擇方式)同樣適用于屬性.
因此, CSS代碼就可以這樣寫:
/* CSS類選擇器 */ .button { ... } .button--large { ... } .button--blue { ... } /* CSS屬性選擇器 */ [am-button] { ... } [am-button ~= "large"] { ... } [am-button ~= "blue"] { ... }
如果您認(rèn)為這段代碼十分的不尋常, 可以嘗試使用較為溫和的AMCSS 形式:
<div am-button am-button-large am-button-blue>Button</div>
FUN
FUN代表的是"Flat hierarchy of selectors, Utility styles, Name-spaced components."
每個(gè)名稱前面的字母都代表著一定的原則:
F, 選擇器的扁平的層次結(jié)構(gòu): 建議使用CSS類選擇元素(items), 避免不必要的級聯(lián), 杜絕使用id.
U, 實(shí)用(功能)樣式: 鼓勵(lì)創(chuàng)建原子(atomic)樣式來解決典型的修正(微調(diào))任務(wù), 例如: w100表示width: 100%; 或者fr表示float: right;
N, 名稱分割組件: Ben建議添加命名空間來指定特定模塊元素的樣式. 這種方法將避免類的中重疊.
一些開發(fā)人員注意到, 使用這種原則來編寫CSS代碼是非常方便和容易維護(hù)的; 在某種程度上, 作者汲取了SMACSS的精華, 以簡單并且簡潔的方式闡述了這一技術(shù).
這種方式對項(xiàng)目和代碼結(jié)構(gòu)施加了很多的要求, 它僅僅建立了記錄選擇器的首選形式以及它們在標(biāo)記中的使用方式. 但在小型項(xiàng)目中, 這些規(guī)則足以幫助構(gòu)建高質(zhì)量的CSS代碼.
結(jié)論
這些樣式的的設(shè)計(jì)思想中沒有完全符合實(shí)際需求的,項(xiàng)目實(shí)踐中建議根據(jù)自己的業(yè)務(wù)以及成員需求,選擇合適的樣式明明規(guī)則,可以是上面一種,也可以是其中幾種混合的結(jié)果,最終目的都是讓你的樣式便于維護(hù)而已。
這里,個(gè)人建議的是用SMAC+Atomic,并且綜合歸結(jié)到了基本的css代碼規(guī)范中。
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。