模块不同于传统的脚本文件,它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入,而无需引用全局变量。RequireJS的模块是模块模式的一个扩展,其好处是无需全局地引用其他模块。

RequireJS的模块语法允许它尽快地加载多个模块,虽然加载的顺序不定,但依赖的顺序最终是正确的。同时因为无需创建全局变量,甚至可以做到在同一个页面上同时加载同一模块的不同版本。

(如果你熟悉ConmmonJS,可参看CommonJS的注释信息以了解RequireJS模块到CommonJS模块的映射关系)。
一个磁盘文件应该只定义 1 个模块。多个模块可以使用内置优化工具将其组织打包。

模块的定义

简单的键值对

如果一个模块仅含值对,没有任何依赖,则在define()中定义这些值对就好了:

define({
name: "john",
age : 20,
sex : "femal"
});

点评:这种情况用途不是很大,一般用于简单的数据模拟。加载该模块后,回调函数中注入的参数是该键值对Object对象,即:

 {
name: "john",
age : 20,
sex : "femal"
}

函数式定义

如果一个模块没有任何依赖,但需要一个做setup工作的函数,则在define()中定义该函数,并将其传给define():

define(function () {
//Do setup work here return {
color: "black",
size: "unisize"
}
});

点评:这种适合无依赖模块的编写,且回调函数中注入的参数是根据函数中return的返回值确定的,如果没有return语句,则默认返回undefined

存在依赖的函数式定义

如果模块存在依赖:则第一个参数是依赖的名称数组;第二个参数是函数,在模块的所有依赖加载完毕后,该函数会被调用来定义该模块,因此该模块应该返回一个定义了本模块的object。依赖关系会以参数的形式注入到该函数上,参数列表与依赖名称列表一一对应。

