极简的vue{{}}替换封装版

最新推荐文章于 2022-04-13 11:02:31 发布

潇潇暮雨子规啼~

最新推荐文章于 2022-04-13 11:02:31 发布

阅读量377

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_31706077/article/details/122134627

版权

<!DOCTYPE html>
<html>

<head>
    <title>01</title>
</head>

<body>
    <div id="app">
        <p>{{ name }} <span>{{name}}</span></p>
        <p>{{ren.daming.firstName}}</p>
    </div>
</body>
<script>
    let moban = /\{\{(.+?)\}\}/g
    function myVue(oponios) {
        this._el = oponios.el
        this._data = oponios.data

        this.template = document.querySelector(this._el)
        this._parent = this.template.parentNode
        this.render()
    }
    myVue.prototype.render = function () {
        this.compiler()
    }
    // 准备替换模版
    myVue.prototype.compiler = function () {
        let newDom = this.template.cloneNode(true)
        this.mapping(newDom,this._data)
        this.update(newDom)
    }
    // 更新dom
    myVue.prototype.update = function (newDom) {
        this._parent.replaceChild(newDom,document.querySelector(this._el))
    }
    myVue.prototype.mapping = function (node, data) {
        node.childNodes.forEach(item => {
            if (item.nodeType == 3) {//3是文本节点
                let value = item.nodeValue
                value = value.replace(moban, (_, key) => {
                    let k = key.trim()
                    let arr = k.split('.')
                    let val = data
                    arr.forEach((item=>{
                        val = val[item]
                    }))
                    return val
                })
                item.nodeValue = value
            } else if (item.nodeType == 1) { //1是元素节点
                this.mapping(item, data)
            }
        })

    }
    let vue = new myVue({
        el: '#app',
        data: {
            name: '是三三呀',
            ren:{
                daming:{
                    firstName:'叉叉'
                }
            }
        }
    })
</script>

</html>

潇潇暮雨子规啼~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
极简的vue{{}}替换封装版

<!DOCTYPE html><html><head> <title>01</title></head><body> <div id="app"> {{ name }} {{name}} {{ren.daming.firstName}}</p&
复制链接

扫一扫