seajs+backbone实现单页面应用模块自动加载

最新推荐文章于 2024-09-06 20:16:09 发布

Jredreamer

最新推荐文章于 2024-09-06 20:16:09 发布

阅读量1.7k

点赞数 1

分类专栏： Web前端

Web前端专栏收录该内容

85 篇文章 0 订阅

订阅专栏

这不是一篇介绍seajs和backbone的文章，如果对这两个库不太了解，可以去他们官网查阅。欢迎转载，注明出处：http://www.cnblogs.com/mapping/archive/2013/03/03/2941812.html

单页面应用（spa：single page application）的业务逻辑多是比较复杂的，如果一次性把整个spa用到的文件加出估计得卡到不行，使用seajs可以很好的实现按需加载；使用backbone可以比较方便地实现数据、逻辑、表现分离，有人称他为前端的MVC框架，又有人说他不算是MVC，这里就不做讨论。

本文主要讲解如何使用这两个库实现spa里模块根据路由的自动加载

首先建立整个app的文件结构，如图：

根目录：autoload；

根目录下index.html作为app首页及入口，js目录放置app的js文件；

js目录中base放置基本的依赖js库，main目录放置app的框架代码，module目录就是用来放置各个模块的功能js啦；

下一步就是把underscore、jquery、backbone源码包装成CMD规范（或参考这里）的文件，underscore和backbone已内置AMD接口，jquery最新版也已添加AMD的exports接口，如果是旧版的jquery需要return $.noConfilt(true)，如下：

base/jquery.js

define('base/jquery', function(require) {
      //jquery官方源码
      return $.noConflict(true);
});

base/underscore.js

define('base/underscore', function(require, exports, module) {
    //underscore官方源码
});

base/backbone.js

define('base/backbone', ['underscore', '$'], function(require, exports, module) {
    this._ = require('underscore');
    this.jQuery = require('$');
    //backbone官方源码
});

用过backbone的人都知道，使用他的路由功能来做spa非常方便，页面较少的情况还可以，如果页面一多，每次都要改路由配置；虽然backbone也支持多个Router对象，但每次新增模块还是避免不了增加对应的router规则，就需要维护多个文件；而且配置的router越多，出现重复的概率就会越大，所以我们就要制定一个统一的router规则来实现模块自动加载，其实就是把模块的功能文件路径及文件名作为参数传给router处理函数，然后使用seajs的require.async方法去加载对应的文件，如下：

main/app.js

define('main/app', function(require, exports) {
    var Backbone = require('backbone');

    //配置路由
    var autoRouter = Backbone.Router.extend({
        routes: {
            '': 'home',
            'at/:module/:action(/*condition)': 'loadmodule'
        },
        home: function() {
            this.loadmodule('home', 'index');
        },
        //按照at/module/action(/conditions)格式的請求自動加載模塊
        loadmodule: function(md, ac, con) {
            //将参数字符串'a:123/b:456'转换为json对象{a:123, b:456}
            var cj = {};
            if(con && con.indexOf(':') > -1) {
                con.replace(/(\w+)\s*:\s*([\w-]+)/g, function(a, b, c) {
                    b && (cj[b] = c);
                });
            } else {
                cj = con;
            }
            //加载module目录下对应的模块
            require.async(['module', md, ac].join('/'), function(cb) {
                if(cb) {
                    cb(cj);
                } else {
                    alert('模塊加載失敗！');
                }
            })
        }
    });

    //定义全局变量App
    window.App = {
        Models: {},  
        Views: {},  
        Collections: {},
        initialize: function() {
            new autoRouter();
            Backbone.history.start();
        }  
    };

    exports.run = App.initialize;
})

这里给路由一个非常yy的名称at（把模块@出来^_^），任何匹配'at/:module/:action(/*condition)'规则的路径都会调用loadmodule方法，在这里condition是一个可选参数，如果要传递多个参数可以写成‘a:123/b:456’的格式，loadmodule方法会将这个格式字符串转换成json方便模块里的代码调用

autoRouter对象中还有一个空路由用于app的启动，实际这条路由相当于'at/home/index'；我们现在要做的就是在module目录里加模块文件了：

module/home/index.js

define('module/home/index', ['backbone'], function(reuqire) {
    var Backbone = reuqire('backbone');
    App.Models.Home = Backbone.Model.extend({});

    App.Collections.Home = Backbone.Collection.extend({
        model: App.Models.Home
    });

    App.Views.Home = Backbone.View.extend({
        el: '#container',
        initialize: function(c) {
            this.Collections = c;
            this.render();
        },
        render: function() {
            var html = '';
            this.Collections.each(function(m) {
                html += '<div><a href="' + m.get('link') + '">' + m.get('name') + '</a></div>';
            });
            this.$el.html(html);
        }
    })

    return function() {
        //模拟数据
        var hc = new App.Collections.Home();
        hc.add([
            {'name': '加载模块A', 'link': '#at/m/a/name:moduleA/other:nothing'},
            {'name': '加载模块B', 'link': '#at/m/b'}
        ]);
        new App.Views.Home(hc);
    }
});

注意：每个自动加载的模块都必须返回一个function，用于loadmodule方法callback，否则，提示模块加载失败；

这个function一般都用来将加出来的模块初始化，如上面的index.js，这里会在页面添加两个链接用来加载模块A和模块B，再看下页面index.html的代码：

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>seajs+backbone实现单页面模块自动加载</title>
</head>
<body>
    <div id="container">
    </div>
    <script type="text/javascript" src="js/base/sea.js"></script>
    <script type="text/javascript">
    seajs.config({
        base: '/js/',
        alias: {
            //基础库
            'underscore': 'base/underscore',
            '$': 'base/jquery',
            'backbone': 'base/backbone',
            'app': 'main/app'
        }
    });
    seajs.use('app', function(app) {
        app.run();
    });
    </script>
</body>
</html>

到这里，整个app已经可以运行啦

但是点击“加载模块A”或“加载模块B”都会弹出模块加载失败，那是因为我们还没添加这两个模块

module/m/a.js

define('module/m/a', ['$'], function(reuqire) {
    var $ = reuqire('$');
    return function(c) {
        alert('moduleA加载成功，参数：' + $.param(c));
    }
});

加载模块A运行结果：

module/m/b.js

define('module/m/b', ['$'], function(reuqire) {
    return function(c) {
        alert('moduleB加载成功，参数：' + c);
    }
});

加载模块B运行结果：

好了，我们整个demo已经结束了，本文只是简单介绍一种模块自动加载的思路。

如果是做一个完整的spa，那么还有模块依赖的样式css文件、模板html文件需要加载以及从api拉取数据，这些功能借助seajs和backbone都可以比较方便实现，加载模板html文件你或许需要seajs的plugin-text.js插件

本文demo打包下载：autoload.zip

欢迎转载，注明出处：http://www.cnblogs.com/mapping/archive/2013/03/03/2941812.html

Jredreamer

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录