使用avalon2 去構(gòu)建一個(gè) app-route

Wildcard 發(fā)布于2019-08-21 10:51 / 3336人閱讀

摘要：的相關(guān)文章其實(shí)框架就是讓你使用起來簡單些關(guān)于路由其實(shí)用一個(gè)輕便的框架就可以了路由就是根據(jù)后面的路徑不同變換代碼前端路由由于其特殊性最常見表述為這樣的形式然后我們直接上使用代碼可以使你使用現(xiàn)在我們開始寫組件組件寫法定義組件使用組件

avalon2 的相關(guān)文章
https://segmentfault.com/blog/jslouvre

其實(shí)框架就是讓你使用起來簡單些

關(guān)于路由其實(shí)用一個(gè)輕便的框架就可以了

https://github.com/visionmedia/page.js

路由就是根據(jù)url后面的路徑不同變換代碼

前端路由由于其特殊性最常見表述為這樣的形式

#!/contact/me


    index
    #whoop
    /about
    /contact
    /contact/me
    /not-found

然后我們直接上page.js使用代碼

page.js 可以使你使用hashbang

現(xiàn)在我們開始寫組件

avalon2 組件寫法
https://segmentfault.com/a/1190000004949412

定義組件

avalon.component("ms-approute", {
    template: "",
    defaults: {
    },
    soleSlot: "page"
});

使用組件

 function deepFind(obj, path) {
    var paths = path.split(".")
            , current = obj
            , i;

    for (i = 0; i < paths.length; ++i) {
        if (current[paths[i]] == undefined) {
            return undefined;
        } else {
            current = current[paths[i]];
        }
    }
    return current;
}

var Approute = function (options) {
    var lastRoute = "";
    var lastRouteEle = {};
    var ele = {};

    function check(route) {
        var length = ele.target.children.length;
        for (var i = 0; i < length; i++) {
            (function (index) {
                var page = ele.target.children.item(index);
                if (page.dataset.route == route) {
                    lastRoute = route;
                    lastRouteEle = page;
                    page.setAttribute("selected", "");
                }
            })(i);
        }
    }

    function emit(newValue, oldValue) {
        lastRouteEle.removeAttribute("selected");
        check(newValue);
    }

    return {
        emit: emit,
        config: {
            onInit: function (a) {
                console.log("onInit!!");
            },
            onReady: function (a) {
                console.log("onReady!!");
                var self = this;
                ele = a;
                var route = deepFind(self, options.path);
                check(route);
            },
            onViewChange: function (a) {
                console.log("onViewChange!!");
            },
            onDispose: function (a) {
                console.log("onDispose!!")
            }
        }
    }
};

var approute = new Approute({
    path: "route"
});

var con = function () {
    return {
        $id: "test",
        route: "index",
        approuteconfig: approute.config
    }
};

var vm = avalon.define(con());

vm.$watch("route", function (newValue, oldValue) {
    approute.emit(newValue, oldValue);
});