MVVM简易实现源码

最新推荐文章于 2023-02-08 11:36:58 发布

迟来的阿牛

最新推荐文章于 2023-02-08 11:36:58 发布

阅读量584

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/nightwishh/article/details/105026189

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

贴上代码便于日后复习
文件如下：

index.html
MVVM.js
observer.js
compile.js
watcher.js

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message.a">
        <div>
            <ul>
                <li></li>
            </ul>
        </div>
        {{message.a}}
    </div>
    <script src="./watcher.js"></script>
    <script src="./observer.js"></script>
    <script src="./compile.js"></script>
    <script src="./MVVM.js"></script>
    <script>
            let vm=new MVVM({
            el:"#app",
            data:{
                message:{
                    a:'222222'
                    }
                }
            })
    </script>
</body>
</html>

MVVM.js:

class MVVM{
    constructor(options){
        //先把可用的东西挂载到实例上
        this.$el=options.el;
        this.$data=options.data;
        //如果有要编译的模板(el)我就开始编译
        if(this.$el){
            //数据劫持。把对想的所有属性改成
            //get和set方法
            new Observer(this.$data);
            //用数据和元素进行编译
            new Compile(this.$el,this);
        }
    }
}

observer.js:

class Observer{
    constructor(data){
        this.observe(data)
    }
    observe(data){
        //要对这个data数据将原有的属性改成getset的形式
        if(!data||typeof data !== 'object'){
            return 
        }
        //要将数据一一劫持先获取到data的key和value
        Object.keys(data).forEach(key=>{
            //劫持
            this.defineReactive(data,key,data[key])
            this.observe(data[key])//深度递归劫持
        })
    }
    //定义响应式
    defineReactive(obj,key,value){
        let that=this
        let dep=new Dep()
        Object.defineProperty(obj,key,{
            enumerable:true,//可枚举
            configurable:true,
            get(){
                Dep.target&&dep.addSub(Dep.target)
                return value
            },
            set(newValue){//当给data属性设置值得时候，更改获取的属性的值
                if(newValue!=value){
                    that.observe(newValue)//如果是对象继续劫持
                    value=newValue
                    dep.notify()
                }
            }
        })
    }
}
class Dep{
    constructor(){
        //订阅的数组
        this.subs=[]
    }
    addSub(watcher){
        this.subs.push(watcher)
    }
    notify(){
        this.subs.forEach(watcher=>watcher.update())
    }
}

compile.js:

class Compile{
    constructor(el,vm){
        this.el=this.isElementNode(el)?el:document.querySelector(el);//#app document.
        this.vm=vm;
        if(this.el){
            //如果这个元素能取到，我们才开始编译
            //1.先把这些真实DOM移入到内存中fragment
            let fragment=this.node2fragment(this.el)
            //2.编译=> 提取想要的元素节点 v-model 和文本节点 {{}}
            this.compile(fragment)
            //把编译好的fragment再塞回到页面里去
            this.el.appendChild(fragment)
        }
    }
    //专门写一些辅助的方法：如判断他是不是指令
    //判断el是不是dom节点的方法
    isElementNode(node){
        return node.nodeType===1;
    }
    //判断是不是指令:v-
    isDirective(name){
        return name.includes('v-')
    }
    //专门放一些核心的方法：
    compileElement(node){
        //带v-model
        let attrs=node.attributes;//取出当前节点的属性
        Array.from(attrs).forEach(attr=>{
            //判断属性名是不是包含v-model
            let attrName=attr.name
            if(this.isDirective(attrName)){
                //取到对应的值放到节点中
                let expr=attr.value;
                // let type=attrName.slice(2)//方法一
                let [,type]=attrName.split('-')//方法二
                //node this.vm.$data expr
                //toto......
                CompileUtil[type](node,this.vm,expr)
            }
        })
    }
    compileText(node){
        //带{{sdsd}}
        let expr=node.textContent;//取文本中的内容
        let reg=/\{\{([^}]+)\}\}/g
        //  首先 reg=/\{\{\}\}/g  所有大括号要转义 /g为全局
        //  接着 reg=/\{\{([^}]+)\}\}/g
        if(reg.test(expr)){
            //node this.vm.$data text 
            //todo......
            CompileUtil['text'](node,this.vm,expr)
        }
    }
    compile(fragment){
        //需要递归
        let childNodes=fragment.childNodes
        Array.from(childNodes).forEach(node=>{
            if(this.isElementNode(node)){
                //isElementNode方法在上面定义过
                //是元素节点,则需要继续深入检查
                //这里需要编译元素
                this.compileElement(node);
                this.compile(node)
            }else{
                //这里需要编译文本
                this.compileText(node)
            }
        })
    }
    node2fragment(el){//需要将el中的内容全放到内存中
        //文档碎片
        let fragment=document.createDocumentFragment();
        let firstChild;
        while(firstChild = el.firstChild){
            fragment.appendChild(firstChild)
        }
        return fragment
    }
}
CompileUtil={//获取实例上对应的数据
    getVal(vm,expr){
        expr=expr.split('.')//[a,v,c,s,a,w,r]
        return expr.reduce((prev,next)=>{//vm.$date.a
            return prev[next]
        },vm.$data)
    },
    getTextVal(vm,expr){//获取编译文本后的结果
        return expr.replace(/\{\{([^}]+)\}\}/g,(...arguments)=>{
            return this.getVal(vm,arguments[1])
        })
    },
    text(node,vm,expr){//文本处理
        let updateFn=this.updater['textUpdater']
        let value=this.getTextVal(vm,expr)
        expr.replace(/\{\{([^}]+)\}\}/g,(...arguments)=>{
            new Watcher(vm,arguments[1],(newValue)=>{
                updateFn&&updateFn(node,this.getTextVal(vm,expr))
            })
        })
        updateFn&&updateFn(node,value)
    },
    setVal(vm,expr,value){
        expr=expr.split('.');
        return expr.reduce((prev,next,currentIndex)=>{
            if(currentIndex === expr.length-1){
            return prev[next]=value;
            }
            return prev[next];
        },vm.$data)
    },
    model(node,vm,expr){//输入框处理
        let updateFn=this.updater['modelUpdater']
        new Watcher(vm,expr,(newValue)=>{
            updateFn&&updateFn(node,this.getVal(vm,expr))
        })
	node.addEventListener('input',(e)=>{
	    let newValue=e.target.value;
        this.setVal(vm,expr,newValue)
	})
        updateFn&&updateFn(node,this.getVal(vm,expr))
    },
    updater:{
        //文本更新
        textUpdater(node,value){
            node.textContent=value
        },
        //输入框更新
        modelUpdater(node,value){
            node.value=value
        }
    }
}

watcher.js:

//观察者的目的就是给需要变化的dom元素增加一个观察者，
//当数据变化后执行对应的方法
class Watcher{
    constructor(vm,expr,cb){
        this.vm=vm
        this.expr=expr
        this.cb=cb
        //先获取一下老的值
        this.value=this.get()
    }
    getVal(vm,expr){
        expr=expr.split('.')//[a,v,c,s,a,w,r]
        return expr.reduce((prev,next)=>{//vm.$date.a
            return prev[next]
        },vm.$data)
    }
    get(){
        Dep.target=this;
        let value=this.getVal(this.vm,this.expr)
        Dep.target=null
        return value;
    }
    update(){
        let newValue=this.getVal(this.vm,this.expr)
        let oldValue=this.value
        if(newValue!=oldValue){
            this.cb(newValue)//调用watch的callback
        }
    }
}

迟来的阿牛

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
MVVM简易实现源码

贴上代码便于日后复习文件如下：index.htmlMVVM.jsobserver.jscompile.jswatcher.jsindex.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo...
复制链接

扫一扫