国外主流网站开发技术,竞价推广计划,wordpress linux 下载,网站进入沙盒后gitee M#xff1a;Model 数据模型#xff08;模型层#xff09;→ 操作数据库#xff08;对数据进行增删改查#xff09; V#xff1a;View视图层 → 显示视图或视图模板 C#xff1a;Controller 控制器层 → 逻辑层 数据和视图关联挂载和基本的逻辑操作 API层 前端请…gitee MModel 数据模型模型层→ 操作数据库对数据进行增删改查 VView视图层 → 显示视图或视图模板 CController 控制器层 → 逻辑层 数据和视图关联挂载和基本的逻辑操作 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: Pspan classcal-a{{ a }}/spanspan classcal-s{{ s }}/spanspan classcal-b{{ b }}/spanspan/spanspan classcal-r{{ r }}/span/Ppinput typetext placeholderNumber a classcal-input a/input typetext placeholderNumber b classcal-input b//ppbutton classcal-btn/buttonbutton classcal-btn-/buttonbutton classcal-btn*/buttonbutton classcal-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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleMVC/title
/headbodydiv idapp/divscript typetext/javascript src./index.js/script
/body/html
