首页 > 代码库 > requireJS简单入门学习

requireJS简单入门学习

2024-07-31 09:57:44   219人阅读

概要


requireJS，翻译成中文即"需要js"，说白了就是加载js文件用的。怎么加载呢？，即遵循AMD规范的模块化加载。除了AMD规范还有一个叫做CMD规范，遵循CMD规范的模块加载器，比较有名的应该是国内的淘宝首席架构师”玉伯“写的SeaJS了，而且这货听说还能加载css文件，似乎很niubility! 但是今天讲的是requireJS,至于二者的优缺点请参考：http://www.zhihu.com/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" && define.amd ) {

		// 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规范来定义插件，请参考：http://requirejs.org/docs/api.html#define。如果你没有使用加载器的话则按照一般的方法定义，这样的话就可以按照普通的方法正常使用了。
现在我们应该知道，requireJS只能正确加载按照AMD规范定义的插件，通过只要对普通的插件进行简单的修改即可，不过现在越来越多的插件开始兼容AMD规范了。好了，现在来看看如何使用requireJS来加载插件吧。
一个小例子
那就用jquery-UI做例子吧，首先建立一个如下结构的工程目录：
├── index.html
├── js
│   ├── app.js
│   ├── jquery-ui
│   │   ├── accordion.js
│   │   ├── autocomplete.js
│   │   ├── button.js
│   │   ├── core.js
│   │   ├── datepicker.js
│   │   ├── dialog.js
│   │   └── ...
│   ├── jquery.js
│   └── require.js
我们可以看到，所有js文件都放在了js目录中，jquery.js和require.js直接位于js目录中，并且所有的jquery UI的文件都位于jquery-ui目录中。app.js则包含我们的主要代码。
不过你也可以使用其他的目录结构，不过可能需要进行一些配置修改，这样requireJS才知道如何找到这些依赖的文件，可以参考change some configuration 
现在这些文件都准备好了，如何使用它们呢？请看index.html中的代码：
<!doctype html>
<html lang="en">
<head>
    ...
</head>
<body>
 
<script src=http://www.mamicode.com/"js/require.js" data-main="js/app"></script>>
我们只需要加载require.js文件即可，注意这里只能加载这个一个文件，否则会报错的，详细请参考：http://requirejs.org/docs/errors.html#mismatch。这里还需要注意data-main属性，这里是js/app.js，这里的意思是等reuire.js加载完后会自动执行app.js中的代码。不信的话，可以在app.js中加一条console.log();测试一下。
/* app.js */
console.log( "loaded" );

下面就可可以app.js使用require()这个函数来加载你想要的js文件了，如：
require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
    ...
});
这样就会异步加载jquery-ui/autocomplete.js和它所依赖的js文件（jquery.js,jquery-ui/core.js,jquery-ui/wedget.js等）。
当这些依赖的文件全部加载完成后，就会执行后面的回调函数。
下面是使用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官网查看更多细节和原理。
requireJS简单入门学习






























        

            
                
                  
                
                

                    联系

                    我们