实现一个简陋的MVC框架

参考文章：30行代码实现Javascript中的MVC

MVC过程介绍

用户对View操作以后，View捕获到这个操作，会把处理的权利交移给Controller，Controller对相应的Model进行修改，当Model变更了以后，会通过观察者模式通知View进行更新。这里的关键步骤就是实现观察者模式。

实现过程

首先我们要明确我们的目标：实现数组的排序

<input type="button" value="reverse" id="toggleBtn"/>
<!--页面初始化后，input会显示数组的初始化值，当点击reverse按钮后，显示反转后的数组-->
<input type="text" data-bind="arr">
<!--用于测试多个dom结点绑定同一变量的情况-->
<input type="text" data-bind="arr">

new Controller(function (model){var data = [1,2,3,4,5];//调用set后，绑定了该数据的视图，会做相应的改变model.arr.set(data);var toggleBtn = document.getElementById('toggleBtn');toggleBtn.addEventListener('click',function () {//同样会自动更新视图model.arr.set(data.reverse());})
});

所以，这里关键的地方就是构造一个model对象，在model对象上事先已经绑定了所有的数据和其对应的视图，一旦某一个数据被改变，相应的视图也会进行更新。
2. 设计我们的MVC框架——mvc.js
定义一个观察者模式

function SubPub() {this.value = "";this.doms = [];
}
//类似于观察者中的publish
SubPub.prototype.set = function (value) {var self = this; selt.value = value;//异步更新队列setTimeout(function () {self.doms.forEach(function (dom) {dom.value = value.toString();})},0)
}
//类似于观察者中的subscribe
SubPub.prototype.bind = function (dom) {this.doms.push(dom);
}

function Controller(callback) {var doms = document.querySelectorAll('[data-bind]');var model= {};doms.forEach(function (dom) {var data = dom.getAttribute('data-bind');//可能多个dom结点绑定同一变量model[data] = model[data] || new SubPub();model[data].bind(dom);})callback.call(this,model);
}

使用ES5的新特性——Object.defineProperty

上面的代码中，我们修改数据时是这样的：

model.arr.set(data);

不是很自然，可不可换成这样呢：

model.arr = data;

实现这个功能就要用到Object.defineProperty中的set了，这样我们也不需要定义观察者了。
最后我们的mvc.js变成这样：

function Controller(callback) {var model = {};var doms = document.querySelectorAll('[data-bind]');doms.forEach(function (dom) {var data = dom.getAttribute('data-bind');if(model.data===undefined){model.data = null;var targets = document.querySelectorAll('[data-bind=' + data + ']');Object.defineProperty(model,data,{set: function (value) {model.data = value;targets.forEach(function (target) {target.value = value;})}})}})callback.call(this,model);
}

实现一个简陋的MVC框架相关推荐

怎样封装一个自己的mvc框架（七）
mvc框架封装到了最后一步,我们需要引入一个模板引擎twig 同样修改composer文件,在require中加入一行 "twig/twig":"*" 然后命令 ...
在Java中搭建一个简单的MVC框架
搭建一个简单的Java MVC框架一 . 前言二. 代码实现 1. 思路分析 2. 代码实现 2.1 Controller注解 2.2 RequestMapping注解 2.3 UserContr ...
自己动手写一个简单的MVC框架（第二版）
一.ASP.NET MVC核心机制回顾在ASP.NET MVC中,最核心的当属"路由系统",而路由系统的核心则源于一个强大的System.Web.Routing.dll组件. 在 ...
自己动手写一个简单的MVC框架（第一版）
一.MVC概念回顾路由(Route).控制器(Controller).行为(Action).模型(Model).视图(View) 用一句简单地话来描述以上关键点: 路由(Route)就相当于一个公司 ...
仿照源码，手写一个自定义 Spring MVC 框架
毫无疑问,Spring 框架目前已经成为 Java 开发的行业标准,Spring MVC 作为其 Web 解决方案,是所有 Java 开发者都必须掌握的基本技能,理解其底层原理,才能更好地应用它进行实 ...
搭建一个简单的MVC框架
背景为何要用MVC框架?首先我们知道不用框架的话,在javaweb项目中每个请求都要写一个servlet,并且要在web.xml中对每个servlet类的映射作配置,不方便开发,因此引入MVC框架. ...
学写一个 Java Web MVC 框架（一）
当前我们介绍的是一个简单的MVC,用8个类即实现完整Spring MVC核心功能,外加其他实用的小功能.它是怎么实现的呢?让我们来一探究竟! 源码在:https://gitee.com/sp42_ad ...
学写一个 Java Web MVC 框架（四）
访问请求处理当客户端发送一个请求,被自定义的过滤器MvcDispatcher拦截,解析请求地址和参数对象跳转到一个控制器的方法中,然后执行进行逻辑处理后返回响应内容给MvcDispatcher输出, ...
springmvc请求返回一个字符_Spring MVC框架详解01
SpringMVC是Spring框架的一个模块,Spring和SpringMVC无需通过中间整合层进行整合.SpringMVC是基于MVC架构的WEB框架,SpringMVC与Spring是父子容器之 ...

实现一个简陋的MVC框架

MVC过程介绍

实现过程

使用ES5的新特性——Object.defineProperty

实现一个简陋的MVC框架相关推荐

最新文章

热门文章