內容、表現和行為分離

admin發表於2019-03-09

內容、表現和行為分離是前端頁面基本原則，下面對此原則做一下簡單闡述。

一.網頁的組成部分：

應用於專案中的網頁通常有如下幾個部分構成：

（1）.通過HTML結構建立的結構與填寫的文字，它是頁面基本框架與實質內容。

（2）.CSS程式碼部分，負責對HTML結構和其中的文字內容進行美化修飾，也就是網頁的表現部分。

（3）.JavaScript程式碼部分，負責對內容增加一些動態效果，可以稱之為行為。

上述三個部分的結合可以使網頁更加美觀有動感，互動能力也更加強大，當你的網頁也可以只有內容部分，不需要CSS與JavaScript，這當然是可以的，這是這樣的網頁很難滿足實際專案的需求。

二.內容、表現和行為分離：

在文章起始位置已經提到過，內容、表現和行為分離是前端頁面基本原則。

也就是將HTML結構與內部的文字內容、CSS程式碼和JavaScript分離開，首先看一段程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<div><b>螞蟻部落</b></div>
<div style="color:red;font-size:14px">螞蟻部落一</div>
<di style="color:blue" onclick="this.style.color='green'">螞蟻部落二</div>
</body>
</html>

上面程式碼彙總，CSS與JavaScript程式碼巢狀進HTML中，並且對"螞蟻部落"加粗採用<b>標籤。

如此簡單的程式碼就讓人感覺非常凌亂，可以想象，如果程式碼量龐大的話，頁面程式碼會多麼臃腫。

修改頁面的樣式和行為非常困難，首先在HTML中找到對應的位置，然後再修改程式碼，程式設計師內心應該是崩潰的。

並且對搜尋引擎優化也很不好友，因為搜尋引擎真正想要的是頁面中的內容，而不是巢狀的CSS程式碼和js程式碼。

程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.a{font-weight:bold} 
.b{
  color:red;
  font-size:14px;
}
.c{color:blue}
</style>  
<script>
window.onload=function(){
  let odiv=document.getElementsByClassName("c")[0];
  odiv.onclick=function(){
    this.style.color='green';
  }
}  
</script>  
</head>
<body>
<div class="a">螞蟻部落</div>
<div class="b">螞蟻部落一</div>
<div class="c">螞蟻部落二</div>
</body>
</html>

上面程式碼在一定實現三者分離效果，內容非常的簡潔，無論對於程式設計師還是對於搜尋引擎都比較友好。

程式碼較少情況下，是不錯選擇，如果程式碼量較大，頁面依然會非常的臃腫，引入外部js和css檔案是不錯的選擇。

上述程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<link rel="stylesheet" href="css.css"> 
<script src="js.js"></script>  
</head>
<body>
<div class="a">螞蟻部落</div>
<div class="b">螞蟻部落一</div>
<div class="c">螞蟻部落二</div>
</body>
</html>

上面程式碼僅僅是一個引入演示，並沒有對應的js和css檔案。

上述方式，如果要修改樣式和行為，甚至不需要去觸碰這些HTML程式碼，只需要去修改CSS和js檔案即可。

主要規則如下：

（1）.CSS和js程式碼儘量不要嵌入HTML中。

（2）.頁面中儘量保持一個js檔案引入，如果有多個，可以在部署時壓縮為一個。

（3）.CSS程式碼儘可能不適用內聯樣式，程式碼量小可以使用內部樣式表。

（4）.儘量使用css屬性替代標籤規定文字的表現，比如儘量避免使用<b>, <u>, <center>, <font>和<b>等。

關於內聯樣式與內部樣式可以參閱HTML應用CSS程式碼方式一章節。

三.簡單程式碼演示:

我們佈局頁面的最終目的是在於使用者有良好互動與視覺體驗的前提下，能夠做到頁面以非常簡潔的形式展現在開發者和搜尋引擎面前，以便於程式碼開發維護和搜尋引擎的抓取。

所以，不要引入一些特定的HTML 結構來解決一些視覺設計問題，程式碼片段如下：

[HTML] 純文字檢視 複製程式碼
<span class="text-box">
  <span class="square"></span>
  前面是一個矩形框。
</span>

上面通過一個span元素在文字前面新增一個矩形框。

CSS修飾程式碼如下：

[CSS] 純文字檢視 複製程式碼
.text-box > .square {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

上面是對span矩形框的一個樣式設定。

其實程式碼可以更加簡化，讓HTML結構更加簡單，程式碼片段如下：

[HTML] 純文字檢視 複製程式碼
<span class="text-box">
  前面是一個矩形框。
</span>

CSS修飾程式碼如下：

[CSS] 純文字檢視 複製程式碼
.text-box:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

通過偽元素選擇器在文字前面新增一個偽元素，然後設定其樣式。

這樣是不是HTML結構就更加簡潔了，當然並不能一概而論，根據具體需要。

相關文章