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

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

avalon工程

• 导航1

• 导航2

执行结果

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

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

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

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

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

avalon工程

• 导航1

• 导航2

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