外貿(mào)
網(wǎng)站建設(shè)前端架構(gòu)排版程序員常說的“原子”是什么意思？
網(wǎng)站建設(shè)公司在本站前面關(guān)于前端設(shè)建設(shè)設(shè)計的文章中詳細介紹過網(wǎng)站建設(shè)前端設(shè)計的諸多方法，本文繼續(xù)就網(wǎng)站前端設(shè)計我們還需要解決最后調(diào)用的模板 {{> atoms-landscape-16x9 }}。就像我們在首頁模板中看到的，這個標(biāo)簽導(dǎo)入了名為“landscape-16x9”的原子，但是這里并沒有改變數(shù)據(jù)的上下文。這意味著這個負責(zé)顯示廣告圖的 Mustache 文件會和 block-hero 使用完全一樣的數(shù)據(jù)，不過這也不算什么大問題，因為 block-hero 模板中幾乎沒有多個 img 屬性的需求。因此，可以使用和 block-hero 相同的數(shù)據(jù)調(diào)用模板并傳入廣告圖。
<！—— 02-landscape-16x9.mustache ——>
<img src="{{ img.16x9.src }}" alt="{{ img.16x9.alt }}" />
Pattern Lab 讓我們可以抽象最簡單的標(biāo)記塊，這個圖片標(biāo)簽就是一個很好的例子。這個模板只調(diào)用了圖片源碼及其 alt 標(biāo)簽，因此看起來可能多此一舉。為什么不直接放一個圖片標(biāo)簽到廣告圖板塊里，就像那個 H2 標(biāo)題一樣？話說回來，究竟把模板抽象到什么程度，還是應(yīng)該由你和你的團隊來決定，不過所有圖片標(biāo)簽都用單一的模板生成是很有意義的。想象一下將來你決定給所有的圖片標(biāo)簽添加一個 CSS 類名或者 data 屬性。如果每個模板只處理自己的圖片標(biāo)簽，那就需要更新很多“分子”。但是如果所有的圖片都用一個單獨的模板來處理，那么只需更新一處，Pattern Lab 就會幫你更新其他任何用到這個原子的地方。
網(wǎng)站建設(shè)前端模板涉及怎樣發(fā)揮原子的作用
現(xiàn)在，我們已經(jīng)見識了在首頁顯示廣告圖的方法，還可以采取同樣的方法分解頁面上的每一個 UI 元素。這種方法的強大之處在于，在持續(xù)構(gòu)建的過程中，你很快就會發(fā)現(xiàn)可以重復(fù)使用之前建好的片段。如今，當(dāng)我們著手構(gòu)建網(wǎng)站的頁面時，面對的已經(jīng)不再是一張白紙，以及各種獨特標(biāo)記和樣式的組合。我們能夠通過系統(tǒng)已有的原子、分子、有機體和模板創(chuàng)建一個完整的頁面。由于整個網(wǎng)站共享相同的代碼，如果要調(diào)整“發(fā)布日期”的行高，那么不必挨個修改每個頁面各自的日期數(shù)據(jù)條目；只需更新一個原子，這個改變就會自動應(yīng)用到整個系統(tǒng)中。
如今，Pattern Lab 文檔網(wǎng)站成為了由構(gòu)建網(wǎng)站的各個單元有機結(jié)合而成的動態(tài)系統(tǒng)。它對品牌顏色、字體、商標(biāo)規(guī)格甚至動畫都進行了分類。因此，Pattern Lab 成為了最完整而高效的網(wǎng)站文檔記錄方式之一。它不僅是一個極好的開發(fā)平臺，也起到了團隊成員之間進行溝通的通用語言的作用。
不要覺得前端開發(fā)是在原地繞圈。假如只是構(gòu)建不同的網(wǎng)頁，工作只會隨著時間推移變得越來越難。但是如果專注于運用類似 Pattern Lab 的工具構(gòu)建系統(tǒng)，那么實際上工作會隨著時間的推移變得越來越簡單。請不要擔(dān)心這樣會讓我們失業(yè)！一旦從枯燥的網(wǎng)站獨立頁面開發(fā)工作中解放出來，就能有更多的心思來研究如何完善我們的系統(tǒng)。這也正是我要介紹 JSON 模式的原因。第 17 章不會再介紹一般類型的示例，而會以 Red Hat 網(wǎng)站為例來具體說明，JSON 模式是如何將 Red Hat 從類似 Pattern Lab 的系統(tǒng)轉(zhuǎn)變?yōu)橥耆傻脑O(shè)計系統(tǒng)的。這個系統(tǒng)不僅可以生成樣式規(guī)范，同時也是內(nèi)容編輯系統(tǒng)的基礎(chǔ)，而且還是網(wǎng)站的主要渲染引擎。好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“外貿(mào)網(wǎng)站建設(shè)前端架構(gòu)排版程序員常說的“原子”是什么意思？”就分享到這里。如果您需要定制高端外貿(mào)網(wǎng)站平臺，請聯(lián)系我們我們網(wǎng)站平臺客服或者撥打我們網(wǎng)站聯(lián)系電話。有專業(yè)技術(shù)人員為您免費提供解決方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
