文档章节

RequireJs 2.0 API 中四种定义模块的方式。

龙马行空
 龙马行空
发布于 2014/06/27 20:51
字数 1705
阅读 162
收藏 0
点赞 0
评论 0

      模块不同于传统意义上的脚本文件,因为它定义了一个良好作用域的对象,能够避免污 染全局的命名空间。它能够明确地列出其依赖,和全局对象无关地操作这些依赖,相反的, 接收这些依赖作为定义模块函数的参数。RequireJS 中的模块是模块模式的一个扩展,具有 不需要参考其他模块的全局设置的优势。  
      对于模块的 RequireJS 语法允许它们尽可能快的被加载,甚至是无序的,但是能够以正 确的依赖顺序执行,由于没有创建全局变量,所以说在一个页面中加载多个版本的模块成为 了可能。  
     (如果你熟悉或正在使用 CommonJS 模块,那么你也可以参考下在 CommonJS 注解中的 关于如何将 RequireJS 模块映射到 CommonJS 模块中的相关资料)  
       磁盘上的每个文件应当只有一个模块定义。各个模块可以通过优化工具划分为优化的包。 


1、简单键值对
如果模块不依赖于任何模块,同时只是传递一些 name/value 对,那么只是传递了一个 原始的对象给 define():  
//Inside file my/shirt.js:
define({     color: "black",     size: "unisize" }); 

2、定义函数

如果模块不依赖于任何模块,但是需要使用函数做一些设置工作,那么定义它自己,传 递一个函数给 define():  
//my/shirt.js now does setup work //before returning its module definition. define(function () {     //Do setup work here  
    return {         color: "black",         size: "unisize"     } });


3、定义依赖的函数

如果模块有依赖,那么第一个参数应该是依赖名称的数组集合,第二个参数应该是一个 定义的函数。一旦所有依赖都已加载,那么将调用这个函数来定义模块。这个函数应该返回 一个定义模块的对象。这些依赖将作为参数传递给定义的参数,同时按照依赖顺序在参数中 列出来。  
//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’.这些代表了’./car’ ‘./inventory’模块。 上述函数直到 my/cart,my/inventory 模块加载完成后才被调用,它接收模块作为 cart 和 inventory 参数  定义全局的模块是明确不鼓励使用的,以便一个模块的多个版本能够在一个页面上同时 存在(参考高级用法)。同时函数的参数顺序应该和依赖的顺序相匹配。  函数调用的返回值定义了’my/shirt’模块。通过这种方式定义模块, ’my/shirt’并不是作为 一个全局对象而存在的  


4、定义一个模块作为一个函数 

模块没有必要一定返回对象。函数中的任何合法返回值都是允许的。下面是一个返回一个函 数作为它的模块定义的模块示例:  
//A module definition inside foo/title.js. It uses //my/cart and my/inventory modules from before, //but since foo/bar.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;         }     } );

5、自定义模块

您可能会遇到的一些 define()函数调用,函数的第一个参数是模块名称:  
//Explicitly defines the "foo/title" module:     define("foo/title",         ["my/cart", "my/inventory"],         function(cart, inventory) {             //Define foo/title object in here.        }     ); 这些通常是由优化工具生成的。你可以明确地命名模块名称,但是这样会导致模块的可 移植性很差。假如你把文件移到另外一个目录,这时你需要修改名称。最好的实践是避免编 码模块名称,让优化工具自行优化模块名。优化工具需要添加模块名,以便在一个文件中可 以绑定多个模块,这样在浏览器中能够加载的更快。

6、其他模块说明

 一个文件一个模块: 按照模块到文件路径查找算法,每个 JavaScript 文件应该只定义一个模块。优化工具会 将多个模块分组到优化的文件中,但是你只能通过优化工具将多个模块放到一个文件中。  Define()相对模块命名: 在 define()函数内部调用 require(‘./relative/name’)之前,确保’require’已经作为一个依赖, 只有这样相对名称才能被正确的解析:  
define(["require", "./relative/name"], function(require) {     var mod = require("./relative/name"); });  
或更好的,对于解析 CommonJS 模块使用简洁的语法是可行的。  
define(function(require) {     var mod = require("./relative/name"); });  
这种形式,将使用 Function.prototype.toStrin()找到 require()调用,并把它们添加依赖 数组中,由于“require”已加载 ,因此这样的代码会正常解析相对路径。 相对路径真的非常有用,如果你在一个目录下创建了一些模块,那么你可以好其他人或 其他工程共享这些目录,同时你能够在那个目录下的兄弟模块获取到一个句柄,而不需要知 道目录的名称。  
 生成相对路径模块的 URL  你可能需要生成相对于模块的 URL。要做到这一点,将’require’作为依赖,使用 require.toUrl()生成 URL:  
define(["require"], function(require) {     var cssUrl = require.toUrl("./style.css"); });   
 控制台代码调试  如果你需要在 JavaScript 控制台和一个已经通过 require(["module/name"], function(){})加 载好的模块进行调试,那么你需要使用 require()函数通过模块名查询它  
require("module/name").callSomeFunction()  
注意:这个只有先通过 require 异步加载模块 require([‘module/name’])才有效。如果使用的 相对路径,比如‘./module/name’,这类的只有在 define 内部有效。 

 

© 著作权归作者所有

共有 人打赏支持
龙马行空
粉丝 385
博文 127
码字总数 119251
作品 0
房山
前端工程师
JavaSript模块规范 - AMD规范与CMD规范介绍

JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性...

大糊涂
2015/06/09
0
0
RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目...

