表現與數據分離？表現與結構分離？初級開發者遇到這個詞彙大家應該聯想到，表現與結構分離，表現應該由CSS來控制，就是css與HTML分開嘛。表現與數據分離應該就是CSS與JS分離？？？其實不然。
初級web開發通常會利用JS獲取頁面的ID或class獲取頁面的DOM，然後進行動態交互或渲染頁面，但是，當後序升級中將包含該id的DOM刪除了，那麼這個時候就會報錯。特別是ajax的大量運用，1）對頁面元素的class id等元素選擇器分散在代碼各個地方，沒有抽象出來。2）對於ajax異步獲取的數據，也沒有對數據持久層分離,基本都是按功能分散在代碼中各個部分。3）經常在html中鑲嵌大量JS運用代碼而且是JS主要功能代碼，使代碼分散不宜維護。簡小的頁面還可以維護，如果是大的項目該如何處理呢？這時候就應用到了表現與數據分離。
W3C標準中有規定，網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior），它們應該是相互分離的，便於後期的開發和維護。我理解的表現與數據分離是javaScript中的MVC，用JavaScript負責填充數據，HTML負責表現數據。下面我們先說一說MVC的概念：
採用MVC開發的最初目的就是讓表現與數據分離。MVC 是一種使用 MVC（Model View Controller 模型-視圖-控制器）設計創建 Web 應用程序的模式， Model（模型）負責在數據庫中存取數據。View（視圖）顯示數據。Controller（控制器）控制器負責從視圖讀取數據，控制用戶輸入，並向模型發送數據，保證視圖與模型數據同步更新。
如何實現JavaScript的MVC呢？？？
下面舉個栗子：select一個選項，並將該選項在後臺所對應的數據顯示在select下方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表現與數據分離</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var controller = {
start: function() {
this.view.start();
},
set: function(type) { //將view上變化的數據映射到model上
controller.model.set(type);
}
};
controller.model ={
// 初始化model
data: {
‘古典文學‘: ‘三國演義‘,
‘現代文學‘: ‘悲傷逆流成河‘,
‘西方文學‘: ‘紅與黑‘},
currentType: null,
// 初始化model結束
// 響應來自controller的數據變化
set: function(type) {
this.currentType = this.data[type];
this.change(this.currentType);
},
change: function(book) {
controller.view.undate(book); //將modle變化後有關view的數據映射到view上，該函數外包爲change
}
};
controller.view = {
// 監聽頁面數據變化
start: function() {
$("#menu").change(this.changeHandler);
},
// 將變化的數據映射到model上
changeHandler: function() {
controller.set($("#menu").val());
},
undate: function(book){ // 響應來自model的數據
$("#show").html(book);
}
};
controller.start(); //開啓controller
});
</script>
</head>
<body>
<select id="menu">
<option value="menu">古典文學</option>
<option value="現代文學">現代文學</option>
<option value="西方文學">西方文學</option>
</select>
<div id="show"></div>
</body>
</html>
首先創建一個Controller對象，該controller對象即可以監聽view的數據變化，也可以將view的變化數據響應到model中，最終將model變化的數據更新到view。其結構如下：
實現表現與數據分離的優點和缺點：
優點是： 模塊化 --> 容易測試 --> 降低bug頻率
缺點是：程序結構複雜，比較耗時，上手有學習曲線
應用場景：
項目具有明顯的數據需求，比如要與很多Service交互，業務流程複雜，表單很多
非應用場景：
項目是典型的靜態信息展示型頁面，或是微型的內部app，或是產品idea驗證時期的MVP。