BUI 混入

實例分發(fā)

混入minxins參數 提供了一種靈活的方式, 把bui.store的實例進行劃分. 它是一個數組, 數組里面每個對象包含bui.store的選項, 實例自身的屬性會覆蓋mixins的相同屬性.

pages/main/main.js

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

改寫為 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:"標題"
        },
        methods: {},
        watch: {},
        computed: {},
        beforeMount:function(){
            // console.log(this.$data.title)
        },
        mounted:function(){
            console.log(this.$data.title)
            // 標題
        },
    })
})

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

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


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

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

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

通過分發(fā)出去的view組件, 最終是合并在一個實例上, 模塊之間會按先后順序覆蓋, 沒有獨立的作用域.

獨立作用域

需要獨立作用域時, 應該使用的是 component標簽. 模塊里面需要返回一個實例, 而不是普通對象.

<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:"標題"
        },
        mounted: function(){
            console.log("list 模塊已經加載")
        }
    })
    return bs;
})

案例

案例

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