这是@尚春实现的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. 第12课：HTML基础之DOM操作1

    DOM(Document Object Model):文本对象模型 dom对象实际上是html页面转成成的文本对象,可以通过dom对象中js提供的方法找到htm中的各个标签. 练习URL:http:/ ...

  2. mongdb分布式

    搭建高可用mongodb集群(一)——配置mongodb Posted on 17 十一月, 2013 by lanceyan | 21 Replies 在大数据的时代,传统的关系型数据库要能更高的服 ...

  3. Oozie_03运行官方案例【20161116】

    3.1官方的案例 (1)Oozie根目录下找到 oozie-examples.tar.gz (2)解压tar -zxvf oozie-examples.tar.gz  生成example文件夹 [ha ...

  4. 前端打印日志到localStroge并导出

    interface LogEntry { data: any time: Date } export class PersistantLog { //最大条数 maxEntries = 3000; i ...

  5. [CSAcademy]Colored Forests

    csacademy description 有\(M\)种颜色编号为\(1-M\).现给树上的每个点染上这\(M\)种颜色中的一种,定义一棵树是\(\mbox{colorful}\)的当且仅当这棵树上 ...

  6. 【转】嵌入式Linux文件系统启动脚本及分析

    原文网址:http://www.linuxidc.com/Linux/2011-03/33728.htm 在内核初始化完成后,嵌入式linux 文件系统的启动过程主要包含以下几个步骤: 1. 执行/s ...

  7. 如何查看MySql的BLOB内容

    一款Mysql的工具: SQLyog. 强项在于可以把blob的内容直接显示出来. 我觉得其实做产品能够活挺厉害,因为你做的东西确实为客户提供价值:在云云产品之中,能够让客户发现你并使用,购买你的产品 ...

  8. erlang程序发布的时候需要注意的地方

    假如你的程序依赖三方application,比如cowboy,启动三方程序有两种方式 在erl脚本里面手工启动,这种在使用rebar generate打包的时候和发布beam的时候都可以用 appli ...

  9. 启动zookeeper时，jps显示有进程，但是status查看状态时就Error contacting service. It is probably not running

    转自:http://www.cnblogs.com/xiaohua92/p/5460515.html#undefined 安装zookeeper时候,可以查看进程启动,但是状态显示报错:Error c ...

  10. 【升级至sql 2012】sqlserver mdf向上兼容附加数据库（无法打开数据库 'xxxxx' 版本 611。请将该数据库升级为最新版本。）

    sqlserver mdf向上兼容附加数据库(无法打开数据库 'xxxxx' 版本 611.请将该数据库升级为最新版本.) 最近工作中有一个sqlserver2005版本的mdf文件,还没有log文件 ...