使用avalon2 去构建一个 app-route

avalon2 的相关文章
https://segmentfault.com/blog/jslouvre

其实框架就是让你使用起来简单些

关于路由其实用一个轻便的框架就可以了

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

路由就是根据url后面的路径不同变换代码

前端路由由于其特殊性 最常见表述为这样的形式

#!/contact/me

<ul>
    <li><a href="./index">index</a></li>
    <li><a href="#whoop">#whoop</a></li>
    <li><a href="./about">/about</a></li>
    <li><a href="./contact">/contact</a></li>
    <li><a href="./contact/me">/contact/me</a></li>
    <li><a href="./not-found?foo=bar">/not-found</a></li>
</ul>

然后我们直接上page.js使用代码

<script>
    page.base('');
    page('/', index);
    page('/index', index);
    page('/about', about);
    page('/contact', contact);
    page('/contact/:contactName', contact);
    page({
        hashbang:true
    });

    function index() {
    }

    function about() {
    }

    function contact(ctx) {
    }
</script>

page.js 可以使你使用hashbang

现在我们开始写组件

avalon2 组件写法
https://segmentfault.com/a/1190000004949412

定义组件

avalon.component('ms-approute', {
    template: '<div class="zl-view"><slot name="page"></slot></div>',
    defaults: {
    },
    soleSlot: 'page'
});

使用组件

<template ms-widget="[{is:'ms-approute'},@approuteconfig]">
    <div slot="page" class="zl-page" data-route="index" >index</div>
    <div slot="page" class="zl-page" data-route="about">about</div>
    <div slot="page" class="zl-page" data-route="contact">contact</div>
</template>

js

 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);
});