从零单排系列之写一个类vue框架(一)

因为我希望这是一个系列的文章,所以开始之前先简单说一下,我几乎没用过vue这个框架写过项目,所以文章中难免会有一些比较外行的说法。当然,我用过一些时间的angular,也曾经解决过一些同行们vue方面的问题。所以如果有人原因看的话,也不用担心我过于外行。
就像前些日子看到阮一峰老师说的话,我觉得老师这里真的说出了很多技术人员的心声,这里借用一下。
“我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来不是我的动机,好奇才是。”

言归正传,我准备了一本书,里面由浅入深地介绍了vue的用法(听人说的,我边看边写)。
先整理vue用法,然后再整理自己的框架。
最基本用法

<div id='app'>
    {{title}}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
        title: 'Hello World'
        }
    })
</script>

简单分析一下,{{}} 用来声明这是一个model,然后在js中定义这个model

因为涉及到正则以及dom树的一些解析及递归等,我先写点简单点的,不然看的人都跑了。

<script>
    function Vue(obj) {
        var app = document.querySelector(obj.el);
        for(let i in obj.data) {
            this[i] = obj.data[i];
        }
 
        var html = app.childNodes;
        var that = this;
        html.forEach(function(data) {
            if(data.nodeName == '#text') {
                data.data = data.data.replace(/\{\{([\s\S]+)\}\}/g, function(a, b){return that[b]})
            }
        })
    }
</script>
<div id='app'>
    这里是{{title}}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: 'Hello World'
        }
    })
</script>

这段代码应该可以勉强应付上面的vue语句,当然vue肯定不会是这么实现的,因为这是一次性的。明天换个es6版本的写法。今天就先写到这里吧。

    原文作者:lackdata
    原文地址: https://segmentfault.com/a/1190000019635061
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