avalon 单页面程序（种子工程）之二按需加载和路由系统

最新推荐文章于 2021-06-15 19:37:06 发布

weixin_34352449

最新推荐文章于 2021-06-15 19:37:06 发布

阅读量185

点赞数

原文链接：https://segmentfault.com/a/1190000004361876

版权

SPA的成功离开不这三个东西，分层架构，路由系统，储存系统。分层架构是我们组织复杂代码的关键，路由系统是将多个页面压缩在一个页面的关键。其中avalon路由用到了两个单独独立出来的类库 mmRouter 和 mmHistory。

路由有什么作用呢？

路由其实可以理解成网站上不同的网页地址，如果不是SPA的网站，浏览器的前进后退，链接到了一个新的页面，整个页面重新刷新；但如果是SPA网站，因为整个页面是不需要全部刷新的，网站的页面也停留在当前页面，那么怎么解决浏览器的前进后退问题呢，怎么解决需要定位到特定网页地址的问题呢，所以SPA就引入了路由系统。下面我们看看路由是怎么实现的：

引入路由

用requriejs 引入avalon路由

mmRouter和mmHistory地址：https://github.com/RubyLouvre/mmRouter
用requirejs配置mmRouter和mmHistory在网站中的地址

require.config({//第一块，配置
    baseUrl: '',
    paths: {
        avalon: ["js/avalon/avalon"],//必须修改源码，禁用自带加载器，或直接删提AMD加载器模块
        mmHistory: 'js/avalon/mmHistory',
        mmRouter: 'js/avalon/mmRouter',
    }
});

avalon路由代码

'/sub1/index'为路由地址, 当用户在页面点击这个地址的时候，触发callback回调，每个路由可以单独定义一个callback方法。在这个种子工程中，我都调用了同一个callback方法，就比较适合目录动态生成，需要按需调用不同的页面的情况。在这里执行了callback回调之后， console.log(this.path)输出了路径的地址

//requirejs引用mmRouter
require(['mmRouter'],function(mmRouter){
    avalon.log("引入avalon");

    var model = avalon.define({
        $id: "root",
        name: "tangolivesky"
    })

    //路由的导航回调
    function callback() {
        console.log(this.path);
    }

    /*avalon路由方法 '/sub1/index'为路由地址, 当用户在页面点击这个地址的时候，触发callback回调，
    每个路由可以单独定义一个callback方法。在这个种子工程中，我都调用了同一个callback方法，就比较适合
    目录动态生成，需要按需调用不同的页面的情况*/
    avalon.router.get("/sub1/index", callback)
    avalon.router.get("/sub2/index", callback)
    avalon.history.start({
        basepath: "/avalon"
    })
    avalon.scan()
});

html页面：
结构比较简单，我们就定义了两个a 标签，地址前面加上#!, 这个是avalon特有的写法，angularjs是#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>avalon工程</title>
    <script src="js/require/require.js" data-main="main"></script>
</head>
<body ms-controller="root">
    <ul>
        <li>
            <a href="#!/sub1/index">导航1</a>
        </li>
        <li>
            <a href="#!/sub2/index">导航2</a>
        </li>
    </ul>

</body>
</html>

执行结果

当点击导航1，或者导航2，分别在浏览器控制台中输出了/sub1/index和 /sub2/index

图片描述

按需加载js和子页面html模板

一个项目都会由好多个子页面和js组成，就单页面程序来讲，你可以把js进行合并，然后按需加载部分子页面html. 也可以按需加载js和html . 我在这里用的是按需加载js, 再由js中的requirejs text 类库来加载html文件。

index.html增加子页面替换标签

在首页index.html中增加这段代码<div ms-include-src="content"></div>， avalon中ms-include-src是用来加载模板用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>avalon工程</title>
    <script src="js/require/require.js" data-main="main"></script>
</head>
<body ms-controller="root">
    <ul>
        <li>
            <a href="#!/sub1/index">导航1</a>
        </li>
        <li>
            <a href="#!/sub2/index">导航2</a>
        </li>
    </ul>

    <div ms-include-src="content"></div>
</body>
</html>

修改main.js中导航回调函数

    //导航回调
    function callback() {
        var jspath = "modules"; //这里改成您自己的网站地址 ,这个是js路径的变量
        var pagepath = "";       //这个是网页的变量

        //这段代码的作用是按照路由path 得到需要加载的js路径
        var paths = this.path.split("/");
        for (var i = 0; i < paths.length; i++) {
            if (paths[i] != "") {
                jspath += "/" + paths[i];
                pagepath += "_" + paths[i];
            }
        }

        //console.log(jspath);
        //console.log(pagepath);

        require([jspath], function (page) {
            //这段代码的作用是把pagepath变量 赋给root controller下面的content
            avalon.vmodels.root.content = pagepath;
        });
    }

修改modules/sub1 下面的index.js

同理修改 modules/sub2下面的index.js

sub1下面index.js

define(['avalon', 'text!./index.html',], function (avalon,_sub1_index) {
    avalon.templateCache._sub1_index = _sub1_index
})

sub2下面index.js


define(['avalon', 'text!./index.html',], function (avalon,_sub2_index) {
    avalon.templateCache._sub2_index = _sub2_index
})

sub1下面index.html

<div>
    第一个页面
</div>

执行结果

分别点击导航1 和导航2，按需加载了sub1的index.js、index.html 和 sub2的index.js、index.html
图片描述

图片描述

例子我放在了github中 https://github.com/tangolivesky/avalonSPA_Sample

weixin_34352449

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
avalon 单页面程序（种子工程）之二按需加载和路由系统

SPA的成功离开不这三个东西，分层架构，路由系统，储存系统。分层架构是我们组织复杂代码的关键，路由系统是将多个页面压缩在一个页面的关键。其中avalon路由用到了两个单独独立出来的类库 mmRouter 和 mmHistory。路由有什么作用呢？路由其实可以理解成网站上不同的网页地址，如果不是SPA的网站，浏览器的前进后退，链...
复制链接

扫一扫

avalon 单页面程序 （种子工程）之二 按需加载和路由系统

路由有什么作用呢？

引入路由

用requriejs 引入avalon路由

avalon路由代码

执行结果

按需加载js和子页面html模板

index.html增加子页面替换标签

修改main.js中导航回调函数

修改modules/sub1 下面的index.js

执行结果

avalon 单页面程序（种子工程）之二按需加载和路由系统