gitee
M：Model 數據模型（模型層）→ 操作數據庫（對數據進行增刪改查）
V：View視圖層 → 顯示視圖或視圖模板
C：Controller 控制器層 →
邏輯層 數據和視圖關聯掛載和基本的邏輯操作
API層 前端請求的API對應的是控制器中的方法
服務端渲染
View需要數據 → Controller對應的方法 → 調用Model的方法 → 獲取數據 → 返回給Controller對應的方法 → render到View中
前端渲染
前端 → 異步請求URL → 對應Controller中某個方法 → Model層的方法 → 操作數據庫 → 獲取數據 → 返回給Controller → 響應回前端
前端MVC
Model → 管理視圖所需要的數據 → 數據與視圖關聯
View → HTML模板 + 視圖渲染
Controller → 管理事件邏輯
Model :
① data → n1 n2 method res // 組織數據
② watch → data change → update view // 數據監聽/數據代理 變化時觸發View.render()
View ：
template → render // 組織+渲染/更新HTML模板
Controller ：
event trigger → model/data // 事件處理函數定義與綁定
驅動被分離成三部分
(function () {function init() {model.init()view.render()controller.init()}var model = {data: {a: 0,b: 0,s: '+',r: 0,},init: function () {var _this = this;for (var k in _this.data) {(function (k) {console.log('k', k)// 用model來訪問、代理Object.defineProperty(_this, k, {get: function () {console.log('get model')return _this.data[k]},set: function (newVal) {_this.data[k] = newValview.render({ [k]: newVal })console.log('set model')}})})(k)}}}// calculatorvar view = {el: '#app',template: `<P><span class="cal-a">{{ a }}</span><span class="cal-s">{{ s }}</span><span class="cal-b">{{ b }}</span><span>=</span><span class="cal-r">{{ r }}</span></P><p><input type="text" placeholder="Number a" class="cal-input a"/><input type="text" placeholder="Number b" class="cal-input b"/></p><p><button class="cal-btn">+</button><button class="cal-btn">-</button><button class="cal-btn">*</button><button class="cal-btn">/</button></p> `,// 傳入變化的數據 data{}render: function (mutedData) {if (!mutedData) {// 渲染模板this.template = this.template.replace(/\{\{(.*?)\}\}/g,function (node, key) {return model[key.trim()] })var container = document.createElement('div')container.innerHTML = this.template;document.querySelector(this.el).appendChild(container)} else {// 重新渲染更新的部分for (var k in mutedData) {document.querySelector('.cal-' + k).textContent = mutedData[k]}}}}var controller = {init: function () {// 獲取dom 綁定事件處理函數// 監聽輸入框input事件 拿到值 改變model 改變viewvar oCalInputs = document.querySelectorAll('.cal-input'),oCalBtns = document.querySelectorAll('.cal-btn'),inputItem,btnItem;for (var i = 0; i < oCalInputs.length; i++) {inputItem = oCalInputs[i];inputItem.addEventListener('input', this.handleInput, false)}console.log(oCalBtns)for (var i = 0; i < oCalBtns.length; i++) {btnItem = oCalBtns[i];btnItem.addEventListener('click', this.handleBtnClick, false)}},// 輸入時運算handleInput: function (e) {var tar = e.target,value = Number(tar.value),field = tar.className.split(' ')[1];// 輸入時-Model改變 自動計算-Model改變model[field] = value;with (model) {r = eval('a' + s + 'b')// 輸入事件監聽 修改model.r 走了set}},// 加減乘除按鈕時也運算handleBtnClick: function (e) {var tar = e.target,type = tar.textContent;console.log('type', type)model.s = type;with (model) {r = eval('a' + s + 'b')}}}init()
})()
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>MVC</title>
</head><body><div id="app"></div><script type="text/javascript" src='./index.js'></script>
</body></html>
)