nosand
2014/05/04
0
10
关于 CommonJS AMD CMD UMD

一、CommonJS CommonJs 是服务器端模块的规范,Node.js采用了这个规范。 根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件...

雪飘七月
06/26
0
0
关于 CommonJS AMD CMD UMD

CommonJS CommonJs 是服务器端模块的规范,Node.js采用了这个规范。 根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部...

奥巴码侬
2014/05/11
0
8
CommonJS/AMD/CMD/UMD概念初探

1、CommonJS是一种规范,NodeJS是这种规范的实现。 1.1、CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。 参考: http://www.commonjs.org/ http://javascript.ruanyifen...

easonjim
2016/12/12
0
0
RequireJS + AngularJS Seed 03 _RequireJS

在 index.html 里面引用 Requirejs。 这里第一部分src当然就是指requirejs的库文件。第二部分data-main是指入口配置。当前我指定的是scripts下面的bootstrap。requirejs默认的是js文件作为存...

开源中国匿名会员
2014/05/08
0
0
RequireJS + AngularJS Seed 04 _RequireJS

今天继续拆。我想问,尼玛我以前碰到的队友难道都是前端转过来的?洋洋洒洒上万行堆一个文件里面不难受么。大致的目录结构像下面这样: ---------- 很好。看起来模块相互依赖关系是这样的。 ...

开源中国匿名会员
2014/05/09
0
4
Angular项目构建指南 - 不再为angular构建而犹豫不决

前言 接触Angular也有小半个月了,虽然没有使劲折腾,不过正所谓"no zuo no die".学一门新东西,不好好折腾一下总觉得对不起祖国,最不起人民...好像扯远了,想写前言来着.为什么要写这篇构建指南...

顽Shi
2014/06/16
0
16
Seajs模块化开发Javascript - 用代码说话(一)

前言 模块化开发JS已经逐渐开始普及,在RequireJS和SeaJS中犹豫了2天,最后选择从SeaJS入手.网上有不少教程和使用方法,不过理论东西太多了,我是标准的实用主义和拿来主义者,所以直接用代码说话...

顽Shi
2014/03/30
0
6
JS三教九流系列-require.js-网站模块化开发

js开发的模块化就是module处理 简单理解js模块化的开发就是让我们的web项目对js进行分类的处理 我们在开发网站的时候,里面会用要很多的类库,如jquery,还会有到基于jq各种插件,还会有其他...

透笔度
2015/08/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

istio源码分析之pilot-discovery模块分析

本文分析的istio代码版本为0.8.0,commit为0cd8d67,commit时间为2018年6月18日。 本文为Service Mesh深度学习系列之一: Service Mesh深度学习系列part1—istio源码分析之pilot-agent模块分...

xiaomin0322
3分钟前
0
0
数据库基本操作:增删改查及联表操作

所用软件:SQL Server Management Studio 首先第一步,建立一个表。在这里命名为T1。并在里面填入几条数据。如图: T1 一.查询 查询所有:select * from T1; 按条件查询:select * from T1 ...

小_橙_子
7分钟前
0
0
Crontab作业时间设置

今天,遇到这么一个题目,周一到周五的9:00-16:59之间,每隔两分钟将某个命令运行一次。给的答案是: */2 9-16 * * 1-5 /usr/sbin/somecommand dosomething 乍一看,这个答案不对,应...

大别阿郎
12分钟前
0
0
ES17-JAVA API文档管理

1.保存文档 可以通过json工具把java对象转换成json字符串进行保存,也可以通过内置的帮助类直接构建json格式 /** * 获取客户端 * * @return */public static TransportClie...

贾峰uk
13分钟前
0
0
Python代码规范和命名规范

前言 Python 学习之旅,先来看看 Python 的代码规范,让自己先有个意识,而且在往后的学习中慢慢养成习惯 一、简明概述 1、编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况, 文件头...

blackfoxya
15分钟前
0
0
联动滑动之一:NestScrollChild和NestedScrollingParent

NestScrollChild和NestedScrollingParent 吐槽一下开源中国竟然标题字数有限制 由于项目中使用了CoordinateLayout来解决联动以及实现炫酷的UI效果,那么必须就要研究一波源码了,毕竟知其然知...

JerryLin123
33分钟前
1
0
cloudera spark2.2 读写hbase

cloudera spark2.2 读写hbase 例子 host = 'bigdata-03,bigdata-05,bigdata-04'conf = { "hbase.zookeeper.quorum": host, "hbase.mapreduce.inputtable": "student1"}k......

osenlin
37分钟前
0
0
数据库规范化

转载自 一个小时学会MySQL数据库 地址:http://www.cnblogs.com/best/p/6517755.html 截取其中 1.4 部分 用于自己学习使用 感谢作者:张果 1.4、数据库规范化 经过一系列的步骤,我们现在终于...

十万猛虎下画山
38分钟前
0
0
ios逆向之工具篇

Reveal:查看任意app的UI结构 注:1.不越狱的手机,可以用Reveal来查看自己app的UI结构,不能查看其它app的结构。 2.越狱手机上可以查看任意app的UI结构。 IDA:反编译工具 从App Store下载的...

HeroHY
39分钟前
0
0
EOS区块链平台智能合约示例HelloWorld

我们将介绍一个使用EOS智能合约构建hello World的例子。 一般环境设置通过上一篇文章已经说明,这方面的问题大家可以看本博客上一篇文章,本文引用了官方EOS在Git上的示例。 运行nodeos 要通...

笔阁
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部