深圳
網(wǎng)站建設(shè)公司如何使用 Pattern Lab設(shè)計(jì)布局網(wǎng)站前端的？
網(wǎng)站建設(shè)公司本文前面相關(guān)文章中介紹了如何使用 Pattern Lab 為布局引入的每一個(gè)原子組件和模塊傳遞數(shù)據(jù)。網(wǎng)站建設(shè)公司資深設(shè)計(jì)師本文用自己親身網(wǎng)站前端設(shè)計(jì)經(jīng)歷來一個(gè)為分享如何高效使用 Pattern Lab進(jìn)行設(shè)計(jì)工作。如果你猜想我們是不是……沒錯(cuò)，最終我們創(chuàng)建了自己的 Pattern Lab。很多同事在意識(shí)到我做了什么時(shí)會(huì)笑我，問我為什么不一開始就使用 Pattern Lab。我當(dāng)時(shí)的回答也很簡(jiǎn)單：走到這一步是很自然的。我們從一些基本功能出發(fā)，隨著需求的變更不停地添加新功能，最終和 Pattern Lab 就很像了。不過最后我們發(fā)現(xiàn)，還是自己開發(fā)的系統(tǒng)更符合我們的需求。
Hologram 不僅提供了存儲(chǔ)模式庫的地方，還可以快速創(chuàng)建樣式文檔，并為安裝、最佳實(shí)踐和部署指引等建立文檔。我們自己的系統(tǒng)和 Pattern Lab 之間還有一個(gè)很大的區(qū)別，那就是我們通過數(shù)據(jù)來決定引入的模板，而不像 Pattern Lab 一樣把模板信息硬編碼在布局或模塊組合生成的有機(jī)體中。這意味著我們可以對(duì)任意內(nèi)容重用布局，而無需為每一個(gè)組合創(chuàng)建新的布局。另外還有一個(gè)需要注意的重點(diǎn)：一旦渲染流程開始，我們對(duì)數(shù)據(jù)以外的標(biāo)記是沒有控制權(quán)的；我們沒辦法為某個(gè)組件的特殊情況改變布局文件的資源順序，或?yàn)榱硗庖粋€(gè)組件添加額外的容器 div。這些限制最終會(huì)使我們的系統(tǒng)變得健壯和強(qiáng)大。但在達(dá)到這個(gè)目標(biāo)之前，我們需要放下一些重?fù)?dān)。
網(wǎng)站建設(shè)公司關(guān)于網(wǎng)站前端設(shè)計(jì)經(jīng)驗(yàn)之分拆模式庫和樣式文檔
隨著模式庫和樣式文檔不斷擴(kuò)大，讓我頭疼的一個(gè)地方是，因?yàn)樗鼈兪褂猛粋€(gè) Git 倉(cāng)庫，所以我們不斷推送對(duì)樣式文檔的小調(diào)整和大改動(dòng)，然而這些改動(dòng)對(duì)模式庫沒有絲毫影響。我們已經(jīng)對(duì)每次迭代都制訂了發(fā)布計(jì)劃，而每次改動(dòng)后都會(huì)推送一個(gè)預(yù)發(fā)布的標(biāo)簽。這造成了不少困擾，因?yàn)樵谟眯碌念A(yù)發(fā)布標(biāo)簽去麻煩后端開發(fā)人員之前，我們需要確認(rèn)新的代碼是否已經(jīng)對(duì)模板、樣式或 JavaScript 生效。我們對(duì) Git 倉(cāng)庫做了大量的改動(dòng)，而最終能夠看到的效果實(shí)際上只是樣式文檔的幾個(gè)頁面，這也讓人感覺有點(diǎn)混亂。我們的解決方案是將模式庫和樣式文檔分拆到不同的 Git 倉(cāng)庫中。這樣做帶來的好處比我們想象的還要多。
最直接的好處就是，我們可以全天候地把對(duì)樣式文檔的修改推送到自己的 Git 倉(cāng)庫，而不用擔(dān)心影響生產(chǎn)環(huán)境下的服務(wù)器?，F(xiàn)在模式庫收到的拉取請(qǐng)求少多了，我們可以有更多精力來關(guān)注這些改動(dòng)如何影響生產(chǎn)環(huán)境和樣式文檔，二者都是通過 Bower 加載模式庫的。第二個(gè)好處是，現(xiàn)在我們的生產(chǎn)環(huán)境和樣式文檔對(duì)模式庫的依賴是平等的。當(dāng)樣式文檔中創(chuàng)建了一個(gè)新的內(nèi)容塊設(shè)計(jì)時(shí)，我們只能通過 JSON 數(shù)組來編輯 HTML 標(biāo)記。我們沒有辦法為某個(gè)一次性的特殊情況修改標(biāo)記或添加自定義的 CSS。這意味著，對(duì)于樣式文檔中創(chuàng)建的所有內(nèi)容，我們都有自信在不修改模板的情況下使其在生產(chǎn)環(huán)境中重現(xiàn)。
當(dāng)前生產(chǎn)環(huán)境中使用的是 CSS 和 JavaScript，但它有自己的基于 PHP 的模板渲染引擎來處理較為繁雜的工作。我們能夠保證把每個(gè)組件和模板都原樣復(fù)制到 PHP 里面，但是這種方式非常依賴人工操作，而且對(duì)模式庫的每一次改動(dòng)都必須復(fù)制到生產(chǎn)環(huán)境中。
這個(gè)問題其實(shí)很常見，大部分 Pattern Lab 用戶可以使用內(nèi)置的 Mustache 模板創(chuàng)建各種設(shè)計(jì)、模板和頁面，但還需要將編譯后的 HTML 標(biāo)記交給后端開發(fā)工程師來實(shí)現(xiàn)后端模板。但這并不代表他們喜歡這種方式！我敢肯定，他們希望只修改模式庫里的原子組件，CMS（內(nèi)容管理系統(tǒng)）就能立即根據(jù)改動(dòng)重新渲染頁面。幸運(yùn)的是，我們已經(jīng)開始使用 Twig，Twig 本來就是一種 PHP 模板。而且已經(jīng)有一些開發(fā)者正在努力創(chuàng)建模式庫和 CMS 渲染引擎之間的鏈接。好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“如何使用 Pattern Lab設(shè)計(jì)布局網(wǎng)站前端的？”就分享到這里。如果您需要聯(lián)系深圳網(wǎng)站建設(shè)公司為您量身定做高端網(wǎng)站項(xiàng)目。您請(qǐng)聯(lián)系我們網(wǎng)站在線客服或者撥打建站程序員的電話，免費(fèi)為您提供高效而安全的建站設(shè)計(jì)解決方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
