本文是requireJS的一些知识点的总结，配上多页面应用中的实例分析。

本案例的目录结构如下：

requireJS API的三个主要函数：define（创建模块），require（加载模块），config（配置）

1、 HTML文件中加载JS文件

page1.html内容如下：

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <title>Page 1</title>

 5         <script data-main="scripts/page1" src="scripts/lib/require.js"></script>

 6     </head>

 7     <body>

 8         <a href="page2.html">Go to Page 2</a>

 9     </body>

10 </html>

page2.html内容如下：

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <title>Page 2</title>

 5         <script data-main="scripts/page2" src="scripts/lib/require.js"></script>

 6     </head>

 7     <body>

 8         <a href="page1.html">Go to Page 1</a>

 9     </body>

10 </html>

知识扩展：

  • data-main属性指定网页程序的主模块，这个文件被requireJS首先加载。由于requireJS默认的文件后缀名是js，所以可以把page1.js简写成page1
  • 加载脚本文件的根路径优先规则
    用require()加载模块时，省略.js后缀，会从baseUrl下查找；如果带有.js后缀、或以”/"开始、或包含URL协议（http/https）则将根据你的具体路径设置去查找
    • config > data-main > 默认baseUrl
    • 不对data-main和config进行设置，则默认baseUrl为引用require.js的那个HTML页面所在目录
    • 设置data-main，则baseUrl为主模块所在目录（如第一段HTML中的主模块为page1.js，因此以其所在目录/scripts为根目录）
    • 配置config，显式设置baseUrl，也可为每一个模块单独设置路径

2、对模块的路径等进行配置

　　使用require.config()方法，可以对模块的加载行为进行自定义。在多页面应用中，可以将配置写在共用的文件中，如本例中的common.js文件，然后各个页面加载当前配置后，在回调函数中再加载各自需要的模块。

common.js代码如下：

1 require.config({

2     baseUrl: 'scripts/app',

3     paths: {

4         jquery: [

5             'http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min',

6             '../lib/jquery'

7         ]

8     }

9 });

知识扩展：

支持的配置项：

baseUrl ：

　　所有模块的查找根路径。注意：当加载的js文件(以.js结尾、以”/”开头、含有协议)，不会使用baseUrl；

paths :

　　path映射那些不直接放置于baseUrl下的模块名。设置path时起始位置是相对于baseUrl的，除非该path设置以"/"开头或含有URL协议；

　　注意：在paths中定义的路径不能含有.js后缀，因为路径解析机制会自动添加上.js后缀；而且加载路径可以设置多个，如从CDN加载失败，则加载本地js文件；

shim:

　　为那些没有使用define()来声明依赖关系的模块进行配置；

　　其中需要注意两个参数：

　　　　（1）exports值（输出的变量名），暴露方法接口
　　　　（2）deps数组，表明该模块的依赖性

　　如：

 1 require.config({

 2     baseUrl: '/scripts/lib',

 3     shim:{

 4         zepto: {

 5             exports: '$'

 6         },

 7         backbone: {

 8             deps: ['underscore', 'zepto'],

 9             exports: 'Backbone'

10         },

11         'zepto.animate': ['zepto']

12     }

13 });

3、模块的加载 

page1.js代码如下：

1 require(['./common'], function (common) {

2     require(['sayPage1'], function (sayPage1) {

3         sayPage1.hello();

4     });

5 });

page2.js代码如下：

1 require(['./common'], function (common) {

2     require(['sayPage2'], function (sayPage2) {

3         sayPage2.hello();

4     });

5 });

知识拓展：　

　require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它才会被调用。加载的模块可以作为回调函数的参数进行调用。

　　这里为了保证配置完成后才加载需要的模块，主要是为了路径的正确解析，在回调函数中再进行require。

4、模块的定义

sayPage1.js中的代码：

1 define(['jquery'], function($) {

2     function sayHi(){

3         $('body').append('<h1>Hello page1!</h1>');

4     }

5     return {

6         hello: sayHi

7     }

8 });

