整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在之前的一篇文章《前端開發(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)系。
