表現與數據分離

時間 2019-12-14

標籤表現數據分離简体版

原文原文鏈接

表現與數據分離？表現與結構分離？初級開發者遇到這個詞彙你們應該聯想到，表現與結構分離，表現應該由CSS來控制，就是css與HTML分開嘛。表現與數據分離應該就是CSS與JS分離？？？其實否則。javascript

初級web開發一般會利用JS獲取頁面的ID或class獲取頁面的DOM，而後進行動態交互或渲染頁面，可是，當後序升級中將包含該id的DOM刪除了，那麼這個時候就會報錯。特別是ajax的大量運用，1）對頁面元素的class id等元素選擇器分散在代碼各個地方，沒有抽象出來。2）對於ajax異步獲取的數據，也沒有對數據持久層分離,基本都是按功能分散在代碼中各個部分。3）常常在html中鑲嵌大量JS運用代碼並且是JS主要功能代碼，使代碼分散不宜維護。簡小的頁面還能夠維護，若是是大的項目該如何處理呢？這時候就應用到了表現與數據分離。css

W3C標準中有規定，網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior），它們應該是相互分離的，便於後期的開發和維護。我理解的表現與數據分離是javaScript中的MVC，用JavaScript負責填充數據，HTML負責表現數據。下面咱們先說一說MVC的概念：html

採用MVC開發的最初目的就是讓表現與數據分離。MVC 是一種使用 MVC（Model View Controller 模型-視圖-控制器）設計建立 Web 應用程序的模式， Model（模型）負責在數據庫中存取數據。View（視圖）顯示數據。Controller（控制器）控制器負責從視圖讀取數據，控制用戶輸入，並向模型發送數據，保證視圖與模型數據同步更新。java

如何實現JavaScript的MVC呢？？？jquery

下面舉個栗子：select一個選項，並將該選項在後臺所對應的數據顯示在select下方。web

<!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。其結構以下：ajax