網(wǎng)站建設(shè)前端關(guān)于架構(gòu)規(guī)劃之HTML語(yǔ)言解決方案。
網(wǎng)站建設(shè)公司認(rèn)為作為前端架構(gòu)師，你面臨的第一個(gè)挑戰(zhàn)就是標(biāo)記的規(guī)范化，換言之，你希望開(kāi)發(fā)人員寫(xiě)出或 CMS 產(chǎn)出什么樣的標(biāo)記。如果沒(méi)有 HTML，Web 就不復(fù)存在。因此我們暫且把 CSS 和 JavaScript 放一邊，先單獨(dú)看原始的內(nèi)容和控件。文字、圖片、鏈接、表單和提交按鈕都是所有 Web 真正需要的元素，也是在 Web 上創(chuàng)建所有東西的基礎(chǔ)。深圳網(wǎng)站建設(shè)公司資深框架規(guī)劃師提醒初始的標(biāo)記做得不好，你將要寫(xiě)很多不必要的 CSS 和 JavaScript 來(lái)彌補(bǔ)。而初始的標(biāo)記做得好，你就能寫(xiě)出更具可擴(kuò)展性和可維護(hù)性的 CSS 和 JavaScript。
網(wǎng)站建設(shè)關(guān)于前端框架之過(guò)去處理標(biāo)記的方法
過(guò)去，不少前端從業(yè)人員來(lái)自出版界，或者曾與出版界的設(shè)計(jì)師、產(chǎn)品負(fù)責(zé)人共事，因此 HTML 的布局跟手冊(cè)、雜志或報(bào)紙等傳統(tǒng)材料非常相似?，F(xiàn)如今二者不能等同了。但是在響應(yīng)式設(shè)計(jì)成為業(yè)界標(biāo)準(zhǔn)之前（甚至之后的一段時(shí)間），大多數(shù)網(wǎng)絡(luò)媒體資源都被視為多頁(yè)印刷品的集合。項(xiàng)目分工之后，你會(huì)被指定負(fù)責(zé)某個(gè)頁(yè)面，從頭開(kāi)始創(chuàng)建 DOM。過(guò)去，我們的標(biāo)記通常被細(xì)分為兩大陣營(yíng)：程序式和靜態(tài)式。下面就來(lái)看一看。
網(wǎng)站建設(shè)關(guān)于前端框架規(guī)劃之程序式標(biāo)記：自動(dòng)化程度100％，可控程度0％
在 Web 建站領(lǐng)域，前端團(tuán)隊(duì)沒(méi)有標(biāo)記的控制權(quán)是非常普遍的。這通常是由于在前端團(tuán)隊(duì)參與項(xiàng)目之前，項(xiàng)目的功能開(kāi)發(fā)（包括 HTML 輸出）就已經(jīng)進(jìn)行了幾周甚至幾個(gè)月了。如果標(biāo)記源碼被復(fù)雜的渲染過(guò)程打亂，而且還來(lái)自不同的模板，那么情況就會(huì)變得更加糟糕。這意味著，對(duì)于任何不熟悉 CMS 后端復(fù)雜性的人而言，更新標(biāo)記將會(huì)異常困難。而往往到了這個(gè)時(shí)候，后端開(kāi)發(fā)人員已經(jīng)開(kāi)始著手別的任務(wù)了，沒(méi)有時(shí)間回過(guò)頭來(lái)進(jìn)行任何重大的修改。這種制約因素的影響是，為了把內(nèi)容更好地嵌入到 HTML 中，CMS 編輯人員和后端開(kāi)發(fā)人員寧可寫(xiě)一堆標(biāo)記和 CSS 類名。最終，他們編寫(xiě)的代碼如下：
<div id="header" class="clearfix">
<div id="header-screen" class="clearfix">
<div id="header-inner" class="container-12 clearfix">
<div id="nav-header" role="navigation">
<div class="region region-navigation">
<div class="block block-system block-menu">
<div class="block-inner">
<div class="content">
<ul class="menu">
<li class="first leaf">
<a href="/start">Get Started</a>
Drupal.org 首頁(yè)的這一段代碼顯示了一個(gè)簡(jiǎn)單的頁(yè)面頂部，即使在填充內(nèi)容之前都可以包含 10 層嵌套，更可怕的是，在實(shí)際應(yīng)用中這還不是一個(gè)特別夸張的現(xiàn)象。經(jīng)驗(yàn)告訴我們，它還可能嵌套得更多。
以前，這種“div 亂燉”或許確實(shí)有助于我們把靜態(tài) Photoshop 圖像做成標(biāo)記化的頁(yè)面，但隨著我們的需求日漸成熟，我們急需更好的方法來(lái)駕馭它們。
網(wǎng)站建設(shè)前端架構(gòu)規(guī)劃之靜態(tài)標(biāo)記：自動(dòng)化程度0％，可控程度100％
如果我們的項(xiàng)目規(guī)模比較小，或者任務(wù)只是開(kāi)發(fā)一個(gè)需要填充一大塊主體區(qū)域的頁(yè)面，那么編寫(xiě)靜態(tài)標(biāo)記更為方便。雖然這種情況靈活性很大，但是也意味著我們必須負(fù)責(zé)維護(hù)所有的代碼。一個(gè)原本在 CMS 模板中很容易的改動(dòng)，現(xiàn)在需要每個(gè)頁(yè)面單獨(dú)手動(dòng)修改。所以我們會(huì)寫(xiě)成這樣：
<header>
<section>
<nav>
<div>
<ul>
<li>
<a href="/products">Products</a>
<ul>
<li>
<a href="/socks">Socks</a>
為了保持簡(jiǎn)潔，“語(yǔ)義化”的標(biāo)記是首選，應(yīng)用樣式所依靠的是 HTML5 元素名稱和它們的層級(jí)關(guān)系，而非 CSS 類名。我們的標(biāo)記中沒(méi)有 CSS 類名，主導(dǎo)航的樣式會(huì)自動(dòng)繼承到二級(jí)導(dǎo)航的錨點(diǎn)上，我們深受其害，最終往往寫(xiě)出這樣的后代選擇器：
header > section > nav > div > ul > li > a {
color：white;
}
header > section > nav > div > ul > li > ul > li > a {
color：blue;
}
過(guò)去，這種靜態(tài)標(biāo)記的方式使得對(duì)于任何一個(gè)懸停狀態(tài)或激活狀態(tài)選擇器，代碼至少得寫(xiě)這么長(zhǎng)。你根本不想看三級(jí)導(dǎo)航會(huì)被寫(xiě)成什么樣。我們還是趕緊跳過(guò)這部分，看一下現(xiàn)在是如何處理的。好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“網(wǎng)站建設(shè)前端關(guān)于架構(gòu)規(guī)劃之HTML語(yǔ)言”知識(shí)，就分享到這里，謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
