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

fanux 发布于2019-08-19 17:30 / 1264人阅读

摘要：的成功离开不这三个东西，分层架构，路由系统，储存系统。分层架构是我们组织复杂代码的关键，路由系统是将多个页面压缩在一个页面的关键。在这个种子工程中，我都调用了同一个方法，就比较适合目录动态生成，需要按需调用不同的页面的情况。

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是#

执行结果

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

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

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

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

在首页index.html中增加这段代码

， avalon中ms-include-src是用来加载模板用的

修改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


    第一个页面

执行结果

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

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

云服务器 GPU云服务器按需加载按需加载javascript webpack按需加载单页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78582.html

avalon 单页面程序（种子工程）之一用requirejs引入avalon

摘要：现在微软终于痛定思痛决定放弃了不支持的安全更新，对我们前端来说，真的是重大利好啊言归正传，这篇文章的目的就是把怎么用构建一个单页面程序介绍以下，是对自己的一个总结，也喜欢对大家有一定的借鉴作用，写的不好不对的地方希望大家多评论评论谢谢。这篇文章是写在公司项目结束之后的，因为我个人不太会把没有实践过的东西写出来，实践是检验真理的唯一标准么，用的怎么样，好不好用，在成熟实践过的项目上能体...

solocoder 2019-08-19 17:27 评论0 收藏0
【转】如何从前端工程师到前端架构师

摘要：之前人家写过的弹出层，富文本编辑器，语法高亮插件你一套也不能少，这样你才能接触到之前碰不到的原生与知识点。通过引入双向绑定与分层架构，完全脱离进行前端开发。原文：http://www.cnblogs.com/rubylouvre/p/3658441.html 作者：司徒正美偶的《javascript框架设计》终于出版历时两年多，我的书终于付梓出版了。应各方面的要求，写软文一篇...

ShowerSun 2019-08-19 14:40 评论0 收藏0
发布基于 Avalon2 的 UI 组件库与 SPA 脚手架

摘要：使用前端框架开发信息管理系统有三年了，最近半年花了些心血将这三年的积累凝聚起来，诞生了两个开源项目和。，中文名安逸，是基于的端组件库。有用于数据展示的组件用于数据提交的组件用于消息提示的与组件组件和用户输入组件等，并且还在不断完善中。使用 Avalon 前端框架开发信息管理系统有三年了，最近半年花了些心血将这三年的积累凝聚起来，诞生了两个开源项目 ms-bus 和 ane。 ms-b...

Sike 2019-08-21 15:52 评论0 收藏0
webpack2正式版

摘要：正式版正式版，简单方便的构建单页和多页用用。下一步是完善单元测试，代码覆盖率报告如果大家有更好的想法及建议请提。开启测试并生成覆盖率报告。页面的其他资源文件，通过引入单元测试日后调整，待开发样式使用可添加替换预处理。 webpack2正式版 webpack2正式版，简单方便的构建单页和多页用用。（启用tree-shaking新技术）地址：avalon-webpack-start 这个启...

WilsonLiu95 2019-08-21 15:06 评论0 收藏0
webpack+vue项目实战（三，配置功能操作页和组件的按需加载）

摘要：但是实际上，回款管理和开票管理的组件文件也是加载了。所以下面引用按需加载来处理。是不是小很多了，然后和是按需加载的，就是需要的时候才加载。 1.前言上篇文章（webpack+vue项目实战（二，开发管理系统主页面）），实现了，侧边栏的一个操作，点击侧边栏的一些操作，最重要的就是路由的切换。看了上一篇的伙伴也不难发现，除了点击侧边栏‘首页’之外，点击其它的都是白色的一片。原因我想大家都...

endless_road 2019-08-20 17:46 评论0 收藏0