網(wǎng)站建設(shè)前端架構(gòu)設(shè)計(jì)制作什么是語義化的網(wǎng)格?
網(wǎng)站建設(shè)公司認(rèn)為隨著組件的基礎(chǔ)變得堅(jiān)實(shí),我們需要做的下一件事是弄清楚如何把它們合并成多種不一樣的布局。過去,當(dāng)模塊數(shù)量比較少時(shí),我們會(huì)給每個(gè)版塊寫樣式,包括版塊的布局。如果要做一個(gè)充滿商標(biāo)的版塊,我們會(huì)給這個(gè)版塊一個(gè) CSS 類名稱,然后明確地給這個(gè)版塊應(yīng)用一個(gè)布局。這個(gè)方案的問題是,除了整個(gè)版塊其他的都不可復(fù)用。所以如果有別的版塊用到了相同的布局但不同的內(nèi)容,我們就不得不創(chuàng)建一個(gè)全新的版塊以及重寫布局樣式。所以,現(xiàn)在我們把商標(biāo)墻拆分成圖片集、按鈕和標(biāo)題,希望模塊布局任何時(shí)候都能復(fù)用。深圳網(wǎng)站建設(shè)公司提醒這意味著要把布局放回 DOM,這正是我們舍bootstrap 網(wǎng)格布局時(shí)強(qiáng)烈抗拒的事情。

幸運(yùn)的是,bootstrap 網(wǎng)格布局容器、行容器和列容器,需要應(yīng)用到 .logo-wall 版塊的特定布局,以及其他任何需要布局的新的內(nèi)容組合。我們的解決方案是,創(chuàng)造一組可以通過數(shù)據(jù)屬性的值來應(yīng)用的常用網(wǎng)格布局方式。流程核心的意義在于清晰地定義前端代碼從開發(fā)人員的腦海到用戶的瀏覽器所需要經(jīng)歷的各個(gè)步驟。流程包含了開發(fā)過程的各個(gè)環(huán)節(jié),從合理的想法到可行的設(shè)計(jì),到有效的提交,再到最終的部署。
如果你從事前端開發(fā)的時(shí)間足夠長,你可能注意到,在過去的幾年內(nèi),我們的工作流已經(jīng)發(fā)生了巨大的變化。我第一次做 Web 開發(fā)是通過兩個(gè)月的郵件交流來理解客戶的需求,然后通過 FTP 登錄他們的服務(wù)器,對(duì)網(wǎng)站代碼做必要的修改的?,F(xiàn)在看來,這種更新網(wǎng)站代碼的方式非常糟糕。如果我誤解了郵件的內(nèi)容,改錯(cuò)了代碼,會(huì)發(fā)生什么呢?如果我不小心刪掉了一大片 CSS 代碼,又不小心破壞了網(wǎng)站上的其他頁面呢?如果我改掉一個(gè) JavaScript 的 bug,但又引發(fā)另外兩個(gè) bug 呢?這些問題十分棘手,而這也是永遠(yuǎn)都不要用 FTP 直接修改代碼的重要原因。如果你沒有經(jīng)常備份,現(xiàn)在需要修復(fù)一個(gè)損壞的網(wǎng)站,而且還有一堆任務(wù)等著你去做,那么結(jié)果會(huì)怎樣呢?
幸運(yùn)的是,我們大多數(shù)人已經(jīng)從這些錯(cuò)誤中吸取了教訓(xùn),現(xiàn)在遵循著更先進(jìn)的方法。跟之前通過 FTP 的方式來修改郵件中提到的各種改動(dòng)不同,現(xiàn)在網(wǎng)站建設(shè)公司資深框架設(shè)計(jì)師采取的方法如下。
(1) 使用事件跟蹤和用戶故事來正確地跟蹤工作流和標(biāo)記那些完成了的任務(wù)。
(2) 搭建開發(fā)環(huán)境來測(cè)試代碼。
(3) 構(gòu)建部署流程,用于編譯、驗(yàn)證和測(cè)試代碼。
(4) 在任何代碼被采納之前,都要獲取需求方的反饋。
(5) 把提交的代碼推送到中心代碼倉庫。
(6) 采用這樣一個(gè)部署系統(tǒng):可以無縫地添加一些新代碼到生產(chǎn)環(huán)境;在需要的時(shí)候,還可以回滾這些代碼來恢復(fù)系統(tǒng)原來的功能。
準(zhǔn)備好實(shí)踐這些方法了嗎
作為前端架構(gòu)師,你經(jīng)常需要制定,或至少能夠掌控以上所列的每一項(xiàng)內(nèi)容。流程中的任何一個(gè)環(huán)節(jié)出現(xiàn)問題,都會(huì)迅速演變?yōu)殚_發(fā)人員的痛苦,或者導(dǎo)致網(wǎng)站無法持續(xù)滿足用戶要求,甚至崩潰。
正如博納網(wǎng)站建設(shè)公司前面的文章所說,前端架構(gòu)師的用戶是開發(fā)人員。我們所選擇的工具、編寫的代碼、創(chuàng)建的流程,都是為了讓開發(fā)人員能夠構(gòu)建出最高效的、不出錯(cuò)的、可擴(kuò)展的和可持續(xù)優(yōu)化的系統(tǒng)。在這一部分,我們會(huì)從一個(gè)更高的視角看看如何更好地武裝新的開發(fā)人員,讓他們更快地上手。我們會(huì)深入了解他們是如何把需求轉(zhuǎn)化為實(shí)際代碼的,以及代碼產(chǎn)生的流程。然后我們會(huì)討論這些流程的核心——任務(wù)處理器的角色,以及它們?nèi)绾螏椭覀冇酶俚臅r(shí)間創(chuàng)造更好的代碼。好了,
深圳網(wǎng)站建設(shè)公司本文關(guān)于“
網(wǎng)站建設(shè)前端架構(gòu)設(shè)計(jì)制作什么是語義化的網(wǎng)格?”的建站經(jīng)驗(yàn)就分享到這里,如果您需要個(gè)性定制高端網(wǎng)站可聯(lián)系我們?cè)诰€客服,獲取設(shè)計(jì)解決方案,謝謝關(guān)注,博納網(wǎng)絡(luò)編輯整理。