外貿(mào)
網(wǎng)站建設(shè)關(guān)于前端架構(gòu)圍繞Web前端開(kāi)發(fā)的技術(shù)要素。
網(wǎng)站建設(shè)公司資深前端設(shè)計(jì)工程師本文就——HTML、CSS和JavaScript來(lái)深入地探討編寫高質(zhì)量的HTML代碼、CSS代碼和JavaScript代碼的方法、技巧、規(guī)范和最佳實(shí)踐，從而為編寫易于維護(hù)的Web前端代碼打下堅(jiān)實(shí)的基礎(chǔ)。不是單純的“技術(shù)”，沒(méi)有系統(tǒng)地講解Web前端開(kāi)發(fā)的基礎(chǔ)知識(shí)，它更專注于“技巧”，探索如何為“技術(shù)”提供最佳“技巧”。
第一，必須掌握基本的Web前端開(kāi)發(fā)技術(shù)，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握這些技術(shù)的同時(shí)，還要清楚地了解它們?cè)诓煌瑸g覽器上的兼容情況、渲染原理和存在的Bug。
第二，在一名合格的前端工程師的知識(shí)結(jié)構(gòu)中，網(wǎng)站性能優(yōu)化、SEO和服務(wù)器端的基礎(chǔ)知識(shí)也是必須掌握的。
第三，必須學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開(kāi)發(fā)。
第四，除了要掌握技術(shù)層面的知識(shí)，還要掌握理論層面的知識(shí)，包括代碼的可維護(hù)性、組件的易用性、分層語(yǔ)義模板和瀏覽器分級(jí)支持。網(wǎng)站建設(shè)公司前端設(shè)計(jì)師提醒我們同時(shí)還需要掌握其他有助益的原則
網(wǎng)站建設(shè)關(guān)于前端架構(gòu)設(shè)計(jì)之單一職責(zé)原則
在建立 Red Hat 網(wǎng)站的過(guò)程中，我發(fā)現(xiàn)了一些對(duì)規(guī)劃 CSS 框架有極大幫助的東西。單一責(zé)任原則規(guī)定你創(chuàng)建的所有東西必須有單一的、高度聚焦的理由。你應(yīng)用到某個(gè)選擇器里的樣式應(yīng)該是為了單一目的而創(chuàng)建的，并且能夠很好地實(shí)現(xiàn)這個(gè)目標(biāo)。這并不意味著你應(yīng)該為 padding-10、font-size-20 和 color-green 設(shè)置單獨(dú)的 CSS 類名。我們關(guān)注的是樣式適用在哪些地方，而不是這些樣式本身。讓我們來(lái)看下面的例子：
<div class="calendar">
<h2 class="primary-header">This Is a Calendar Header</h2>
</div>
<div class="blog">
<div class="calendar calendar——nested">
<h2 class="calendar-header">This Is a Calendar Header</h2>
</div>
</div>
/* calendar.css */
.calendar-header {
color：red;
font-size：2em;
}
.calendar——nested .calendar-header {
font-size：1.6em;
}
/* blog.css */
.blog-header {
color：red;
font-size：2.4em;
}
在前面的例子中，我們使用傳統(tǒng)的 BEM 語(yǔ)法創(chuàng)建了 calendar——nested 修飾符。這個(gè) CSS 類名單獨(dú)使用時(shí)什么都不做，而當(dāng)它被應(yīng)用到日歷組件上時(shí)，組件里的元素就能拿它做局部上下文并改變外觀。我們能夠用這種方法把修改過(guò)的日歷皮膚使用到任何地方，從而得到更小的字體（以及想要的其他改變）。這保證了所有組件的變動(dòng)都在一個(gè)文件里，而且能用到任何需要的地方（或者不使用它們），而不依賴于不確定的父節(jié)點(diǎn) CSS 類名。
網(wǎng)站建設(shè)公司總結(jié)
能夠幫助你創(chuàng)建可維護(hù)代碼庫(kù)的 CSS 技巧有很多，本欄目涉及的只是冰山一角，包括的內(nèi)容如下：
· 分離容器和內(nèi)容
· 區(qū)分布局與組件的角色和職責(zé)
· 在標(biāo)記上使用單一、扁平的選擇器
· 使用其他原則，比如單一職責(zé)原則、單一樣式來(lái)源、內(nèi)容修飾符
博納網(wǎng)站建設(shè)公司本站前面列出了很多建議，任何形式、任何大小的項(xiàng)目都可以從中獲益，但最終如何編寫 CSS 仍由你和你的團(tuán)隊(duì)決定。我唯一的要求是，通過(guò)對(duì)這些問(wèn)題的探討，你能夠加深對(duì)前端架構(gòu)的思考，建立起什么是好架構(gòu)和如何搭建架構(gòu)的觀念，并在代碼評(píng)審時(shí)能夠使用其中的某些原則作為分析和評(píng)論的根據(jù)。這樣做可以讓你鞏固代碼核心，使之更好地支撐起整個(gè)前端架構(gòu)，并且?guī)椭鷪F(tuán)隊(duì)走向成功。好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“外貿(mào)網(wǎng)站建設(shè)關(guān)于前端架構(gòu)圍繞Web前端開(kāi)發(fā)的技術(shù)要素”知識(shí)就分享到這里。如果您有跨境電商、外貿(mào)門戶等項(xiàng)目需要定制設(shè)計(jì)，聯(lián)系我們?cè)诰€客服獲取免費(fèi)解決方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
