欢迎大家指导与讨论 : ）

　　前言

　　　　关于MVVM的原理大家可以参考这篇文章。《【翻译】Object.observe()带来的数据绑定变革 》http://www.tuicool.com/articles/ZVVNBv。

　　　　文章中的代码为笔者实践时写的小demo，可以运行。

　　代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <h1>作用域A</h1>

        <input type="text" two-way-bind="test">

        <h1 bind="test"></h1>

    </div>

    <hr />

    <div id="apple">

        <h1>作用域B</h1>

        <input type="text" two-way-bind="test">

        <h1 bind="test"></h1>

    </div>

    <hr />

    <script type="text/javascript">

        // vm -> view model； v -> view

        // 自定义两个绑定“指令”一个是从vm->v的绑定，一个是双向绑定

        var directive_bind = ['bind', 'two-way-bind'];

        // 常量 声明该类型仅仅是vm->v 的DOM渲染

        var DOM = 'DOM'

            // 常量 声明该类型是双向绑定

        var TWOWAY = 'TWOWAY'

            // 新增两个作用域，用的是元素ID

        var vm = new mvvm('app');

        var vm2 = new mvvm('apple')

        // 这是一个构造函数

        // 用来返回一个可以被监测变化、有固定范围的vm

        function mvvm(rootEle) {

            this.scope = rootEle

                // 监听vm

            observe(this)

                // 确定作用域 —— 同时为v -> vm做事件监听

            fineScope(this)

        }

        function observe(vm) {

            // 监听vm对象模型的改变

            Object.observe(vm, function(changes) {

                changes.forEach(function(change, i) {

                    switch (change.type) {

                        case 'add':

                            fineScope(vm)

                            break;

                        case 'delete':

                            fineScope(vm);

                            break;

                        case 'update':

                            fineScope(vm);

                            break;

                        default:

                            break;

                    }

                })

            })

        }

        // vm的改变引起v的改变 此处是 vm -> v

        function updateView(ele, value, type) {

            if (type === DOM) {

                if (value) {

                    ele.innerHTML = value

                } else {

                    ele.innerHTML = ''

                }

            } else if (type == TWOWAY) {

                if (value) {

                    ele.value = value

                } else {

                    ele.value = ''

                }

            }

        }

        function fineScope(vm) {

            var vmRootEle = document.getElementById(vm.scope)

                // 递归遍历该作用域下的所有DOM

            findChild(vmRootEle, vm)

        }

        function findChild(ele, vm) {

            // 查找所有自定义属性：bind、two-way-bind

            for (var i = 0; i < directive_bind.length; i++) {

                // 如果DOM有我们的自定义绑定属性

                if (ele.getAttribute(directive_bind[i]) && directive_bind[i] === 'bind') {

                    // 则按 vm->v的方向进行渲染

                    updateView(ele, vm[ele.getAttribute('bind')], DOM)

                } else if (ele.getAttribute(directive_bind[i]) && directive_bind[i] === 'two-way-bind') {

                    var attr = ele.getAttribute('two-way-bind')

                        // 同理

                    updateView(ele, vm[attr], TWOWAY)

                        // 有点不同，这里是双向绑定，需要为该DOM增加事件监听

                    twoWayBind(ele, attr, vm)

                }

            }

            // 递归遍历

            if (ele.hasChildNodes()) {

                var sonNodes = ele.childNodes;

                for (var j = 0; j < sonNodes.length; j++) {

                    if (sonNodes[j].nodeType === 1) {

                        findChild(sonNodes[j], vm)

                    }

                }

            }

        }

        function twoWayBind(ele, prop, vm) {

            // 局限性：本DOM只是用了input[text]，如果要监听其他input[x]应该要用对应的监听方法

            ele.oninput = function() {

                vm[prop] = ele.value

            }

        }

    </script>

</body>

</html>