//my/shirt.js now has some dependencies, a cart and inventory
//module in the same directory as shirt.js
define(["./cart", "./inventory"], function(cart, inventory) {
//return an object to define the "my/shirt" module.
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);

本示例创建了一个my/shirt模块,它依赖于my/cart及my/inventory。磁盘上各文件分布如下:

  • my/cart.js
  • my/inventory.js
  • my/shirt.js

模块函数以参数"cart"及"inventory"使用这两个以"./cart"及"./inventory"名称指定的模块。在这两个模块加载完毕之前,模块函数不会被调用

严重不鼓励模块定义全局变量。遵循此处的定义模式,可以使得同一模块的不同版本并存于同一个页面上(参见 高级用法 )。另外,函参的顺序应与依赖顺序保存一致

返回的object定义了"my/shirt"模块。这种定义模式下,"my/shirt"不作为一个全局变量而存在。

点评:这算是模块中最常见的用法了。注意上面强调的部分。

将模块定义为一个函数

对模块的返回值类型并没有强制为一定是个object,任何函数的返回值都是允许的。此处是一个返回了函数的模块定义:

//A module definition inside foo/title.js. It uses
//my/cart and my/inventory modules from before,
//but since foo/title.js is in a different directory than
//the "my" modules, it uses the "my" in the module dependency
//name to find them. The "my" part of the name can be mapped
//to any directory, but by default, it is assumed to be a
//sibling to the "foo" directory.
define(["my/cart", "my/inventory"],
function(cart, inventory) {
//return a function to define "foo/title".
//It gets or sets the window title.
return function(title) {
return title ? (window.title = title) :
inventory.storeName + ' ' + cart.name;
}
}
);

点评:加载该模块后,返回值是一个闭包。

简单包装CommonJS来定义模块

如果你现有一些以CommonJS模块格式编写的代码,而这些代码难于使用上述依赖名称数组参数的形式来重构,你可以考虑直接将这些依赖对应到一些本地变量中进行使用。你可以使用一个CommonJS的简单包装来实现:

define(function(require, exports, module) {
var a = require('a'),
b = require('b'); //Return the module value
return function () {};
}
);

该包装方法依靠Function.prototype.toString()将函数内容赋予一个有意义的字串值,但在一些设备如PS3及一些老的Opera手机浏览器中不起作用。考虑在这些设备上使用优化器将依赖导出为数组形式。

更多的信息可参看CommonJS Notes页面,以及"Why AMD"页面的"Sugar"段落。

点评:这种用法跟上面说的一样,首先回调用Function.prototype.toString()将函数转换成字符串,然后在进行词法分析,这样依赖,就比较低耗了,原则上不考虑使用这种方法进行模块封装。

定义一个命名模块

你可能会看到一些define()中包含了一个模块名称作为首个参数:

    //Explicitly defines the "foo/title" module:
define("foo/title",
["my/cart", "my/inventory"],
function(cart, inventory) {
//Define foo/title object in here.
}
);

这些常由优化工具生成。你也可以自己显式指定模块名称,但这使模块更不具备移植性——就是说若你将文件移动到其他目录下,你就得重命名。一般最好避免对模块硬编码,而是交给优化工具去生成。优化工具需要生成模块名以将多个模块打成一个包,加快到浏览器的载人速度。

点评:define 函数有三个参数,第一个 id 即模块名称,这个名称的格式是相对于 baseUrl 的路径除去文件格式,比如 baseUrl 为 js 目录,一个模块放在 js/libs/hi.js 里,则如果名称是这样定义的:

define('libs/hi', ['jquery'], function($){......});

这样的定义形式的好处是,模块不可能冲突,因为同一目录下不允许同名文件。但也因此 require.js 建议我们不要设置模块名称,因为设置了 ‘libs/hi’ 的模块名称后,模块就必须放在 js/libs 目录下的 hi.js 文件中,要移动位置的话,模块名称要跟着改变。至于后期利用 r.js 优化时生成了模块名称,那已经是另外一回事。所以定义模块时,第一参数常常会忽略。

JSONP服务依赖

JSONP是在javascript中服务调用的一种方式。它仅需简单地通过一个script标签发起HTTP GET请求,是实现跨域服务调用一种公认手段。

为了在RequireJS中使用JSON服务,须要将callback参数的值指定为"define"。这意味着你可将获取到的JSONP URL的值看成是一个模块定义。

下面是一个调用JSONP API端点的示例。该示例中,JSONP的callback参数为"callback",因此"callback=define"告诉API将JSON响应包裹到一个"define()"中:

require(["http://example.com/api/data.json?callback=define"],
function (data) {
//The data object will be the API response for the
//JSONP data call.
console.log(data);
}
);

JSONP的这种用法应仅限于应用的初始化中。一旦JSONP服务超时,其他通过define()定义了的模块也可能得不得执行,错误处理不是十分健壮。

仅支持返回值类型为JSON object的JSONP服务,其他返回类型如数组、字串、数字等都不能支持。

这种功能不该用于long-polling类的JSONP连接——那些用来处理实时流的API。这些API在接收响应后一般会做script的清 理,而RequireJS则只能获取该JSONP URL一次——后继使用require()或define()发起的的对同一URL的依赖(请求)只会得到一个缓存过的值。

JSONP调用错误一般以服务超时的形式出现,因为简单加载一个script标签一般不会得到很 详细的网络错误信息。你可以override requirejs.onError()来过去错误。更多的信息请参看错误处理部分。

点评:跨域脚本调用。

模块的加载

常见模块加载调用的形式如下:

require(["jquery"],function($){

    //todo

});

RequireJS 模块的定义与加载的更多相关文章

  1. 从 RequireJs 源码剖析脚本加载原理

    引言 俗话说的好,不喜欢研究原理的程序员不是好的程序员,不喜欢读源码的程序员不是好的 jser.这两天看到了有关前端模块化的问题,才发现 JavaScript 社区为了前端工程化真是煞费苦心.今天研究 ...

  2. IE报错:模块"scrrun.dll"已加载,但对DllRegisterServer的调用失败,错误代码为0x80004005

    在我的win10系统上打开某内部网页登录的时候弹出'模块"scrrun.dll"已加载,但对DllRegisterServer的调用失败,错误代码为0x80004005'报错信息, ...

  3. 模块shimgvw.dll已加载,但找不到入口点DllRegisterServer

    [环境]Windows 7 / Windows Server 2008 [现象]在文件夹浏览器中不能显示图片缩略图. [错误信息]查系统日志,有如下消息:“模块shimgvw.dll已加载,但找不到入 ...

  4. 模块"xxxx.dll"已加载,但对DllRegisterServer的调用失败,错误代码为 XXXXXXXXX

    WIN7.WIN8  注册 卸载dll  报错: 模块"xxxx.dll"已加载,但对DllRegisterServer的调用失败,错误代码为 XXXXXXXXX 解决方法: 若为 ...

  5. nginx平滑升级、在线添加模块(tengine 动态加载模块)

    http://www.orzace.com/how-to-upgrade-nginx/ 下面是nginx替换成tengine再加上lua 模块,(tengine-2.0.1版本暂时无法动态加载lua模 ...

  6. Vue路由的模块自动化与统一加载

    首先呢,我们来看看一般项目路由是怎么划分的. 为什么这么划分呢?如果大项目业务非常多,单纯的单页面很难维护,我们只有这样规范化,才能高效率. 模块自动化与统一加载的好处: 规范化命名(模块名.业务名. ...

  7. Django 修改视图文件(views.py)并加载Django模块 + 利用render_to_response()简化加载模块 +locals()

    修改视图代码,让它使用 Django 模板加载功能而不是对模板路径硬编码.返回 current_datetime 视图,进行如下修改: from django.template.loader impo ...

  8. Angular项目中核心模块core Module只加载一次的实现

    核心模块CoreModule在整个系统中只加载一次,如何实现? 创建core Modele:ng g m core 既然CoreModule是类,就有构造函数,在构造函数中进行依赖注入. export ...

  9. Flex4分模块下样式动态加载步骤及相关问题的解决

    1.  给应用程序编写CSS文件 (1)在项目下创建CSS文件(任意路径,可以多个).本例在src下创建了5个样式文件 (2)Flex支持的CSS文件定义如下: a)  type selector(类 ...

随机推荐

  1. Nginx服务器之基础学习

    一.Nginx介绍 nginx:Nginx是一种软件服务器(轻量级),故它最主要的功能就是可以与服务器硬件结合,我们的应用程序可以放在nginx服务器上进行发布,已达到让网民浏览的效果.除此自外,Ng ...

  2. Pyhton 利用threading远程下发文件和远程执行linux系统命令

    #!/usr/bin/env python # encoding: utf-8 #__author__ = 'cp' #__date__ = '21/07/16 上午 10:32' import th ...

  3. 视图必须派生自 WebViewPage 或 WebViewPage<TModel>

    后端汇总:http://www.cnblogs.com/dunitian/p/4523006.html#efmvc 后来发现原来吧web.config给删了 这就简单了,复制其他项目的web.conf ...

  4. Visulalize Boost Voronoi in OpenSceneGraph

    Visulalize Boost Voronoi in OpenSceneGraph eryar@163.com Abstract. One of the important features of ...

  5. py2exe使用中遇到的几个问题

    问题: 在使用py2exe对所写的python脚本打包成.exe可执行程序时,遇到两个问题: 问题1: RuntimeError: maximum recursion depth exceeded w ...

  6. Android之控件使用

    Android系统为我们提供了大量的控件,例如:开关控件.单选按钮.多选按钮.单选菜单等等,那么这些控件如何使用呢?本篇我将带领大家一道学习一下如何使用这些控件.所谓无图无真相,先让大家看一下效果图: ...

  7. Power BI官方视频(1) Power BI Desktop 7月份更新功能概述

    2016年7月,Power BI Desktop进行了一些功能更新,提高整体的用户体验.同时也有一些新的和令人兴奋的功能.看看大概介绍,更新功能要点: 本文原文地址:Power BI官方视频(1) P ...

  8. BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确, ...

  9. innerHTML与innerText的异同

    在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...

  10. 配置putty自动登陆服务器

    putty是一款知名的SSH工具,可以用来登陆linux服务器,提供了终端.SSH是secure Shell的缩写.我之前也有一篇文章介绍这个话题:http://www.cnblogs.com/che ...