这是@尚春实现的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. windows下使用python的scrapy爬虫框架，爬取个人博客文章内容信息

    scrapy作为流行的python爬虫框架,简单易用,这里简单介绍如何使用该爬虫框架爬取个人博客信息.关于python的安装和scrapy的安装配置请读者自行查阅相关资料,或者也可以关注我后续的内容. ...

  2. myeclipse10修改全局jsp编码格式为gbk

    myeclipse10修改全局jsp编码格式为gbk: window->prefenrence->general->content types->  展开:text->j ...

  3. HDU 6153 A Secret（扩展kmp）

    A Secret Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 256000/256000 K (Java/Others)Total ...

  4. 第13课：HTML基础之DOM操作2

    1. 1)d.innerHTML:标签中的所有内容 删除某个标签 a)可以直接修改innerHTML的值: b) 2)d.innerText:标签中的文本内容 3)input.value='aaa'  ...

  5. nginx默认的配置文件详解

    # For more information on configuration, see:# * Official English Documentation: http://nginx.org/en ...

  6. 《DSP using MATLAB》示例 Example 9.8

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  7. 设计模式(Python)-单例模式

    本系列文章是希望将软件项目中最常见的设计模式用通俗易懂的语言来讲解清楚,并通过Python来实现,每个设计模式都是围绕如下三个问题: 为什么?即为什么要使用这个设计模式,在使用这个模式之前存在什么样的 ...

  8. Oracle单表去重复（一）

    去重有两层含义,一:是记录完全一样:二:是符合一定条件的认为是重复. 根据表的数量,去重可划分为:单表去重和多表关联去重.   对于去重,一般最容易想到的是用distinct,而distinct只能对 ...

  9. bootstrap 在超小屏布局时使用 clearfix

    bootstrap 在超小屏布局时使用 clearfix 先看案例,一共四个 div,使用 col-xs-6, 所以在特别小型设备上时会变成两行. 不过我们发现如果第一个 div 内容多了后会变成如下 ...

  10. [LeetCode系列] 变序词查找问题(Anagrams)

    给定一系列词, 找出其中所有的变序词组合. Note: 变序词 - 组成字符完全相同但次序不同的单词. 如dog和god, ate和eat. 算法描述: 使用map<string, vector ...