初衷

上一篇已经实现了数据的双向绑定，但model的控制范围是整个文档。在实际project中必需要有作用范围，以便做ui模块的拆分。

这一篇，我们希望实现像angularjs一样的控制器继承：

1. 父controller的Model能够在子controller里被訪问到

2. 子controller的model不影响父controller

3. controller继承关系在html中指定。而不是js中指定

目标

html里，用isi-controller属性去声明控制器：

<body>

    <div isi-controller="ParentController">

        <input data-bind="name">

        <div isi-controller="SubController">

            <input data-bind="name">

        </div>

    </div>

</body

希望上面的input name 改了。以下的会跟着变，而以下的变了，上面的不变。

js里，用和上面isi-controller属性值同名的函数定义控制器：

function ParentController() {

    var model = new Model();

    model.set('name', 'parent');

}

function ParentController() {

    var model = new Model();

    model.set('name', 'sub');

}

对用户来说，仅仅要写这些。就完事儿了。

实现

版本号1

这个版本号採用最简单直观的思路：框架去找$(‘[isi-controller]’)的元素。然后给这些元素分别去绑定监听器、运行控制器函数

代码先列了：

index.html:

<html>

  <head>

    <title>simple MVVM</title>

    <script src="js/ParentController.js"></script>

    <script src="js/SubController.js"></script>

    <script src="js/frame_v2.js"></script>

  </head>

  <body isi-controller="ParentController">

    <input type="text" data-bind="name">

    <div isi-controller="SubController">

      <input type="text" data-bind="name">

    </div>

  </body>

</html>

ParentController.js:

function ParentController() {

    var model = new Model();

    model.set('name', 'parent');

}

SubController.js:

function SubController() {

    var model = new Model();

    model.set('name','sub');

}

frame_v2.js: (对比上一篇，主要修改在绑监听器和new Model的自己主动化)

var pubsub = ... //见上一篇

var Model = ...  //见上一篇

// listener capture view changes --> publish model.change event

var changeHandler = function(event) {

    var target = event.target,

        propName = target.getAttribute('data-bind');

    if( propName && propName !== '' ) {

        pubsub.pub('model.change', propName, target.value);

    }

    event.stopPropagation();

}

/*----------- Init --------------*/

window.onload = function() {

    /* first step:

     * find controllers' dom

     */

    var controllerRanges = document.querySelectorAll('[isi-controller]');

    /* second step:

     * bind listeners for each controllers' range,

     * view.change event --> change each controllers' range

     */

    for(var i=0, len=controllerRanges.length; i<len; i++) {

        controllerRanges[i].addEventListener('change', changeHandler, false);

        // view.change event --> change view

        (function(index){

            pubsub.sub('view.change', function(propName, newVal) {

                var elements = controllerRanges[index].querySelectorAll('[data-bind=' + propName +']'),

                    tagName;

                for(var i=0,l=elements.length; i<l; i++) {

                    tagName = elements[i].tagName.toLowerCase();

                    if(tagName==='input' || tagName==='textarea' || tagName==='select') {

                        elements[i].value = newVal;

                    } else {

                        elements[i].innerHTML = newVal;

                    }

                }

            });

        })(i);

    }

     /* third step:

     * execute each controller function

     */

    for(var i=0, len=controllerRanges.length; i<len; i++) {

        var controllerName = controllerRanges[i].getAttribute('isi-controller');

        eval(controllerName+'()');

    }

}

看看效果：



悲剧了。

没有实现第二个初衷：子控制器不影响父控制器。

这个问题该怎样解决呢？

版本号二，子不影响父

细致看代码，之所以会出现故障，是由于view.change信道的作用范围是有问题的。无论哪个model发出的view.change事件，两个控制器的view都会改变。

所以，我们给公布view.change事件的时候，多公布一个控制器名。好让接收view.change的时候知道应不应该修改html:

