一篇文章掌握RequireJS常用知识(5)

define(id?, dependencies?, factory); 其中: id: 模块标识,可以省略。 dependencies: 所依赖的模块,可以省略。 factory: 模块的实现,或者一个JavaScript对象

关于第一个参数,本文不会涉及,因为RJ建议所有模块都不要使用第一个参数,如果使用第一个参数定义的模块成为命名模块,不适用第一个参数的模块成为匿名模块,命名模块如果更名,所有依赖它的模块都得修改!第二个参数是依赖数组,跟require一样,如果没有这个参数,那么定义的就是一个无依赖的模块;最后一个参数是回调或者是一个简单对象,在模块加载完毕后调用,当然没有第二个参数,最后一个参数也会调用。

本部分所举例都采用如下项目结构:

一篇文章掌握RequireJS常用知识

1. 定义简单对象模块:

app/bar.js

define({ bar:'I am bar.' }); 利用main.js测试: require.config({ baseUrl: 'scripts/lib', paths: { app: '../app' } }); require(['app/bar'], function(bar) { console.log(bar);// {bar: 'I am bar.'} });

2. 定义无依赖的模块:

app/nodec.js:

define(function () { return { nodec: "yes, I don't need dependence." } });

利用main.js测试:

require.config({ baseUrl: 'scripts/lib', paths: { app: '../app' } }); require(['app/nodec'], function(nodec) { console.log(nodec);// {nodec: yes, I don't need dependence.'} });

3. 定义依赖其它模块的模块:

app/dec.js:

define(['jquery'], function($){ //use $ do sth ... return { useJq: true } });

利用main.js测试:

require.config({ baseUrl: 'scripts/lib', paths: { app: '../app' } }); require(['app/dec'], function(dec) { console.log(dec);//{useJq: true} });

4. 循环依赖:
当一个模块foo的依赖数组中存在bar,bar模块的依赖数组中存在foo,就会形成循环依赖,稍微修改下bar.js和foo.js如下。

app/bar.js:

define(['foo'],function(foo){ return { name: 'bar', hi: function(){ console.log('Hi! ' + foo.name); } } });

lib/foo.js:

define(['app/bar'],function(bar){ return { name: 'foo', hi: function(){ console.log('Hi! ' + bar.name); } } });

利用main.js测试:

require.config({ baseUrl: 'scripts/lib', paths: { app: '../app' } }); require(['app/bar', 'foo'], function(bar, foo) { bar.hi(); foo.hi(); });

运行结果:

一篇文章掌握RequireJS常用知识

如果改变main.js中require部分的依赖顺序,结果:

一篇文章掌握RequireJS常用知识

循环依赖导致两个依赖的module之间,始终会有一个在获取另一个的时候,得到undefined。解决方法是,在定义module的时候,如果用到循环依赖的时候,在define内部通过require重新获取。main.js不变,bar.js改成:

define(['require', 'foo'], function(require, foo) { return { name: 'bar', hi: function() { foo = require('foo'); console.log('Hi! ' + foo.name); } } });

foo.js改成:

define(['require', 'app/bar'], function(require, bar) { return { name: 'foo', hi: function() { bar = require('app/bar'); console.log('Hi! ' + bar.name); } } });

利用上述代码,重新执行,结果是:

一篇文章掌握RequireJS常用知识

模块定义总结:不管模块是用回调函数定义还是简单对象定义,这个模块输出的是一个引用,所以这个引用必须是有效的,你的回调不能返回undefined,但是不局限于对象类型,还可以是数组,函数,甚至是基本类型,只不过如果返回对象,你能通过这个对象组织更多的接口。

4.09 内置的RJ模块
再看看这个代码:

define(['require', 'app/bar'], function(require) { return { name: 'foo', hi: function() { var bar = require('app/bar'); console.log('Hi! ' + bar.name); } } });

依赖数组中的require这个moduleID对应的是一个内置模块,利用它加载模块,怎么用你已经看到了,比如在main.js中,在define中。另外一个内置模块是module,这个模块跟RJ的另外一个配置有关,具体用法请在第5大部分去了解。

4.10 其它RJ有用功能
1. 生成相对于模块的URL地址

define(["require"], function(require) { var cssUrl = require.toUrl("./style.css"); });

这个功能在你想要动态地加载一些文件的时候有用,注意要使用相对路径。

2. 控制台调试

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwzxw.html