requireJS简单入门学习

页面导航:首页 > 网络编程 > JavaScript > requireJS简单入门学习

requireJS简单入门学习

来源: 作者: 时间:2016-02-19 09:19 【

概要requireJS,翻译成中文即 需要js ,说白了就是加载js文件用的。怎么加载呢?,即遵循AMD规范的模块化加载。除了AMD规范还有一个叫做CMD规范,遵循CMD规范的模块加载器,比较有名的

概要


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组件的一小段代码,就知道怎么回事了。

(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中的代码:




    ...


 
<script src="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" ] }, "" )
        .element
        .appendTo( "body" );
});
你也可以吧jquery加载进来,这样就可以像使用jquery那样使用了:

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

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

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <