BUI 混入

實(shí)例分發(fā)

混入minxins參數(shù) 提供了一種靈活的方式, 把bui.store的實(shí)例進(jìn)行劃分. 它是一個(gè)數(shù)組, 數(shù)組里面每個(gè)對(duì)象包含bui.store的選項(xiàng), 實(shí)例自身的屬性會(huì)覆蓋mixins的相同屬性.

pages/main/main.js

var bs = bui.store({
    id: ".bui-page",
    scope:"page",
    mixins: [{
        data: {
            title:"標(biāo)題2"
        },
        methods: {},
        watch: {},
        computed: {},
        beforeMount:function(){
            // console.log(this.$data.title)
        },
        mounted:function(){
            console.log(this.$data.title)
        }
    }],
    data: {
        title:"標(biāo)題"
    },
    methods: {},
    watch: {},
    computed: {},
    beforeMount:function(){
        // console.log(this.$data.title)
    },
    mounted:function(){
        console.log(this.$data.title)
        // 標(biāo)題
    },
})

改寫(xiě)為 pages/main/main.js

loader.define(["pages/list/index"]function(list,require,export,module){
    var bs = bui.store({
        id: ".bui-page",
        scope:"page",
        mixins: [list],
        data: {
            title:"標(biāo)題"
        },
        methods: {},
        watch: {},
        computed: {},
        beforeMount:function(){
            // console.log(this.$data.title)
        },
        mounted:function(){
            console.log(this.$data.title)
            // 標(biāo)題
        },
    })
})

定義列表模塊 pages/list/index.js

loader.define(function(require,export,module){


    var data = {
            data: {
                title:"標(biāo)題2"
            },
            methods: {},
            watch: {},
            computed: {},
            beforeMount:function(){
                // console.log(this.$data.title)
            },
            mounted:function(){
                console.log(this.$data.title)
            }
        }
    // 拋出對(duì)象
    return data;
})

通過(guò)view標(biāo)簽把模板分發(fā). pages/main/main.html

<view name="pages/list/index"></view>

通過(guò)分發(fā)出去的view組件, 最終是合并在一個(gè)實(shí)例上, 模塊之間會(huì)按先后順序覆蓋, 沒(méi)有獨(dú)立的作用域.

獨(dú)立作用域

需要獨(dú)立作用域時(shí), 應(yīng)該使用的是 component標(biāo)簽. 模塊里面需要返回一個(gè)實(shí)例, 而不是普通對(duì)象.

<component id="list" name="pages/list/index"></component>

pages/list/index.html

<h2 b-text="list.title"></h2>

pages/list/index.js

loader.define(function(require,export,module){
    // module.id = list
    var bs = bui.store({
        el: `#{module.id}`,
        scope: "list",
        data: {
            title:"標(biāo)題"
        },
        mounted: function(){
            console.log("list 模塊已經(jīng)加載")
        }
    })
    return bs;
})

案例

案例

在一個(gè)模塊里面處理三個(gè)Tab不好維護(hù), 可以把每個(gè)tab的內(nèi)容進(jìn)行分發(fā). 這是一個(gè)bui.floor跟 bui.store結(jié)合的例子. 其中用到了延遲加載, 滾動(dòng)到第2個(gè)的時(shí)候, 會(huì)自動(dòng)加載第3個(gè)模板, 加載了模板以后, 還需要通過(guò)實(shí)例的 bs.$mount方法, 重新編譯該組件的數(shù)據(jù).