标题党。几天前看到一个30行写mvc的文章,东施效颦,也动手写了个60行的,功能上略微扩充一些,记录下来,后面有时间可以继续优化。

mvc其实是一个观察者模式。view来监听model,所以当model的数据有变化的时候,view可以自动更新视图。

既然view来监听model,那么是不是可以扩展一下,如果页面上多个模块同时使用一个数据源,也就是同时使用一个model的时候,是否可以让这些模块的

view都来监听这一个model,这样当model的数据发生变化时,监听该model的views们 视图同时也都发生了变化呢,肯定是可以的。

根据这个思路,花了差不多两个晚上的时间,写完了一个基本的雏形。

先看model。

function Model (value) {
this.value = value || '';
// idList保存的是 监听该model的view的id, 该idList示例:[{viewid1: {event1: function(){.....}}},{viewid2: {}}]
this.idList = [];
}; // 当model的数据变化的时候,监听model的view发生对应的变化
Model.prototype.changeValue = function (value) {
var that = this;
that.value = value;
var idList = that.idList; for (var k in idList) {
if (idList[k]) {
for (var j in idList[k]) {
idList[k][j].call(this, value);
}
}
}
};

下面是view

function View (id, eventList) {
this.id = id;
this.eventList = eventList || {};
}
// view基于model的事件,当model的数据变化时,view会通过这些事件
// 进行视图的改变
View.prototype.setEventList = function (eventList, model) {
var that = this;
that.eventList = eventList;
that.subscribeModel(model);
};
// view订阅model 这样可以保证多个view公用一个model
View.prototype.subscribeModel = function (model) {
var that = this;
var id = that.id;
model.idList[id] = that.eventList;
};

view里面并没有什么过于复杂的原理。

最后是controller,其实这个controller 可扩展性是很强的,因为只是简单的练习,controller里我并没有加太多的东西。

function Controller (model, view) {
this.model = model;
this.view = view;
} Controller.prototype.trigger = function () {
this.view.subscribeModel(this.model);
};

写了点html实验一下 OK的

// 以下是测试的代码
var view = new View ('block', {
'changeContent': function (data) {
document.getElementById('block').innerHTML = data;
}
}); var model = new Model(); var controller = new Controller(model, view);
controller.trigger(); model.changeValue('data111');

这里是有个问题的,就是当model里有默认的数据时,是没有去渲染view的,后续可以再修改。

通过这个简单的例子,主要是更加清楚model和view的关系。目前机遇mv的架构有很多,但基本原理都是一样的。

60行以内写mvc的更多相关文章

  1. 60行自己动手写LockSupport是什么体验?

    60行自己动手写LockSupport是什么体验? 前言 在JDK当中给我们提供的各种并发工具当中,比如ReentrantLock等等工具的内部实现,经常会使用到一个工具,这个工具就是LockSupp ...

  2. 教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏

    早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大 ...

  3. 60行JavaScript代码俄罗斯方块

    教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏   早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下( ...

  4. 源码分析系列 | 从零开始写MVC框架

    1. 前言 2. 为什么要自己手写框架 3. 简单MVC框架设计思路 4. 课程目标 5. 编码实战 5.1 配置阶段 web.xml配置 config.properties 自定义注解 5.2 初始 ...

  5. Python10行以内代码能有什么高端操作

    Python10行以内代码能有什么高端操作 Python凭借其简洁的代码,赢得了许多开发者的喜爱.因此也就促使了更多开发者用Python开发新的模块,从而形成良性循环,Python可以凭借更加简短的代 ...

  6. 大家一起写mvc(三)_结束

    上一篇介绍到要写mvc的所用的核心技术,这一篇我们就开始真正的开始写mvc,其实就是把昨天写过的代码进行一些组装就可以了. 我们用eclipse新建一个web项目.然后web.xml如下 <?x ...

  7. 大家一起写mvc(二)

    上一篇已经看了,我想大家都明白了mvc的原理,今天我们来说一下要写自己mvc框架必须要会的技术. mvc的目录是这样的 src目录是我们核心的mvc代码.这个代码明天讲,今天主要讲的代码都在test目 ...

  8. python实战:用70行代码写了一个山炮计算器!

    python实战训练:用70行代码写了个山炮计算器! 好了...好了...各位因为我是三年级而发牢骚的各位伙伴们,我第一次为大家插播了python的基础实战训练.这个,我是想给,那些python基础一 ...

  9. 使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)

    在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...

随机推荐

  1. C89和C99区别--简单总结

    (1)对数组的增强 可变长数组 C99中,程序员声明数组时,数组的维数可以由任一有效的整型表达式确定,包括只在运行时才能确定其值的表达式,这类数组就叫做可变长数组,但是只有局部数组才可以是变长的.可变 ...

  2. spring mvc 第一天【注解实现springmvc的基本配置】

    创建pojo,添加标识类的注解@Controller,亦可添加该Handler的命名空间:设置类的@RequestMapping(value="/hr") 该类中的方法(Handl ...

  3. tesseract3.01的训练和使用

    相关源码.资源下载:http://code.google.com/p/tesseract-ocr/downloads/list 训练步骤: 1.  Generate Training Images:生 ...

  4. task9暂存

    <h6>第一组项目</h6> <div class="wrap"> <div class="title"> &l ...

  5. UDP异步通信

    先看效果图 Server: using System; using System.Collections.Generic; using System.Text; using System.Net; u ...

  6. TOMCAT的安装部署配置(配图解)

    TOMCAT的安装部署配置 前提已经成功搭建配置JDK 下载好压缩包后,直接解压至某一目录下,目录中不能包含中文 双击安装文件,出现如下界面 点击[NEXT],出现如下界面 点击[I AGREE],出 ...

  7. C/C++入门---运算符

    1, 运算符的优先级 C语言的运算符共有15个优先级,各运算符及其优先级和结合律如下: 运算符 结合律 ()[]-> 从左到右 !~++ -- +(正号) -(负号) *(指针取址符) (typ ...

  8. websocket实例(显示文件导入处理进度)

    大批量数据导入时,需要即时显示对文件的处理进度.考虑ajax轮询太浪费资源,使用websocket实现. 项目使用Spring MVC(3.1),与websocket结合要求版本4.0以上.所以没有使 ...

  9. des加密解密——java加密,php解密

    最近在做项目中,遇到des加密解密的问题. 场景是安卓app端用des加密,php这边需要解密.之前没有接触过des这种加密解密算法,但想着肯定会有demo.因此百度,搜了代码来用.网上代码也是鱼龙混 ...

  10. mina IoBuffer

    mina IoBuffer 常用方法   Limit(int) 如果position>limit, position = limit,如果mark>limit, 重置mark Mark() ...