地址： 上海市靜安區(qū)共和新路4718弄10號(hào)樓2樓
熱線：400-166-3538
電話：19301461038
郵箱：sales@shyuanzhen.cn
最近被“模塊化”纏身，又是文章又是PPT的，被逼著想了很多相關(guān)的東西。整理下我這段時(shí)間對(duì)于“模塊化”的思考，大多都是我自己從事頁面重構(gòu)這份工作的經(jīng)驗(yàn)和理解，在一定程度上存在局限性，也希望自己能溫故而知新。
“模塊化”只是我們對(duì)于過去一直使用的技術(shù)、方法的一個(gè)新潮的稱謂，就像“Ajax”。不過做為頁面重構(gòu)發(fā)展的一種趨勢(shì)，越來越被大家重視，不自覺也滿口的“模塊化”，只是你真的理解什么是“模塊化”嗎？
什么是模塊化？
對(duì)“模塊化”的解釋，在 CNKI 中就有28種?？梢姟澳K化”思維使用的廣泛。最接近頁面重構(gòu)中的“模塊化”，現(xiàn)有的解釋應(yīng)該就是軟件開發(fā)中的解釋了。
先看一下百度詞條是怎么解釋“ ”的：
模 塊化是指解決一個(gè)復(fù)雜問題時(shí)自頂向下逐層把軟件系統(tǒng)劃分成若干模塊的過程。每個(gè)模塊完成一個(gè)特定的子功能，所有的模塊按某種方法組裝起來，成為一個(gè)整體， 完成整個(gè)系統(tǒng)所要求的功能。模塊具有以下幾種基本屬性：接口、功能、邏輯、狀態(tài)，功能、狀態(tài)與接口反映模塊的外部特性，邏輯反映它的內(nèi)部特性。在軟件的體 系結(jié)構(gòu)中，模塊是可組合、分解和更換的單元。
相關(guān)的書籍也蠻多的，有興趣的同學(xué)可以搜一下。需要強(qiáng)調(diào)一點(diǎn)，我們所借鑒的是一種思維的方式。
頁面制作為什么需要模塊化？
站點(diǎn)內(nèi)容越來越多、代碼越來越臃腫，漸漸影響到了客戶端的體驗(yàn)（主要是打開速度），影響到了維護(hù)的效率。有什么方法可以解決這些問題呢？
我 們很容易就想到：減少代碼冗余、提高代碼重用率、圖片壓縮等等，而這些要如何實(shí)現(xiàn)呢？模塊化思維可以解決，即可以有效減少代碼冗余、提高代碼重用率，更重 要是可以支持到多人維護(hù)，降低維護(hù)成本。CSS寫法較為靈活，容易產(chǎn)生代碼的耦合，使用模塊化也可以在一定程度上降低耦合度，對(duì)于BUG的定位也有幫助。 所以，我們更應(yīng)該在站點(diǎn)前期就重視并使用“模塊化的思維”編寫站點(diǎn)。
我們之前經(jīng)常提到的站點(diǎn)性能優(yōu)化，有相當(dāng)一部分也是“模塊化”的內(nèi)容，比如提高代碼重用，提高開發(fā)效率等等，“模塊化”的優(yōu)點(diǎn)還有很多，我大概列了一下：
提高代碼重用率
提高開發(fā)效率、減少溝通成本
降低耦合
降低發(fā)布風(fēng)險(xiǎn)
減少Bug定位時(shí)間和Fix成本
提高頁面容錯(cuò)
更好的實(shí)現(xiàn)快速迭代
更好的支持灰度發(fā)布
其中最重要的一點(diǎn)，我認(rèn)為是“提高代碼重用率”，這也是模塊化最重要的特點(diǎn)之一。
如何實(shí)現(xiàn)“模塊化”？
這里的主要問題是HTML與CSS的“模塊化”，我們可以看下?lián)Q膚的實(shí)現(xiàn)方法：
同一類名，換文件（JS）
同一文件，換類名（JS）
由此可知HTML與CSS的接口實(shí)現(xiàn)：
CSS引入的三種方式
類名
為 了更好的實(shí)現(xiàn)這種接口，需要有相關(guān)的（交互、設(shè)計(jì)、頁面、開發(fā)）約定、規(guī)則、規(guī)范，比如：所有當(dāng)前狀態(tài)都使用同一個(gè)類名“nonce”，所有變灰的表現(xiàn)都 使用原類名后加“_n”，Tab的實(shí)現(xiàn)方式等等。有了這些約定、規(guī)則、規(guī)范后，HTML代碼就很容易可以實(shí)現(xiàn)模板化，統(tǒng)一接口規(guī)范。
有兩個(gè)誤區(qū)需要先認(rèn)清下：
模塊化后并不是就能被使用在任何位置（模塊化后的代碼段也是有適用的范圍限制，需要一個(gè)提供接口規(guī)則的環(huán)境）
模塊化后并不是就不能再變更（模塊化后的代碼段可根據(jù)實(shí)際需要做修改）
完 全獨(dú)立的模塊放在同一項(xiàng)目中，由于項(xiàng)目有自己的表現(xiàn)、交互統(tǒng)一性，所以各模塊間必定出現(xiàn)類似的部分，這些部分可以被提出來做為公共的定義，減少冗余，這時(shí) 就會(huì)出現(xiàn)耦合的問題，完全不耦合是不可能的，因此模塊化中很重要一點(diǎn)就是“適度的耦合”。有了公共定義，就得調(diào)整模塊樣式的實(shí)現(xiàn)方式了，而這種調(diào)整也會(huì)影 響到“接口”的實(shí)現(xiàn)方式。
1、網(wǎng)站建設(shè)頻道
? ? ? ? | 公司名稱：上海緣震網(wǎng)絡(luò)科技有限公司 開戶銀行：中國工商銀行上海市彭浦支行 銀行賬號(hào)：1001 2508 0930 0206 455 |
總部：上海市奉賢區(qū)金海公路6055號(hào)29號(hào)3樓 分部：上海市靜安區(qū)共和新路4718弄10號(hào)樓2樓 商務(wù)官網(wǎng)：133288.cn 新官網(wǎng)：www.shyuanzhen.com 彥蓁科技：www.shyanzhen.cn | 緣震網(wǎng)絡(luò)成立于 2014 年，公司主要經(jīng)營全案策劃，高端品質(zhì)網(wǎng)站建設(shè)、多媒體視頻宣傳片制作、微信公眾號(hào)開發(fā)、微信小程序開發(fā)、商城定制、SEO優(yōu)化、電商托管、空間托管、網(wǎng)站維護(hù)、應(yīng)用軟件開發(fā)、手機(jī)端APP開發(fā)、等為客戶提供一條龍網(wǎng)絡(luò)運(yùn)營解決方案的的技術(shù)型企業(yè)。我們?cè)谌肆Y源、業(yè)務(wù)范圍、設(shè)計(jì)、技術(shù)、服務(wù)、信譽(yù)度、規(guī)范管理及企業(yè)文化等諸多方面完善自己，公司目前已與千余家各類客戶進(jìn)行長期戰(zhàn)略合作，提供專業(yè)的網(wǎng)站建設(shè)與運(yùn)營服務(wù)。我們的口號(hào)：廣結(jié)良緣、震古爍今！ |
免費(fèi)熱線：400-166-3538
咨詢QQ ：
微信咨詢 : chunhua19820
直接咨詢 
