欢迎大家指导与讨论 : ）

　　前言

　　　　关于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. XML序列化和反序列化

    上篇总结了下JSON的序列化和反序列化,博园中大牛给了很多牛叉的评论,学习了不少. 不过在上篇中忘了把json序列化和反序列化的另外一种方式写上去了,这里做个简单的补充: Json篇:http://w ...

  2. Apache Lucene(全文检索引擎)—创建索引

    目录 返回目录:http://www.cnblogs.com/hanyinglong/p/5464604.html 本项目Demo已上传GitHub,欢迎大家fork下载学习:https://gith ...

  3. C#枚举、结构、数组、排序

  4. file_put_contents 错误:failed to open stream: Invalid argument 一种原因

    今天在测试nilcms系统的时候,出现了一个报错,导致缓存无法更新: file_put_contents(C:\UPUPW_AP5.4\vhosts\d.tv\NilCMS_APP\include_r ...

  5. 安装VisualStudio 2015 x64 中文企业版失败

    闲来无事尝鲜vs2015, 安装环境: Visual Box 4.3.30 Window 10 (cn_windows_10_enterprise_x64_dvd_6846957) vs2015(vs ...

  6. iOS推送（利用极光推送）

    本文主要是基于极光推送的SDK封装的一个快速集成极光推送的类的封装(不喜勿喷) (1)首先说一下推送的一些原理: Push的原理: Push 的工作机制可以简单的概括为下图 图中,Provider是指 ...

  7. CouchDB简介

    类型:开源数据库,Apache项目 存储格式:JSON 查询语言:JavaScript API :MapReduce.HTTP 特点 MVCC(Multiversion concurrency con ...

  8. SSRS ReportServer Database 的Blocking问题

    我们监控SQL SERVER数据库的阻塞情况时,老是收到在SSRS 里面出现SQL阻塞情况,刚开始由于事情多,没有太关注ReportServerTempDB里面的会话阻塞情况,但是老是出现这种频繁阻塞 ...

  9. Centos 6.5 安装ELK

    安装java 查看java安装路径 修改环境变量 添加如下内容: export JAVA_HOME=/usr/java/jdk1.8.0_91 export PATH=$JAVA_HOME/bin:$ ...

  10. linux安装VirualBox虚拟机

    第一步:安装VNC 1. 安装vnc yum install -y tigervnc* 2.启动vncserver [root@xxx ~]# vncserver You will require a ...