知识扩展：

　　define函数也接受两个参数。第一个参数为所依赖模块组成的数组，第二个参数是一个回调函数。

　　当然最后上线的时候还要进行JS文件的合并与压缩，可以利用r.js，方便快捷~

requireJS多页面应用实例的更多相关文章

  1. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  2. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  3. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  4. [工具配置]requirejs 多页面，多入口js文件打包总结

    需要明确以下几点: 1.本地前端调试代码肯定是调用原始的路径以及代码,但是线上运行的肯定是通过打包后的另一个路径,这儿就是生成的dist文件夹了. 2.requirejs的引入,线上跟线下的路径怎么控 ...

  5. 3.8.1 HTML与CSS简单页面效果实例

    HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  7. requirejs 多页面，多js 打包代码，requirejs多对多打包【收藏】

    这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...

  8. —页面布局实例———win7自己的小算盘

    晚上7各地点布局,9点半,刚拿到. 他发现自己专注的时候效率挺高真的哈萨克斯坦.计算器布局前.做了两件简单的页面布局练练手.今晚总体感觉更好,不难. 器之间调试有点蛋疼,真心不想搭理IE. 在进行布局 ...

  9. 整理ASP.NET MVC 5各种错误请求[401,403,404,500]的拦截及自定义页面处理实例

    http://2sharings.com/2015/asp-net-mvc-5-custom-404-500-error-hanlde https://blog.csdn.net/yhyhyhy/ar ...

随机推荐

  1. HDU 4815 概率dp，背包

    Little Tiger vs. Deep Monkey Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K ( ...

  2. day27 CRM delete& action& 嵌入CRM

    课程目录:deleteactionpop up window嵌入crm项目 权限(未讲)学员交作业发邮件 代码路径:https://github.com/liyongsan/git_class/tre ...

  3. Linux 文件与目录管理,Linux系统用户组的管理

      一.Linux 文件与目录管理 我们知道Linux的目录结构为树状结构,最顶级的目录为根目录 /. 其他目录通过挂载可以将它们添加到树中,通过解除挂载可以移除它们. 在开始本教程前我们需要先知道什 ...

  4. day5-subprocess模块

    一.概述 实际应用中,有些时候我们不得不跟操作系统进行指令级别的交互,如Linux中的shell.Python中早期通过os模块和commands模块来实现操作系统级别的交互,但从2.4版本开始,官方 ...

  5. C++复习13.虚析构函数知识

    C++ 虚析构函数 20131010 在C++中的虚函数作用是实现基于继承机制的多态,但是我们好像忽略了一种情况,就是虚析构函数.在C++继承机制中,虽然构造函数是不可以使用虚函数声明,但是析构函数是 ...

  6. node 封装db层

    var db = {}; var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit: , host: '1 ...

  7. poj 1182 食物链（高级的带权并查集）

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 76486   Accepted: 22742 Description ...

  8. 解决SQL SERVER数据库备份时出现“操作系统错误5（拒绝访问）。BACKUP DATABASE 正在异常终止。”错误的解决办法

    SQL SERVER数据库进行备份时出现“操作系统错误5(拒绝访问).BACKUP DATABASE 正在异常终止.”错误.我们应该如何解决这个问题?小编今天为大家推荐一个解决办法. 一般备份文件选择 ...

  9. CMD命令提示符下选中文字即可以复制和SecureCRT一样

    用过 SecureCRT 的都会觉得复制粘贴很方便.只要选中相应文字,会自动复制.然后点鼠标右键就可以粘贴,非常方便. 但是在windows系统下的CMD里面,每次都要点鼠标右键→标记,再选中相应文字 ...

  10. 《Effective Java》读书笔记（二）之对于所有对象都通用的方法

    第八条 在改写equals的时候请遵守通用约定 一般以下几种情况,不适宜覆盖equals方法 1.类的每个实例本质上都是唯一的,对于代表活动实体而不是值的类确实如此,例如Thread. 2.不关心类是 ...