欢迎大家指导与讨论 : ）

　　前言

　　　　关于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. mysql基本操作

    1.创建表:create table if not exists student(id integer(4) primary key auto_increment,name varchar(10),s ...

  2. Xdebug文档（六） 分析PHP脚本

    分析PHP脚本Xdebug内置分析器能让你找到脚本中的瓶颈并用额外的工具诸如KcacheGrind或WinCacheGrind工具可视化. 介绍 Xdebug分析器是分析PHP代码和判断瓶颈或确定代码 ...

  3. (原) 2.2 ZkClient使用

    本文为原创文章,转载请注明出处,谢谢 ZkClient使用 1.jar包引入,演示版本为0.8,非maven项目,可以下载jar包导入到项目中 <dependency> <group ...

  4. kmdjs api reference

    总览 kmdjs的主要就两个API:kmdjs.config和define kmdjs.config kmdjs.config是用于项目整体配置,一般的配置如下所示: kmdjs.config({ n ...

  5. angular源码分析：angular中入境检察官$sce

    一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...

  6. centos 更换软件源

    最近都在使用国内的VPS.系统统一使用的都是Linux系统.但是,有一些服务商的系统给默认设置的是国外的.这样就会导致下载速度缓慢.于是,找到了国内几家比较热门的镜像点.奉献给大家.下面的镜像全部支持 ...

  7. Java Web中乱码问题

    response.setContentType("text/html;charset=UTF-8"); 用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式.什么编码读取这个 ...

  8. 【iOS】在Swift中使用JSONModel

    前言 首先所有的Model还是使用oc来写——看到这一句是不是想关网页了- - #,在swift里面直接写一直报错所以就将就用oc来写了,这里主要是分享一下搭配Alamofire使用的经验. 声明 欢 ...

  9. php new self()和new static()

    class A { public static function get_self() { return new self(); } public static function get_static ...

  10. .NET 4.5 中新提供的压缩类

    Windows8 的开发已经如火如荼开始了,在 Windows8 中提供的 .NET Framework 已经更新到了 4.5 版,其中又增加了一些新的特性,对压缩文件的支持就是其中之一. 在 4.5 ...