資訊專(zhuān)欄INFORMATION COLUMN
摘要：希望能通過(guò)理解的模塊化，窺探出模塊化的意義與思想。本文僅解析模塊化思想與技巧，構(gòu)建工具與動(dòng)態(tài)樣式語(yǔ)言本身這兩樣是必不可少，篇幅有限就不展開(kāi)討論了。
前言
前端模塊化是個(gè)非常大的話(huà)題了，我們可以簡(jiǎn)單的分為html模塊化、javascript模塊化、css模塊化；那么我們先從css模塊化開(kāi)始，css模塊化基礎(chǔ)卻必不可少。希望能通過(guò)理解css的模塊化，窺探出模塊化的意義與思想。
提綱當(dāng)項(xiàng)目稍微復(fù)雜點(diǎn)的時(shí)候，項(xiàng)目迭代時(shí)，css的編寫(xiě)會(huì)讓人痛苦不已，css模塊化可以讓項(xiàng)目中的樣式,管理起來(lái)優(yōu)雅、輕松。
本文僅解析css模塊化思想與技巧，構(gòu)建工具與動(dòng)態(tài)樣式語(yǔ)言本身這兩樣是必不可少，篇幅有限就不展開(kāi)討論了。
事例中使用sass作為參考。
對(duì)于一個(gè)迭代周期長(zhǎng)的復(fù)雜項(xiàng)目，甚至只是頻繁更改的小項(xiàng)目（你懂的），樣式的維護(hù)都是前端無(wú)法言說(shuō)的痛。大致可以歸于以下幾類(lèi)
手段選擇器繁瑣冗長(zhǎng)
命名沖突
層級(jí)結(jié)構(gòu)不清晰
代碼難以復(fù)用
...
解決這些問(wèn)題的核心思想在于代碼復(fù)用，沒(méi)有或者不用動(dòng)態(tài)樣式語(yǔ)言構(gòu)建項(xiàng)目時(shí)，往往也能看到大家會(huì)提取出公共的樣式，比如common.css、form.css、fxckpm.css等等。但是純粹的靠css靜態(tài)的文件結(jié)構(gòu)重組，也只能是輕微緩解了以上的各個(gè)癥狀。
用公用樣式，而各個(gè)公共樣式對(duì)于不同頁(yè)面來(lái)說(shuō)，有可能太冗余，有可能還缺少許多東西，那么最終項(xiàng)目依然抵不過(guò)時(shí)間的摧殘，慢慢狗帶。
曙光得利于構(gòu)建工具和動(dòng)態(tài)樣式語(yǔ)言，css的模塊化變得容易操作。
干翻一切的武器：@import,面向?qū)ο笫降木幋a方式，變量、函數(shù)、繼承等等。
這里要提一句的是，很早css本身就支持@import，但是生產(chǎn)環(huán)境里直接寫(xiě)在css里，對(duì)性能有影響，瀏覽器表現(xiàn)也不一致，具體問(wèn)題請(qǐng)度娘谷嫂。
說(shuō)了那么多，接下來(lái)就從代碼與項(xiàng)目結(jié)構(gòu)上，逐步分析如何模塊化。
我這里根目錄為scss,下面貼出一個(gè)簡(jiǎn)單的模塊化的目錄結(jié)構(gòu)。
PS:scss文件前加上下劃線(xiàn)_是表示此文件不需要生成對(duì)應(yīng)的css文件。@import時(shí)可忽略文件名中的下劃線(xiàn)直接引用
│ style.scss
│ _main.scss
│
├─base // 底層文件目錄，組件的基本屬性，最小零件單位的倉(cāng)庫(kù)
│ │ _reset.scss
│ │
│ ├─mixin // 定義@mixin
│ │ _border-radius.scss
│ │ _clearfix.scss
│ │ _flex.scss
│ │ _gradients.scss
│ │ _set-arrow.scss
│ │ _set-onepx.scss
│ │ _text-overflow.scss
│ │
│ └─variable // 元素的基本變量
│ _color.scss
│ _global.scss
│ _size.scss
│
└─widget // 組件 根據(jù)最小零件組合成的頁(yè)面元素組件
_agree.scss
_animation.scss
_btn.scss
_effect.scss
_form.scss
解析
代碼復(fù)用依舊是我們最核心的目的，復(fù)用的同時(shí)要結(jié)構(gòu)清晰方便維護(hù)，以達(dá)到所謂的模塊化。
上面介紹了文件夾的結(jié)構(gòu)，接下來(lái)我們分析一下各個(gè)目錄結(jié)構(gòu)代表了什么。
我們從組件目錄widget里開(kāi)始分析,這里放的文件都是我們所需要的頁(yè)面元素組件，有_btn.scss（頁(yè)面按鈕）_form.scss（表單元素）_animation.scss（頁(yè)面動(dòng)畫(huà)）等等。
以 widget文件夾 下的 _btn.scss 為例
有可調(diào)用的class、id、animation 等等，生成后可以直接或繼承使用。
這些組件高矮胖瘦誰(shuí)來(lái)定義呢？事例中放在了base文件夾中。
和屬性相關(guān)的東西全部在base文件夾下。
以 mixin文件夾 下的 _border-radius.scss 為例
以 variable文件夾 下的 _color.scss 為例
這些文件定義了元素的基本屬性，color、size、border等等。
只定義了元素的屬性，不可直接使用。
這里需要注意的是，通常元素屬性會(huì)分為兩類(lèi)：
variable是簡(jiǎn)單的變量定義如$red:#ff0000;
而mixin里放的是更為復(fù)雜的屬性，如border,需要根據(jù)多個(gè)參數(shù)定義出此屬性。
widget里的組件只是定義了可復(fù)用的，統(tǒng)一的元素樣式，還是需要進(jìn)行補(bǔ)充、精修以供頁(yè)面實(shí)際使用。上面_main.scss就是這個(gè)作用。
最后我們將頁(yè)面需要的組件，加上對(duì)應(yīng)頁(yè)面UI做了補(bǔ)充和完善的_main.scss完成封裝。
style.scss
@charset "utf-8"; @import "./base/reset"; @import "./widget/animation"; @import "./widget/btn"; @import "./widget/form"; @import "./widget/agree"; @import "./widget/effect"; @import "main";
style.scss文件即使我們最終需要的生成文件，最終的文件和補(bǔ)充文件可能是多個(gè)，本文只以一個(gè)頁(yè)面需要引用為例，所以最后只有一個(gè)_main.scss和style.scss，實(shí)際情況下這可能是不夠的。
深入技巧簡(jiǎn)單的介紹了css模塊化的實(shí)現(xiàn)。強(qiáng)化相關(guān)能力需要多看多想多做，拿到設(shè)計(jì)圖時(shí)要多思考，不要抄起鍵盤(pán)就是干。多看看目前開(kāi)源UI庫(kù)的源碼，如bootstrap、Foundation、material等等的源碼,看看他們是如何組織相關(guān)文件。
在命名上也是非常需要注意的點(diǎn)，篇幅有限不展開(kāi)。
請(qǐng)查閱： 編碼規(guī)范：http://codeguide.bootcss.com/，
網(wǎng)易NEC：http://nec.netease.com/
本文的項(xiàng)目結(jié)構(gòu)不具備代表性，針對(duì)不同的項(xiàng)目我們需要根據(jù)實(shí)際情況定制更加容易維護(hù)的模塊化結(jié)構(gòu)。
總結(jié)如果你的項(xiàng)目中有十個(gè)甚至更多的頁(yè)面，頁(yè)面元素風(fēng)格相同或相近的，那么你可以用模塊化的思想，寫(xiě)一個(gè)定制的UI庫(kù)。以后若此項(xiàng)目頁(yè)面風(fēng)格主題更改時(shí)，那么你可以選擇毆打產(chǎn)品經(jīng)理讓其撤銷(xiāo)需求，或者只需要添加新組件、修改某些變量即可優(yōu)雅的完成迭代工作。
歡迎討論，歡迎大佬焦作人！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/112908.html
摘要：看完視頻初步認(rèn)識(shí)了一下，以及模塊化開(kāi)發(fā)的概念，在此做一下總結(jié)。所以應(yīng)該將功能抽象成模塊。并且非常耗性能解決辦法，在滾動(dòng)條正在運(yùn)動(dòng)或者已經(jīng)到達(dá)目的地，就不應(yīng)該執(zhí)行動(dòng)畫(huà)。 前言：在慕課網(wǎng)上跟著視頻《側(cè)邊工具欄開(kāi)發(fā)》做了一遍，用到了jquery操作DOM，其中，用requirejs管理模塊依賴(lài)，然后自定義了兩個(gè)模塊它們都依賴(lài)jquery，并且其中一個(gè)自定義模塊依賴(lài)另一個(gè)，所以要暴露出接口。看...
摘要：鑫大佬這篇博文的重點(diǎn)還是在漸變，而我需要?jiǎng)討B(tài)平緩連續(xù)得實(shí)現(xiàn)顏色的分配，比如原本整個(gè)環(huán)是綠色，然后慢慢地被紅色占了，而且整個(gè)過(guò)程要平滑。 最近的小程序項(xiàng)目有個(gè)設(shè)計(jì)圖要求做一個(gè)圓環(huán)，兩種顏色分配，分別代表可用金額和凍結(jié)金額。要是就直接這么顯示，感覺(jué)好像挺沒(méi)水平？？于是我決定做個(gè)動(dòng)態(tài)！ 在mdn把新特性gradients(漸變)、transitions(過(guò)渡)、 animations(動(dòng)畫(huà))...
摘要：鑫大佬這篇博文的重點(diǎn)還是在漸變，而我需要?jiǎng)討B(tài)平緩連續(xù)得實(shí)現(xiàn)顏色的分配，比如原本整個(gè)環(huán)是綠色，然后慢慢地被紅色占了，而且整個(gè)過(guò)程要平滑。 最近的小程序項(xiàng)目有個(gè)設(shè)計(jì)圖要求做一個(gè)圓環(huán)，兩種顏色分配，分別代表可用金額和凍結(jié)金額。要是就直接這么顯示，感覺(jué)好像挺沒(méi)水平？？于是我決定做個(gè)動(dòng)態(tài)！ 在mdn把新特性gradients(漸變)、transitions(過(guò)渡)、 animations(動(dòng)畫(huà))...
摘要：為什么要采用面向?qū)ο缶幊探鉀Q問(wèn)題更容易設(shè)計(jì)計(jì)算機(jī)程序就是為了解決人類(lèi)的問(wèn)題。面向?qū)ο缶幊绦枰獙?duì)業(yè)務(wù)及代碼的架構(gòu)是有一定的要求的。 1. 編程方式 我們目前的編程方式大體可以有以下三種編程方式： 順序編程 過(guò)程式編程 面向?qū)ο缶幊? 在講面向?qū)ο缶幊虝r(shí)先講一下什么是順序編程，什么是過(guò)程式編程，什么是面向?qū)ο缶幊蹋? 順序編程： 就是只用一個(gè)單線(xiàn)程去執(zhí)行一段代碼，執(zhí)行過(guò)程根據(jù)代碼依次從上...
摘要：我們還想要的顏色我們通過(guò)下面命令行可以做到觀察模式我們不想每一次項(xiàng)目變化都要手動(dòng)編譯可以緩存兩次編譯之間沒(méi)有變化的模塊和輸出文件。開(kāi)發(fā)服務(wù)器使用開(kāi)發(fā)服務(wù)器開(kāi)發(fā)體驗(yàn)會(huì)更好這將在本地啟動(dòng)一個(gè)端口的服務(wù)，指向靜態(tài)文件以及自動(dòng)編譯。 原文英文版來(lái)自webpack官網(wǎng) demo代碼 本文地址 歡迎瀏覽 這是一篇通過(guò)一個(gè)小例子給你介紹webpack的文章 你可以通過(guò)這篇文章了解到： 如...
閱讀 2446·2021-10-13 09:40
閱讀 3334·2019-08-30 13:46
閱讀 1120·2019-08-29 14:05
閱讀 2952·2019-08-29 12:48
閱讀 3654·2019-08-26 13:28
閱讀 2142·2019-08-26 11:34
閱讀 2277·2019-08-23 18:11
閱讀 1156·2019-08-23 12:26
