requireJS简单入门学习

时间：2025-01-15 22:42:55

概要


requireJS，翻译成中文即"需要js"，说白了就是加载js文件用的。怎么加载呢？，即遵循AMD规范的模块化加载。除了AMD规范还有一个叫做CMD规范，遵循CMD规范的模块加载器，比较有名的应该是国内的淘宝首席架构师”玉伯“写的SeaJS了，而且这货听说还能加载css文件，似乎很niubility! 但是今天讲的是requireJS,至于二者的优缺点请参考：/question/20342350,后来发现最火的答案居然是seaJS的作者写的，看来作者还是很在乎别人对SeaJS的评价。


ok,回到原题，有人会问为什么要使用基于模块的形式加载js文件呢？我的答案是不一定要用这种形式，使用这种形式是因人而异，因项目而异的，如果做大型网站的话，使用模块的形式会比较规范，维护也比较容易，架构也比较清晰，反正多学点东西没坏处。而且现在很多的js前端框架也开始支持兼容模块化的加载方式了，比如大名鼎鼎的，作为一个PE无人不知的Jquery,还有Node,Dojo,等。下面来看看jquery-ui的一个button组件的一小段代码，就知道怎么回事了。

<pre name="code" class="html">(function( factory ) {
	if ( typeof define === "function" &&  ) {

		// AMD. Register as an anonymous module.
		define([
			"jquery",
			"./core",
			"./widget"
		], factory );
	} else {

		// Browser globals
		factory( jQuery );
	}
}(function( $ ) {
//your plugin code
 //你的插件or模块代码 
});


 这是一种兼容的方法，如果你使用了AMD加载器（如requireJS）的话，define的类型就是function,然后就会按照AMD的规范来定义此插件（模块），关于如何按AMD规范来定义插件，请参考：/docs/#define。如果你没有使用加载器的话则按照一般的方法定义，这样的话就可以按照普通的方法正常使用了。 

 

 

现在我们应该知道，requireJS只能正确加载按照AMD规范定义的插件，通过只要对普通的插件进行简单的修改即可，不过现在越来越多的插件开始兼容AMD规范了。好了，现在来看看如何使用requireJS来加载插件吧。
 

 

一个小例子
 

那就用jquery-UI做例子吧，首先建立一个如下结构的工程目录：
 

 

├── 
├── js
│   ├── 
│   ├── jquery-ui
│   │   ├── 
│   │   ├── 
│   │   ├── 
│   │   ├── 
│   │   ├── 
│   │   ├── 
│   │   └── ...
│   ├── 
│   └── 
我们可以看到，所有js文件都放在了js目录中，和直接位于js目录中，并且所有的jquery UI的文件都位于jquery-ui目录中。则包含我们的主要代码。 

 

不过你也可以使用其他的目录结构，不过可能需要进行一些配置修改，这样requireJS才知道如何找到这些依赖的文件，可以参考change some configuration 
 

现在这些文件都准备好了，如何使用它们呢？请看中的代码：
 

 

<!doctype html>
<html lang="en">
<head>
    ...
</head>
<body>
 
<script src="js/" data-main="js/app"></script>
 
</body>
</html>
 

 我们只需要加载文件即可，注意这里只能加载这个一个文件，否则会报错的，详细请参考：/docs/#mismatch。这里还需要注意data-main属性，这里是js/，这里的意思是等加载完后会自动执行中的代码。不信的话，可以在中加一条();测试一下。 

 

 

/*  */
( "loaded" );
 

 下面就可可以使用require()这个函数来加载你想要的js文件了，如： 

 

 

require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
    ...
});
这样就会异步加载 
jquery-ui/和它所依赖的js文件（,jquery-ui/,jquery-ui/等）。 

 当这些依赖的文件全部加载完成后，就会执行后面的回调函数。 

 

下面是使用jquery-UI中的一个例子：
 

 

require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
    autocomplete({ source: [ "One", "Two", "Three" ] }, "<input>" )
        .element
        .appendTo( "body" );
});
你也可以吧jquery加载进来，这样就可以像使用jquery那样使用了： 

 

 

require([ "jquery", "jquery-ui/autocomplete" ], function( $ ) {
    $( "<input>" )
        .autocomplete({ source: [ "One", "Two", "Three" ]})
        .appendTo( "body" );
});
 

 ok,终于把这个例子介绍完了，尽管很粗糙，但是有个印象就行了，毕竟是入门，如果需要更深入的研究可以到reqiureJS官网查看更多细节和原理。
相关文章