原生JS实现MVVM模式的更多相关文章

  1. 由项目浅谈JS中MVVM模式

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.    背景 最近项目原因使用了durandal.js和knock ...

  2. js架构设计模式——由项目浅谈JS中MVVM模式

    1.    背景 最近项目原因使用了durandal.js和knockout.js,颇有受益.决定写一个比较浅显的总结. 之前一直在用SpringMVC框架写后台,前台是用JSP+JS+标签库,算是很 ...

  3. 原生JS：严格模式详解

    严格模式 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) 设计目的 设立”严格模式 ...

  4. dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  5. 使用单体模式设计原生js插件

    ----------基于上次写的jquery插件进行改造  http://www.cnblogs.com/GerryOfZhong/p/5533773.html 背景:jQuery插件依赖jQuery ...

  6. 浅谈MVVM模式和MVP模式——Vue.js向

    浅谈MVVM模式和MVP模式--Vue.js向 传统前端开发的MVP模式 MVP开发模式的理解过程 首先代码分为三层: model层(数据层), presenter层(控制层/业务逻辑相关) view ...

  7. js架构设计模式——MVVM模式下，ViewModel和View，Model有什么区别

    MVVM模式下,ViewModel和View,Model有什么区别 Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model. View:也很简单,就 ...

  8. 抛弃JQ，回归原生js……

    之前我写过一篇文章叫做<jq不会被淘汰>--而事实上它真的不会被淘汰,因为即使在mvvm框架盛行的今天,原生js的api越来越友好的今天,jq依然在用户量上是霸主-- 但是今天我们要讨论的 ...

  9. Vue.js 和 MVVM 的小细节

    Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...

随机推荐

  1. 【工业串口和网络软件通讯平台(SuperIO)教程】九.重写通讯接口函数，实现特殊通讯方式

    SuperIO相关资料下载:http://pan.baidu.com/s/1pJ7lZWf 1.1    统一的IO接口 开发一套设备驱动同时具备串口和网络通讯能力,通讯接口在逻辑上是统一的,在此基础 ...

  2. Xdebug文档（三）堆栈跟踪

    当xdebug激活时,PHP一旦要显示通知.警告或错误时,xdebug 显示堆栈跟踪信息.这个堆栈信息能跟据你的需要来配置显示. Xdebug显示的堆栈跟踪都是以保守数量状态显示信息.因为大量的信息处 ...

  3. 使用原生JS实现一个风箱式的demo，并封装了一个运动框架

    声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的 ...

  4. 全文检索引擎 Solr 部署与基本原理

    全文检索引擎 Solr 部署与基本原理 搜索引擎Solr环境搭建实例 关于 solr , schema.xml 的配置说明 全文检索引擎Solr系列-–全文检索基本原理 一.搜索引擎Solr环境搭建实 ...

  5. UIToolBar

    //UIToolBar 是导航控制器默认隐藏的工具条 //设置UIToolBar的隐藏状态 self.navigationController.toolbarHidden = NO; //如何找到UI ...

  6. Android屏幕适配

    安卓分辨率的相关知识 http://leoray.leanote.com/post/android-resolution Android内存占用公式 系统内存 = 像素宽 * 像素高 * 像素所占用的 ...

  7. OC 类别与扩展(匿名类别)

    OC 类别与扩展(匿名类别) 类别(Categroy): 又称为扩展类,在类的原基础上扩展方法,且不可添加变量,如果扩展的方法与原始类中的方法相同,则会隐藏原始方法,且不可在扩展方法中通过super调 ...

  8. Java异常之自定义异常

    哎呀,妈呀,又出异常了!俗话说:"代码虐我千百遍,我待代码如初恋". 小Alan最近一直在忙着工作,已经很久没有写写东西来加深自己的理解了,今天来跟大家聊聊Java异常.Java异 ...

  9. SE（homework3）_敏捷模型

    今天老师上课主要和我们讲解了软件开发模型类型.既然是敏捷模型,那么什么是非敏捷模型呢?了解这里点,会更清楚什么是敏捷模想.我们所知道的非敏捷模型有瀑布模型,我们知道这是早期软件开发的经典模型,流程主要 ...

  10. ORACLE AWR结合ASH诊断分析enq: TX - row lock contention

    公司用户反馈一系统在14:00~15:00(2016-08-16)这个时间段反应比较慢,于是生成了这个时间段的AWR报告, 如上所示,通过Elapsed Time和DB Time对比分析,可以看出在这 ...