这是@尚春实现的MVVM，使用定时器轮询，只支持{{}}与input.value的修改。

这只能算是一个玩具，真正的MVVM需要有更复杂的扫描机制，JS解析器，双向绑定链什么的。

<!DOCTYPE html>

<html>

<head>

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

  <meta charset="utf-8">

  <title>JS Bin</title>

</head>

<body>

  <div data-component="input">

    <template>

      <input type="text" name="username" tb-model="username" value="" />

      <span>{{ username }}</span>

    </template>

  </div>

  <script>

var DIRECTIVE_ATTR_MODEL = 'tb-model',

    regMustache = /\{\{\s*(\w+)\s*\}\}/g,

    slice = Array.prototype.slice;

function boot() {

    var components = slice.call(document.querySelectorAll('[data-component]'), 0);

    components.forEach(function (el) {

        var component = el.getAttribute('data-component');

        bootComponent(el, window[component + 'Controller']);

    });

}

function bootComponent(el, controller) {

    var $scope = {},

        elFrag = el.querySelector('template').content.cloneNode(true);

    traverse(elFrag, $scope);

    el.appendChild(elFrag);

    controller($scope);

}

function traverse(root, $scope) {

    for (var el = root.firstChild; el; el = el.nextSibling) {

        parseElement(el, $scope);

        if (el) {

            traverse(el, $scope);

        }

    }

}

function parseElement(el, $scope) {

    if (el.nodeType === 1) {

        // element

        if (el.hasAttribute(DIRECTIVE_ATTR_MODEL)) {

            var model = el.getAttribute(DIRECTIVE_ATTR_MODEL);

            el.removeAttribute(DIRECTIVE_ATTR_MODEL);

            el.addEventListener('input', function () {

                $scope[model] = this.value;

            });

        }

    } else if (el.nodeType === 3) {

        // text node

        var text = el.textContent,

            tpl = [],

            lastIndex = 0,

            match = regMustache.exec(text);

        while (match) {

            tpl.push(text.substring(lastIndex, regMustache.lastIndex - match[0].length));

            tpl.push({

                type: 'var',

                content: match[1]

            });

            lastIndex = regMustache.lastIndex;

            match = regMustache.exec(text);

        }

        watch($scope, function () {

            text = '';

            tpl.forEach(function (item) {

                text += typeof item === 'string' ? item : $scope[item.content];

            });

            el.textContent = text;

        });

    }

}

function watch($scope, cb) {

    var old = _.cloneDeep($scope),

        timer;

    timer = setInterval(function () {

        if (!_.isEqual($scope, old)) {

            cb($scope, old);

            old = _.cloneDeep($scope);

        }

    }, 50);

}

function inputController($scope) {

    $scope.username = 'spring';

}

boot();

  </script>

</body>

</html>

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>

</head>
<body>
<div data-component="input">
<template>
<input type="text" name="username" tb-model="username" value="" />
<span>{{ username }}</span>
</template>
</div>
<script>
var DIRECTIVE_ATTR_MODEL = 'tb-model',
regMustache = /\{\{\s*(\w+)\s*\}\}/g,
slice = Array.prototype.slice;

function boot() {
var components = slice.call(document.querySelectorAll('[data-component]'), 0);
components.forEach(function (el) {
var component = el.getAttribute('data-component');
bootComponent(el, window[component + 'Controller']);
});
}

function bootComponent(el, controller) {
var $scope = {},
elFrag = el.querySelector('template').content.cloneNode(true);
traverse(elFrag, $scope);
el.appendChild(elFrag);
controller($scope);
}

function traverse(root, $scope) {
for (var el = root.firstChild; el; el = el.nextSibling) {
parseElement(el, $scope);
if (el) {
traverse(el, $scope);
}
}
}

function parseElement(el, $scope) {
if (el.nodeType === 1) {
// element
if (el.hasAttribute(DIRECTIVE_ATTR_MODEL)) {
var model = el.getAttribute(DIRECTIVE_ATTR_MODEL);
el.removeAttribute(DIRECTIVE_ATTR_MODEL);
el.addEventListener('input', function () {
$scope[model] = this.value;
});
}
} else if (el.nodeType === 3) {
// text node
var text = el.textContent,
tpl = [],
lastIndex = 0,
match = regMustache.exec(text);
while (match) {
tpl.push(text.substring(lastIndex, regMustache.lastIndex - match[0].length));
tpl.push({
type: 'var',
content: match[1]
});
lastIndex = regMustache.lastIndex;
match = regMustache.exec(text);
}
watch($scope, function () {
text = '';
tpl.forEach(function (item) {
text += typeof item === 'string' ? item : $scope[item.content];
});
el.textContent = text;
});
}
}

function watch($scope, cb) {
var old = _.cloneDeep($scope),
timer;
timer = setInterval(function () {
if (!_.isEqual($scope, old)) {
cb($scope, old);
old = _.cloneDeep($scope);
}
}, 50);
}

function inputController($scope) {
$scope.username = 'spring';
}

boot();
</script>
</body>
</html>

