第一次使用require.js

来源：互联网发布：劳丽诗淘宝店叫什么编辑：程序博客网时间：2024/06/05 17:22

由于项目中会用到require.js再加上这个确实很流行，以后模块化是必然的趋势，我们组下周也会有交流，所以我想好好的开始看看require.js。

网上对于require.js介绍太多了：http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/

我这里就不再过多赘述，直接先来写写代码，熟悉一下。

________________________________________________________________________________________________________________________________

文件目录是

require.html

main.js

require.js

js/jquery.js

js/test.js

require.js的API：

         config--配置requirejs依赖。
         define--创建模块，全局函数。
         require--读取依赖，全局函数。

注：define和require用法相同，但define要有return返回，以供其他模块调用；require则没有返回接口。

我想达到的效果就是在main.js中直接调用test.js中的函数API（require中每一个js文件其实就是一个模块，也就一个对象），也就是调用test模块中的API函数（我自己测试发现，如果在一个文件中定义2两个define的话，只有第一个有效，不知道我的方法对不对，define使用的时候我没有加id）

require.html:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>require</title></head><body><script src="require.js" type="text/javascript" data-main="main"></script></body></html>

data-main:指定了函数入口（省去了.js，其实就是加载main.js这个文件，源码中应该有处理，目前我不清楚原理，你打开网页的F12你可以发现它已经帮你写好了<script src="main.js" type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main">），相当于我们C语言中的main函数的作用。

这里先从其他模块说起：（前面说过每个js文件就是一个模块，所以每个js的文件名就是模块的名字，不要后缀.js）

test.js：

define(["jquery"],function ($) {function Func(){this.fun=function(){console.log("lzj");}}    //Do setup work here    return         Func });

define(id，dependencies，factory)；
第一个参数id，表示模块标识，可省略；
第二个参数dependencies，表示模块依赖，可省略；
第三个参数factory，模块的实现，或一个js对象。

我这里使用define去定义一个模块，第一个参数是依赖项，就拿我这里的jquery来说，我这个文件里面用到了jq，所以我最开始定义模块的时候声明了一下它的依赖项（这个在main.js 中去声明），如果还有其他模块的话同样以数组的形式写进去。然后就是定义了一个函数，函数的形参就是前面依赖项的对象的传递，方便我们去调用依赖项的函数。

在这个代码中我定义了一个构造器函数Func,其中定义了一个fun的方法，供其他模块使用，最后返回这个构造器函数Func。

我们这里还可以用另外一种返回的方式，就是直接返回一个对象，代码可以修改为：

define(["jquery"],function ($) {function fun(){console.log("lzj")}    //Do setup work here    return   {            fun:fun     } });

//当然，如果你返回了一个对象，那么你还可以在这个对象里面添加其他属性，和上面那种方法大同小异，只不过是对象的创建方式不一样罢了。

main.js:

如果我们用test.js中的第一种方式去定义对象，就使用下面的方法去调用。

require.config({baseUrl:"js",});require(["jquery","test"],function($,test){var t=new test();t.fun();console.log($().jquery);});

require.conf去定义我们模块的路径，其实里面的参数还挺多，不过第一次使用的时候就只用到这些，其他的后面遇到再说。

baseUrl："js"定义了用于加载模块的根路径。因为我的jquery.js和test.js都在js路径下，所以这样我们就不用再去指定这个路径下的文件了，还有两个参数是paths和shim，paths是用于映射不存在根路径下面的模块路径；shim是配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。

然后我们调用reuquire去调用我们的函数，其实它的参数和define类似，只不过一个是定义，一个是去调用。

如果我们用第二种定义对象的方法去调用函数的的话则是下面方法，其实刚才也说了就是对象定义的2种方式，对象文本标识法和构造器函数构建方法：

require.config({baseUrl:"js",});require(["jquery","test"],function($,test){test.fun();console.log($().jquery);});

这里没有说jquery.js是因为它是很成熟的一个模块，并不是我们自己写的一个模块，所以我们只需要去依赖使用它就行。

0 0