網(wǎng)站設(shè)計(jì)建設(shè)關(guān)于前端框架要做到慢而有力的工作開(kāi)端。深圳網(wǎng)站建設(shè)公司資深前端框架設(shè)計(jì)師一個(gè)人對(duì)一個(gè)外貿(mào)網(wǎng)站建設(shè)涉及項(xiàng)目的案例來(lái)與各位分享他的經(jīng)歷。能夠在這個(gè)時(shí)候與Red Hat跨境電商公司合作，我的團(tuán)隊(duì)實(shí)在是太幸運(yùn)了。我們對(duì)舊站點(diǎn)進(jìn)行了重新設(shè)計(jì)之后，并沒(méi)有馬上著手開(kāi)發(fā)新功能。雖然我們時(shí)不時(shí)也需要處理一下bug，但畢竟還是有幾個(gè)月的時(shí)間去研究如何為這個(gè)系統(tǒng)設(shè)計(jì)全新的架構(gòu)。
盡管在以前客戶的王那個(gè)站生產(chǎn)環(huán)境中仍然有大量的遺留代碼，我們還是選擇了從零開(kāi)始。因?yàn)樵瓉?lái)的站點(diǎn)是基于塊（一行接一行的獨(dú)立內(nèi)容）設(shè)計(jì)的，所以我們新開(kāi)發(fā)的網(wǎng)頁(yè)元素可以布局在已有內(nèi)容塊的上方或下方。我們不需要重寫(xiě)側(cè)邊欄的樣式，也不需要頻繁地改變HTML標(biāo)簽的樣式。實(shí)際上，我們相當(dāng)于在舊站點(diǎn)中構(gòu)建全新的網(wǎng)站。正如船上的甲板可以一塊一塊地被替代，我們希望最終也可以替換原有的系統(tǒng)，完全使用新的系統(tǒng)。既然自由發(fā)揮的空間這么大，我們完全可以創(chuàng)建一張很長(zhǎng)的愿望清單，并且真的去實(shí)現(xiàn)它們。這個(gè)愿望清單包括以下方面。
網(wǎng)站設(shè)計(jì)關(guān)于前端架構(gòu)之模塊化內(nèi)容
我們非常推崇 Brad Frost 提出的原子設(shè)計(jì)方法論,希望盡可能復(fù)用小的組件，而不是弄出幾十個(gè)、甚至上百個(gè)不同的內(nèi)容塊。
網(wǎng)站設(shè)計(jì)關(guān)于前端架構(gòu)之全面測(cè)試
我們之前經(jīng)常出現(xiàn)這樣的情況:大量的前端代碼合入到主干，然后導(dǎo)致幾個(gè)月前的代碼出現(xiàn)運(yùn)行問(wèn)題。這樣太浪費(fèi)時(shí)間了，所以我們決定要像測(cè)試后端代碼一樣測(cè)試我們的新框架，達(dá)到一樣的代碼覆蓋水平。
網(wǎng)站設(shè)計(jì)關(guān)于前端架構(gòu)之流式處理
我們希望引入Git工作流程，用它來(lái)管理應(yīng)用代碼簡(jiǎn)直是游刃有余，但是我們要將功能分支分解為更小的、模塊化的代碼塊。另外，也要把過(guò)去一直采用的容易出錯(cuò)的手動(dòng)步驟自動(dòng)化:更新樣式表、創(chuàng)建圖標(biāo)字體、部署新代碼等。
網(wǎng)站設(shè)計(jì)關(guān)于前端架構(gòu)之詳細(xì)的文檔
這個(gè)新系統(tǒng)的受眾很廣，包括前端開(kāi)發(fā)人員、后端開(kāi)發(fā)人員、設(shè)計(jì)師、市場(chǎng)經(jīng)理、運(yùn)維人員，以及其他產(chǎn)品開(kāi)發(fā)角色。我們希望每個(gè)人接觸這套系統(tǒng)時(shí)，都能找到適合自己的、詳細(xì)的文檔。
這四個(gè)方面需要一點(diǎn)時(shí)間去開(kāi)發(fā)、配置和完善。在最初幾個(gè)月里，我們的開(kāi)發(fā)效率確實(shí)不如以前。但是一旦新系統(tǒng)有了一定的基礎(chǔ)，我們很快就感受到了它的優(yōu)勢(shì)。
當(dāng)再次遇到包含2個(gè)，甚至多達(dá)12個(gè)內(nèi)容塊的頁(yè)面需求時(shí)，我們發(fā)現(xiàn)工作量比以前少得多。我們不再需要獨(dú)立對(duì)待每一個(gè)內(nèi)容塊，而是將內(nèi)容塊拆分為最小的獨(dú)立可重用組件，并根據(jù)需求決定是否新增布局或組件。最終，每一個(gè)需求都會(huì)產(chǎn)出詳盡的文檔、全面的回歸測(cè)試方案以及符合最初架構(gòu)設(shè)計(jì)規(guī)范的源代碼。
雖然這些工具和流程需要一些時(shí)間來(lái)打造，但是效果實(shí)在太好了，現(xiàn)在我們已經(jīng)開(kāi)始嘲笑自己的工作有多么簡(jiǎn)單了。當(dāng)然，工作簡(jiǎn)單是好事，這意味著我們可以少做一些重復(fù)的工作，把更多時(shí)間花在系統(tǒng)設(shè)計(jì)上。最終，在我們?cè)O(shè)計(jì)的系統(tǒng)中工作會(huì)感到愉悅，面對(duì)每一個(gè)用戶需求，我們都會(huì)感到興奮，因?yàn)橛钟袡C(jī)會(huì)將系統(tǒng)變得更強(qiáng)大了。
網(wǎng)站設(shè)計(jì)建設(shè)關(guān)于前端架構(gòu)之全副武裝
有了這些經(jīng)驗(yàn)后，我相信我們編寫(xiě)的代碼、開(kāi)發(fā)的流程、磨練的技術(shù)能夠充分驗(yàn)證這套方法論的合理性，并成為說(shuō)服其他人在項(xiàng)目中使用它的堅(jiān)實(shí)基礎(chǔ)。網(wǎng)站建設(shè)設(shè)計(jì)公司本文提到的流程、技術(shù)和本欄目中討論的經(jīng)驗(yàn)，我希望你在下一個(gè)項(xiàng)目中能夠有自信為自己的前端架構(gòu)而戰(zhàn)。爭(zhēng)取盡早參與項(xiàng)目，以能夠在項(xiàng)目的重要決策中發(fā)揮影響力;挑戰(zhàn)現(xiàn)有的工具和流程，構(gòu)建更智能、可重用性更高的代碼;爭(zhēng)取使你的前端工作產(chǎn)生更大的影響力?？钙鹎岸思軜?gòu)師的旗幟，一起戰(zhàn)斗吧!好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“網(wǎng)站設(shè)計(jì)建設(shè)關(guān)于前端框架要做到慢而有力的工作開(kāi)端”知識(shí)經(jīng)驗(yàn)就分享到這里，謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
