網(wǎng)站建設(shè)關(guān)于前端架構(gòu)規(guī)劃之平衡可控性和自動(dòng)化解決方案。網(wǎng)站建設(shè)公司認(rèn)為作為前端架構(gòu)師，你需要評(píng)估標(biāo)記產(chǎn)生的過程。你對內(nèi)容的順序、使用的元素和 CSS 類名有多大的控制權(quán)？這些元素在將來改動(dòng)起來會(huì)有多大難度？模板是否易用，或者是否只有后端開發(fā)人員才能更改？甚至，你的標(biāo)記全是基于模板系統(tǒng)的嗎？你可以通過系統(tǒng)做出更改，還是需要手動(dòng)處理？深圳網(wǎng)站建設(shè)公司資深框架工程師下面通過回答這些問題，你可能會(huì)顛覆自己構(gòu)建 HTML 和 CSS 的方法。
模塊化標(biāo)記：自動(dòng)化程度100％，可控程度100％
網(wǎng)站建設(shè)我們都在追求的理想狀態(tài)是，網(wǎng)站上每一行 HTML 都由程序自動(dòng)生成，而作為前端開發(fā)人員，我們只需要管理這個(gè)用來產(chǎn)生標(biāo)記的模板和流程。遺憾的是，現(xiàn)實(shí)通常并非如此。即使在最好的情況下，也存在用戶生成的內(nèi)容，而這些內(nèi)容幾乎都無法自動(dòng)添加 CSS 類名來標(biāo)記。無論 CMS 系統(tǒng)自動(dòng)生成 HTML 的能力如何，讓 CMS 決定類似表單和導(dǎo)航欄這樣的標(biāo)記，有時(shí)候會(huì)更簡單。但是就算你已經(jīng)把理想狀態(tài)實(shí)現(xiàn)了 90％，標(biāo)記的模塊化方案仍然可以給你帶來理想的靈活性和必要的自動(dòng)化。
模塊化標(biāo)記和程序化標(biāo)記的區(qū)別在于，對于使用什么標(biāo)記輸出既定內(nèi)容，我們不會(huì)完全任由 CMS 決定。這使得我們可以為兩個(gè)不同的導(dǎo)航實(shí)例使用一樣的標(biāo)記，雖然 CMS 生成的標(biāo)記可能完全不一樣。模塊化標(biāo)記和靜態(tài)化標(biāo)記的區(qū)別在于，程序化地執(zhí)行完之后，我們還可以通過一套類名系統(tǒng)給標(biāo)記動(dòng)態(tài)添加 CSS 類名，并且不再通過元素標(biāo)簽和層級(jí)關(guān)系來決定視覺外觀。讓我們看一下如何用 BEM 原則模塊化地實(shí)現(xiàn)一個(gè)簡單的導(dǎo)航：
<nav class="nav">
<ul class="nav__container">
<li class="nav__item">
<a href="/products" class="nav__link">
<ul class="nav__container——secondary">
<li class="nav__item——secondary">
<a href="/socks" class="nav__link——secondary">
乍看上去，這種方案似乎相當(dāng)冗長。這一點(diǎn)我沒有什么好辯解的，但我要說的是，它的冗余程度其實(shí)是恰到好處的。給每個(gè)元素都添加了相應(yīng)的 CSS 類名之后，我們就不再需要依賴那些只為了樣式標(biāo)簽而存在的 CSS 類名或元素的層級(jí)關(guān)系來決定視覺外觀了。相比動(dòng)態(tài)標(biāo)記，這個(gè)標(biāo)記更清晰，并且我敢說，這也讓標(biāo)記的組織形式更“模塊化”了。這個(gè)導(dǎo)航可以作為網(wǎng)站的導(dǎo)航通用模板，不用改任何一個(gè)標(biāo)記就可以在多處復(fù)用。因此，這種標(biāo)記并不是先等 CMS 創(chuàng)建完成再另外添加樣式標(biāo)記的，而是創(chuàng)建的同時(shí)就添加了樣式標(biāo)記，然后整合到網(wǎng)站的整個(gè)導(dǎo)航系統(tǒng)中。
網(wǎng)站建設(shè)前端架構(gòu)規(guī)劃之這一切背后的設(shè)計(jì)系統(tǒng)
網(wǎng)站建設(shè)前端架構(gòu)師要使用這種模塊化方法，我們首先需要改變構(gòu)建頁面的方法和思路。單獨(dú)的靜態(tài)“網(wǎng)頁”其實(shí)根本就不存在。所謂的“網(wǎng)頁”其實(shí)是過去的產(chǎn)物。那么什么是當(dāng)前我們真正需要去創(chuàng)建的“頁面”呢？是某個(gè) URL 的內(nèi)容嗎？如何保證每次訪問某個(gè) URL 的時(shí)候都訪問到同樣的內(nèi)容呢？如果你登錄了會(huì)如何呢？如何使這個(gè) URL 的內(nèi)容根據(jù)時(shí)間、地點(diǎn)或者瀏覽器的不同而有所不同呢？越早地意識(shí)到我們現(xiàn)在所做的工作不是單純地實(shí)現(xiàn)某個(gè)頁面，而是設(shè)計(jì)整個(gè)系統(tǒng)，就能越早地開始創(chuàng)造那些真正讓人驚艷的 Web 作品。
設(shè)計(jì)系統(tǒng)是網(wǎng)站視覺語言的程序化呈現(xiàn)。設(shè)計(jì)師創(chuàng)造的視覺語言，是用來描述網(wǎng)站如何通過視覺與用戶溝通的工具。它集合了顏色、字體、按鈕、圖片樣式、排版布局和界面版式，用來傳達(dá)情緒、意義和目的。正如詞可以分為名詞、動(dòng)詞和形容詞等，作為前端開發(fā)人員，我們的工作就是把視覺語言拆解成最小單元。拆解之后，我們可以創(chuàng)建規(guī)則，對這些最小單元進(jìn)行重組。只有將視覺語言充分拆解之后，我們才能知道如何重新把它們連成“句子”，組成“段落”，合并為“章節(jié)”，最后創(chuàng)作成一部精彩的“小說”。轉(zhuǎn)換的目標(biāo)是創(chuàng)建具有可擴(kuò)展性和可維護(hù)性的代碼庫，以便如實(shí)地重現(xiàn)視覺語言能表達(dá)的任何東西。
深圳網(wǎng)站建設(shè)公司資深框架規(guī)劃師在后面的章節(jié)中，我們將進(jìn)一步創(chuàng)建設(shè)計(jì)系統(tǒng)，但是在目前的階段，認(rèn)清我們正開發(fā)的是什么很重要，因?yàn)樵谥珠_發(fā)之前，我們需要先決定設(shè)計(jì)系統(tǒng)要如何建立在標(biāo)記之上。好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“網(wǎng)站建設(shè)關(guān)于前端架構(gòu)規(guī)劃之平衡可控性和自動(dòng)化解決方案”經(jīng)驗(yàn)就分享到這里，謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
