整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          你應(yīng)該要掌握的,前端開發(fā)中的Javascript規(guī)范


          在之前的一篇文章《前端開發(fā)過程中的HTML規(guī)范,來學(xué)習(xí)一下吧》中,我們有講過前端開發(fā)過程中需要注意到的HTML規(guī)范問題,今天這篇文章我們繼續(xù)來看下關(guān)于Javascript的規(guī)范問題。

          Javascript

          全局命名與IIFE

          我們總是會在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用法

          為了避免全局變量的干擾,我們建議所有腳本文件都從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ì)介紹,大家可以好好看下。

          結(jié)束語

          今天這篇文章詳細(xì)的介紹了在前端開發(fā)過程中涉及到的Javascript規(guī)范問題,可能還不夠全面,大家可以自行補(bǔ)充。


          在之前的一篇文章《前端開發(fā)過程中的HTML規(guī)范,來學(xué)習(xí)一下吧》中,我們有講過前端開發(fā)過程中需要注意到的HTML規(guī)范問題,今天這篇文章我們繼續(xù)來看下關(guān)于Javascript的規(guī)范問題。

          Javascript

          全局命名與IIFE

          我們總是會在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用法

          為了避免全局變量的干擾,我們建議所有腳本文件都從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ì)介紹,大家可以好好看下。

          結(jié)束語

          今天這篇文章詳細(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

          1. OOCSS是object-oriented CSS的縮寫. 主要有兩個(gè)意思:
          2. 結(jié)構(gòu)和設(shè)計(jì)分離
          3. 容器和內(nèi)容分離
          4. 使用這種結(jié)構(gòu), 開發(fā)人員獲得可以在不同地方使用的CSS類.
          5. 通常這時(shí)候總是會有兩個(gè)消息(一個(gè)好消息和一個(gè)不好的消息):
          6. 好消息: 通過復(fù)用來減少代碼量(DRY原則)
          7. 不好的消息: 維護(hù)非常困難(復(fù)雜). 當(dāng)你修改某一個(gè)具體的元素的樣式的時(shí)候, 大部分情況下, 除了修改CSS本身(因?yàn)槎鄶?shù)的CSS類是通用的), 你還不得不添加更多的標(biāo)記類(markup).
          8. 另外, OOCSS本身并不提供具體的規(guī)則, 而是抽象的建議, 所以這種方法在生產(chǎn)中的最終結(jié)果會有所不同.
          9. 事實(shí)上, OOCSS的想法啟發(fā)了其他人創(chuàng)建自己的, 更具體的代碼結(jié)構(gòu)化方式.
          10. 具體的延伸就是我們將全局樣式,布局、間距、模塊樣式區(qū)分開來,并輔以科學(xué)準(zhǔn)確約定的方式。

          SMACSS 可擴(kuò)展和模塊化結(jié)構(gòu)的 CSS

          SMACSS是可擴(kuò)展和模塊化結(jié)構(gòu)CSS的簡稱. 該方法的主要目標(biāo)是減少代碼量并簡化代碼維護(hù).

          Jonathan Snook把它歸納為5個(gè)部分:

          1. 基本規(guī)則(Base rules): 為網(wǎng)址的主要元素設(shè)置樣式, 如body, input, button, ul, ol等. 在這一步中, 我們主要使用HTML標(biāo)簽和屬性選擇器, 在特殊情況下, 使用CSS類(如: 如果您有JavaScript-Style選擇);
          2. 布局規(guī)則(Layout rules): 主要是些全局元素, 頂部, 頁腳, 邊欄等模塊的大小. Jonathan建議使用ID選擇器, 因?yàn)檫@些模塊不太可能在同一個(gè)頁面上出現(xiàn)多次. 然而, 本文作者認(rèn)為這是個(gè)很不好的習(xí)慣(每當(dāng)ID出現(xiàn)在樣式文中, 感覺世界頓時(shí)變得灰暗, 有一股莫名的哀傷).
          3. 模塊規(guī)則(Modules rules): 模塊(類似于卡片布局)可以在一個(gè)頁面中使用多次. 對于模塊CSS類, 不建議使用ID和tag選擇器(這是為了方便重用以及上下文獨(dú)立).
          4. 狀態(tài)規(guī)則(State rules): 在這一步中, 規(guī)定了模塊的各種狀態(tài)以及網(wǎng)站的基礎(chǔ)部分. 這是唯一允許使用"!important"的地方.
          5. 主題規(guī)則(Theme rules): 設(shè)計(jì)您可能需要更換的樣式.
          6. 我們推薦為屬于某個(gè)組的CSS類定義命名空間, 并為JavaScript中使用的CSS類使用單獨(dú)的命名空間.

          Atomic CSS 原子 CSS

          • Atomic CSS是CSS架構(gòu)的一種方法, 它的好處是寫出基于視覺功能的小的, 單用途CSS類.這種類通常也被稱為原子類。
          • 使用Atomic CSS, 為每個(gè)可重用的屬性創(chuàng)建單獨(dú)的CSS類. 例如, margin-top: 1px; 就可以創(chuàng)建一個(gè)類似于mt-1的CSS類, 或者width: 200px; 對應(yīng)的CSS類為w-200.這樣設(shè)計(jì)可以最大程度的統(tǒng)一頁面的共用樣式,便于管理,尤其在你采用了預(yù)處理器之后,可以使用繼承,拓展等方式快速使用某常用代碼段或者樣式模塊,最大程度的減少css代碼數(shù)量。
          • 存在的缺點(diǎn):
          • CSS類名是屬性名稱的描述, 而不是元素的自然語義. 這種想象很容易使人在開發(fā)過程中變得迷茫. 開發(fā)本身也十分容易復(fù)雜化.
          • 直接在HTML中進(jìn)行顯示設(shè)置.
          • 由于這些短板的存在, 這種做法遭到了大量的批評. 然而, 這種做法對于大型項(xiàng)目來說是有一定效果的.
          • 此外, Atomic CSS在各種框架中被用于校正元素樣式以及某些層(layers)的其他方法.

          MCSS 多層 CSS

          • MCSS指的是多層CSS(Multilayer CSS). 這種樣式寫法建議將樣式分成多個(gè)部分, 每個(gè)部分稱為層(layers).
          • 第0層或基礎(chǔ)(Zero layer or foundation), 負(fù)責(zé)重置瀏覽器樣式的代碼(如: reset.css或者normalize.css);
          • 基層(Base layer), 包括可重用元素的樣式: buttons, input, hints等等.
          • 項(xiàng)目層(Project layer), 包括單獨(dú)的模塊和"上下文" - 根據(jù)用戶端瀏覽器或用于瀏覽的設(shè)備, 用戶權(quán)限等對元素的樣式進(jìn)行調(diào)整.
          • 裝飾層(Cosmetic layer), 使用OOCSS風(fēng)格來書寫樣式, 對元素外觀做微小的調(diào)整. 建議僅留下影響外觀的風(fēng)格, 而不能破壞網(wǎng)站的布局(例如顏色和非關(guān)鍵縮進(jìn)等).
          • 層與層之間的交互層次是非常重要的:
          • 在基層(Base layer)中定義中性的樣式, 并且不影響其它層.
          • 基層(Base layer)中的元素只能影響基層的CSS類.
          • 項(xiàng)目層(Project layer)中的元素可以影響基層和項(xiàng)目層.
          • 裝飾層(Cosmetic layer)是以描述性O(shè)OCSS類("atomic"類)的形式進(jìn)行設(shè)計(jì), 不會影響其他CSS代碼, 而是在標(biāo)記中有選擇的使用.

          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ī)范中。


          主站蜘蛛池模板: 无码国产精品一区二区免费模式| 在线视频亚洲一区| 久久久无码一区二区三区 | 美女福利视频一区二区| 国产精品 一区 在线| 国产一区二区三区乱码在线观看| 国产在线精品一区二区三区直播 | 视频在线一区二区| 色窝窝无码一区二区三区 | 亚洲乱码一区av春药高潮| 无码国产精品一区二区免费vr| 国产未成女一区二区三区| 亚洲国产成人一区二区三区 | 久久毛片免费看一区二区三区| 国产微拍精品一区二区| 亚洲av永久无码一区二区三区 | 国产亚洲无线码一区二区| av无码免费一区二区三区| 国模少妇一区二区三区| 国产伦精品一区二区三区视频金莲| 波多野结衣一区二区三区高清在线 | 大屁股熟女一区二区三区| 日韩精品一区二区三区中文字幕| 无码人妻精品一区二区三区9厂 | 91午夜精品亚洲一区二区三区| 日本高清无卡码一区二区久久| 日本精品视频一区二区三区| 中文字幕一区二区三区人妻少妇| 国产在线无码视频一区二区三区| 福利一区国产原创多挂探花| 免费人人潮人人爽一区二区| 成人h动漫精品一区二区无码| 国模吧一区二区三区精品视频| 在线视频一区二区三区四区| 日本精品一区二区在线播放| 无码毛片一区二区三区中文字幕| 成人精品一区二区三区电影| 国产第一区二区三区在线观看| 色综合视频一区二区三区44| 国产乱码精品一区二区三区香蕉 | 国产在线精品一区二区高清不卡|