RequireJS和Backbone的集成

最新推荐文章于 2021-11-23 21:23:45 发布

转载最新推荐文章于 2021-11-23 21:23:45 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhepama/archive/2013/05/01/3053275.html

文章标签：

#前端 #测试 #ViewUI

本文介绍了如何使用RequireJS和其shim参数解决Backbone不支持AMD规范的问题，实现前端模块化开发。通过示例展示了如何配置RequireJS加载Backbone及其依赖的underscore库。

这两个轻量级的库合起来使用确实能够方便的构建大型应用程序。RequireJS填补了前端模块化开发的空缺，Backbone采用MVC的分层结构很好的将程序各个部分解耦。

Backbone目前不支持AMD（曾经支持过），那么它只能作为普通的JS文件使用。它全局的标示符是Backbone，它还依赖于underscore，underscore的全局标示是下划线（_）。

因此，当我们使用AMD方式写的模块中使用Backbone时，得确保underscore和Backbone已经载入了。

RequireJS 2.0后提供了一个shim参数很好的解决了该问题。

示例目录

js目录中有underscore.js，backbone.js。其中cache.js不依赖于Backbone，BaseRouter.js依赖。

index.html如下

         <!doctype html>
        
         <
         html
         >
        
         <
         head
         >
        
         <
         title
         >RequireJS和Backbone集成</
         title
         >
        
         <
         meta 
         charset
         =
         "utf-8"
         />
        
         <
         script 
         src
         =
         "require.js"
         ></
         script
         >
        
         <
         script
         >
        
         require.config({
        
         baseUrl: 'js',
        
         shim: {
        
         'backbone': {
        
         deps: ['underscore'],
        
         exports: 'Backbone'
        
         }
        
         }
        
         });
        
         require(['BaseRouter'], function(baseRouter) {
        
         });
        
         </
         script
         >
        
         </
         head
         >
        
         <
         body
         >
        
         </
         body
         >
        
         </
         html
         >

注意，require.config配置了shim参数，shim参数这里有介绍。

这样配置后，当其它模块依赖于Backbone（如BaseRouter），它会顺序下载underscore.js和backbone.js。

BaseRouter内就可以把backbone当成AMD模块来使用了。

         define([
         'backbone'
         , 
         'cache'
         ], 
         function
         (Backbone, cache){
        
         // todo with Backbone and other module 
        
         console.log(Backbone);
        
         console.log(cache);
        
         return 
         {};
        
         })