运行代码

一个简单的MVVM雏形的更多相关文章

  1. 230行实现一个简单的MVVM

    作者:mirone链接:https://zhuanlan.zhihu.com/p/24451202来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. MVVM这两年在前端届 ...

  2. 如何实现一个简单的MVVM框架

    接触过web开发的同学想必都接触过MVVM,业界著名的MVVM框架就有AngelaJS.今天闲来无事,决定自己实现一个简单的MVVM框架玩一玩.所谓简单,就是仅仅实现一个骨架,仅表其意,不摹其形. 分 ...

  3. 一个简单的 MVVM 实现

    简介 一个简单的带有双向绑定的 MVVM 实现. 例子 使用 新建一个 ViewModel 对象, 参数分别为 DOM 元素以及绑定的数据即可. 指令 本 MVVM 的指令使用 data 数据, 即 ...

  4. 撸一个简单的MVVM例子

    我个人以为mvvm框架里面最重要的一点就是VM这部分,它要与Model层建立联系,将Model层转换成可以被View层识别的数据结构:其次也要同View建立联系,将数据及时更新到View层上,并且响应 ...

  5. JavaScript 实现一个简单的MVVM前端框架(ES6语法)

    前言 随着前端各大框架的崛起,为我们平时的开发带来了相当的便利,我们不能一直停留在应用层面,今天就自己动手实现一个乞丐版的MVVM小框架 完整代码github地址 效果 html代码 <div ...

  6. 基于vue实现一个简单的MVVM框架（源码分析）

    不知不觉接触前端的时间已经过去半年了,越来越发觉对知识的学习不应该只停留在会用的层面,这在我学jQuery的一段时间后便有这样的体会. 虽然jQuery只是一个JS的代码库,只要会一些JS的基本操作学 ...

  7. 用js实现一个简单的mvvm

    这里利用的object.defineproperty() 方法; <input     id='input'><p id='p'><p/>js: const dat ...

  8. MVVM之旅（1）创建一个最简单的MVVM程序

    这是MVVM之旅系列文章的第一篇,许多文章和书喜欢在开篇介绍某种技术的诞生背景和意义,但是我觉得对于程序员来说,一个能直接运行起来的程序或许能够更直观的让他们了解这种技术.在这篇文章里,我将带领大家一 ...

  9. 【UWP开发】一个简单的Toast实现

    Toast简介 在安卓里Toast是内置原生支持,它是Android中用来显示显示信息的一种机制.它主要用于向用户显示提示消息,没有焦点,显示的时间有限,过一定的时间就会自动消失.在UWP中虽然没有原 ...

随机推荐

  1. js搜索算法——二分搜索

    二分搜索算法就是折半查找,是一种效率较高的查找方法.前提条件是要查找的数组是有序的.算法的实现还是相对简单的: function binarySearch(arr,item){ var min = 0 ...

  2. word问题禁止宏

    [在此处输入文章标题] 解决Word2010关闭文档时提示:"您正在试图运行的函数包含有宏或需要宏支持的内容" http://www.cnblogs.com/rhxuza1993/ ...

  3. tensorflow中 tf.train.slice_input_producer 和 tf.train.batch 函数

    tensorflow数据读取机制 tensorflow中为了充分利用GPU,减少GPU等待数据的空闲时间,使用了两个线程分别执行数据读入和数据计算. 具体来说就是使用一个线程源源不断的将硬盘中的图片数 ...

  4. L3-011 直捣黄龙 （30 分）

    本题是一部战争大片 —— 你需要从己方大本营出发,一路攻城略地杀到敌方大本营.首先时间就是生命,所以你必须选择合适的路径,以最快的速度占领敌方大本营.当这样的路径不唯一时,要求选择可以沿途解放最多城镇 ...

  5. DesignPattern（五）行为型模式（上）

    行为型模式 行为型模式是对在不同对象之间划分责任和算法的抽象化.行为模式不仅仅关于类和对象,还关于它们之间的相互作用.行为型模式又分为类的行为模式和对象的行为模式两种. 类的行为模式——使用继承关系在 ...

  6. FTP非交互式远程上传文件

    由于项目需要,每月定时上传一份备份文件到远程备份机器. 机器拓扑结构如下: backup机器上启动ftp server,server1和server2分别安装ftp客户端 定时执行脚本如下: uplo ...

  7. python random模块（随机数）详解

    使用前要先导入random模块 import random random.randomrandom.random()用于生成一个0到1的随机符点数: 0 <= n < 1.0 random ...

  8. am335x_y蜂鸣器驱动

    修改文件:1.板级文件/arch/arm/mach-omap2/board-am335xevm.c static struct platform_device buzzer_device= { .na ...

  9. thinkphp 模型验证

    <?php class FormModel extends Model { // 自动验证设置 /* * 一:自动验证 自动验证的定义是这样的:array(field,rule,message, ...

  10. 【linux】linux权限管理

    一.权限的基本概念                                                   权限:访问计算机资源或服务的访问能力. Linux中,每一个资源或者服务的权限, ...