var Model = function(controllerName) {

    var model = {

        controllerName:controllerName,

        props: {},

        set: function(propName, value) {

            this.props[propName] = value;

            pubsub.pub('view.change', propName, value, this.controllerName); //就是这里！

}

    }

控制器里new Model的时候注意把controller的名字初始化进去：

ParentController.js:

function ParentController() {

    var model = new Model('ParentController');

    model.set('name', 'parent');

}

最后接收view.change信道消息的时候，推断下controllerName:

pubsub.sub('view.change', function(propName, newVal, controllerName) {

                ....

                thisControllerName = controllerRanges[index].getAttribute('isi-controller'),

                if(thisControllerName !== controllerName)

                    return;

                ....

}

当然。监听器公布model.change的时候也是一样。要把控制器名称公布出去。代码就不贴了。

再看看效果：



妥了

全部代码：

github/victorisildur

很easy的js双向绑定框架（二）：控制器继承的更多相关文章

  1. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  2. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  3. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  4. vue.js双向绑定之--select获取text

    在大多数情况下select下拉菜单都是value和text设置不同的值的,value一般来说是与后台交互的值,而text是前端用来显示的文本: 但是,vue.js对到表单的双向绑定时如果option设 ...

  5. js 双向绑定

    //双向绑定实例 <input name="" ng-bind-123="name" /> function DataBinder( object_ ...

  6. Angular js 双向绑定时字符串的转换成 数字类型的问题

    问题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <scrip ...

  7. js 双向绑定数据

    let aaa = []; let bbb = [1,2,3]; let ccc = [0,9,8]; aaa = bbb; //此时aaa与bbb被绑定(aaa指向bbb的指向) ,若使用push则 ...

  8. js双向绑定和地址传递带来的痛苦解决方案之对象拷贝

    function cloneObj(obj) { var newObj = {}; if (obj instanceof Array) { newObj = []; } for (var key in ...

  9. node.js面向对象实现（二）继承

    http://blog.sina.com.cn/s/blog_b5a53f2e0101nrdi.html 继承是面向对象中非常重要的一个概念,那么在Node.js中如何实现继承呢? node.js在u ...

随机推荐

  1. Docker实践4: 基于nginx对后端的weblogic负载均衡

    为什么要用Nginx(抄了一段) 1.nginx相对于apache的优点: 轻量级,同样起web服务,比apache占用更少的内存及资源 抗并发,nginx处理请求是异步非阻塞的,而apache则是阻 ...

  2. RabbitMQ,Apache的ActiveMQ,阿里RocketMQ,Kafka,ZeroMQ,MetaMQ,Redis也可实现消息队列，RabbitMQ的应用场景以及基本原理介绍，RabbitMQ基础知识详解，RabbitMQ布曙

    消息队列及常见消息队列介绍 2017-10-10 09:35操作系统/客户端/人脸识别 一.消息队列(MQ)概述 消息队列(Message Queue),是分布式系统中重要的组件,其通用的使用场景可以 ...

  3. JS中event.preventDefault()取消默认事件能否还原？

    参考知乎讨论:https://www.zhihu.com/question/21891734

  4. fl2440 platform总线led字符设备驱动

    首先需要知道的是,设备跟驱动是分开的.设备通过struct device来定义,也可以自己将结构体封装到自己定义的device结构体中: 例如:struct platform_device: 在inc ...

  5. HA分布式集群一hadoop+zookeeper

    一:HA分布式配置的优势: 1,防止由于一台namenode挂掉,集群失败的情形 2,适合工业生产的需求 二:HA安装步骤: 1,安装虚拟机 1,型号:VMware_workstation_full_ ...

  6. yoman搭建你的react-webpack应用

    还没有npm和node的要提前做好准备工作 做好这一切之后 我们安装yo,记住安装在全局变量中,我们需要用他的命令工具 npm install -g yo 接下来安装yo提供的react-webpac ...

  7. 使用Nginx+uWSGI+Django方法部署Django程序(上)

    Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. 在这种方式中,我们的通常做法是,将nginx作为服务器最前端,它将接收WEB的所有请求,统一管理请求.ng ...

  8. LoadRunner中如何验证下载的文件大小、统计下载时间、度量下载速度

    LoadRunner中的web_get_in_property函数可用于返回上一个HTTP请求的相关信息,包括HTTP请求返回码.下载大小.下载时间等: The web_get_int_propert ...

  9. jquery autoComplete的使用代码一则

    $(function() { $("#vipCustomer").autocomplete({ source : function(request, response) { $.a ...

  10. JSON.parse 的用法，在js中用的。也是反序列化用法。

    参数 text 必需. 一个有效的 JSON 字符串. reviver 可选. 一个转换结果的函数. 将为对象的每个成员调用此函数. 如果成员包含嵌套对象,则先于父对象转换嵌套对象. 对于每个成员,会 ...