Skip to content
This repository has been archived by the owner on Nov 12, 2024. It is now read-only.

view增加assign方法 #54

Open
xinglie opened this issue Dec 26, 2019 · 0 comments
Open

view增加assign方法 #54

xinglie opened this issue Dec 26, 2019 · 0 comments

Comments

@xinglie
Copy link
Member

xinglie commented Dec 26, 2019

通过继承Magix.View来实现自己的View

通过Magix.View.extend方法来实现

import Magix from 'magix';
export default Magix.View.extend({
    tmpl:'@demo.html',
    render(){
        console.log('render ui')
    }
});

view的关键方法和事件

显式的ctor、init、render方法

每个view默认都有一个ctor、init(初始化时调用,只会调用一次)和render(需要更新界面时被调用,可能会调用多次)

import Magix from 'magix';
export default Magix.View.extend({
    tmpl:'@demo.html',
    ctor(data){
        console.log(data);
    },
    init(data){
        console.log('init data',data);
    },
    render(){
        console.log('render ui')
    }
});

ctor与init的区别:继承Magix.View后的View可以再被继承,在继承时,父类的init可以被子类覆盖,如果父类的init必须被调用时,就需要子类来确保在自己的init方法中显式调用父类的init方法。而ctor方法则没有这方面的问题,即使子类存在ctor方法且未显式调用父类的ctor,父类的ctor也会被调用

隐式的destroy,domready,dompatch等事件接口

为了便于插件及监控的开发,每个view会在适当的时候派发这些事件

import Magix from 'magix';
export default  Magix.View.extend({
    tmpl:'@demo.html',
    init(data){
        console.log('init data',data);
        this.on('destroy',()=>{
            console.log('view destroy');
        });
        this.on('dompatch',()=>{
            console.log('before update ui');
        });
        this.on('domready',()=>{
            console.log('ui ready');
        });
    },
    render(){
        console.log('render ui')
    }
});

view增加assign方法

magix3.8之后加入了dom比对。如果能从组件的角度通过数据来识别是否需要更新,则能大幅提升性能。基于这个原因,view增加了assign方法,开发者通过继承实现该方法,并在方法内部返回true或false控制是否需要调用render进行渲染

import Magix from 'magix';
export default   Magix.View.extend({
    tmpl: '@view.html',
    assign(data) {
        //你可以在这里对数据data进行加工,然后通过set方法放入到view中
        this.set(data);
        //返回true表示不管数据有没有变化都调用render方法更新当前view
        //如果返回false则magix不再调用当前view的render方法
        return true;
    },
    render() {
        console.log('render');
        this.digest();
    }
});
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant