IFE_02_dynamicDataBinding_04

原创于 2017-03-21 17:22:11 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

IFE 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种简易版Vue的数据绑定实现方式，通过提取Observer到common.js文件中，并使用正则表达式、bind及eval来替换模板中的值，实现静态数据绑定。此方法适用于一次性绑定场景。

总结：

将Observer 提取到 common.js 中
利用正则、bind、eval 替换模板的值
缺点：
- 模板正则匹配，没有做校验

代码：

<!DOCTYPE html>
<html>
<head>
    <title>dymanic_data_binding_03</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css" />
</head>
<body>
    <ol>要求：
        <li>
            <h3>请实现如下的这样一个 Vue，传入参数是一个 Selector 和一个数据对象，程序需要将 HTML 模板片段渲染成正确的模样。 这就是一次性的静态数据绑定。</h3>

            <pre><code class="html">
                &lt;!--页面中原本的html模板片段--&gt;
                &lt;div id = "app"&gt;
                    &lt;p&gt;姓名： {{user.name}}&lt;/p&gt;
                    &lt;p&gt;年龄：{{user.age}}&lt;/p&gt;
                &lt;/div&gt;
                &lt;!-- 最终在页面中渲染出来的结果 --&gt;
                &lt;div id="app"&gt;&lt;p&gt;姓名：youngwind&lt;/p&gt;&lt;p&gt; 年龄：25 &lt;/p&gt;&lt;/div&gt; 
            </code></pre>
            <pre><code>
                let app = new Vue({
                    el: '#app',
                    data: {
                        user: {
                            name: 'youngwind',
                            age: 25
                        }
                    }
                });
            </code></pre>

        </li>
    </ol>

    <div id = "app">
        <p>姓名： {{user.name}}</p>
        <p>年龄：{{user.age}}</p>
    </div>

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="/assets/js/common.js"></script>
<script type="text/javascript">
    function Vue (options) {
        if (_getType(options) !== 'object') throw 'options should be an object';

        this.el = options.el || '';
        this.vm = new Observer(options.data || {});
        this.data = this.vm.data;
        this.watchEvents = this.vm.watchEvents;

        this.el && this.parseTemplate();
    }

    Vue.prototype = Observer.prototype;

    Vue.prototype.parseTemplate = function () {
        let _this = this,
            $el = this.$el = document.querySelector(this.el),
            curHTML = $el.innerHTML,
            braceRreg = /{{(.*)}}/g;

        _getDataVal = _getExecuteVal.bind(this.data);

        $el.innerHTML = curHTML.replace(braceRreg, (match, p1, offset) => {
            return _getDataVal(p1) || match;
        });
    };
</script>
</body>
</html>