RequireJS 2.1.1 + jQuery 1.8.1 使用ABC

RequireJS是什么?可以用他来作什么?您可以继续阅读本文的参考连接,本文只为刚开始使用RequireJS来加载jQuery的朋友提供使用小提示.RequireJS的更多使用技巧可以访问其网官

A.RequireJS让我找不到北了
1.通常一个A网页引入一个B.js文件,A就可以使用B中定义的函数或变量,但为什么我下面的代码不好使呢?

<script data-main="/T/orange/images/B" src="/js/require.js"></script>

解:
在RequireJS中,data-main的值其实是一个js地址,只不过扩展名省略不写,这在所有的配置和使用中是通用.


2.我在B.js中已成功加载的js文件,为什么A不能使用呢?我的代码如下:

requirejs.config({
    baseUrl: '/js/'
	//这是一个相对应用的目录,如果你写成../js/哪就是相对B.js的目录
});

require(['jquery'],function($){
	//my js code
});

解:
RequireJS作为AMD规范最好的实现者之一，AMD所定义的define 方法,可以用他来实现代码的模块化.只需要在B.js中填加:

define(["jquery"], function($){
	return window.jQuery;
});

同时你在哪个文件中require,哪么require来的js只能在当前的文件中访问,所以B.js中require来的jquery.js在A.html中看上去是加载成了,但它只服务于B.js

B.路径不对呀?
1.这个require路径我完全糊涂了,A.html我的js代码

<script data-main="/T/orange/images/main" src="/js/require.js"></script>
<script type="text/javascript">
	require(['/js/jquery','require_common'],function($){
        //my js code
	});
</script>

为什么会找不到/js/jquery.js呀?

解:
require(dependencies,callback);中的dep是我們要载入的js,而其路径則是相对于/T/orange/images/main,而且一定不需要扩展名.这样写就没问题：

	require(['../../../js/jquery','require_common'],function($){
        //my js code
	});

如果需要载入的文件太多,并且离data-main所在的目录又太深,可以用requirejs.config方法,在其中定义paths

<script type="text/javascript">
	requirejs.config({
	       paths: {
			"jquery": "../../../js/jquery" 
		      }
        });
	require(['jquery','require_common'],function($){
	//my js code
        });
</script>

C.用RequireJS比传统的写法还要多敲好几个字符呀?
1.原来我只需要依次这样写:

<script type="text/javascript" charset="UTF-8" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/nicEdit.js"></script>
<script type="text/javascript" src="/js/halo.js"></script>
<script type="text/javascript" charset="UTF-8" src="/T/orange/images/require_common.js"></script>

用RequireJS就成了这样:

require(['../../../js/jquery','../../../js/nicEdit','../../../js/halobox','require_common'],function($){
//my js code
});

而且还容易出错.太麻烦了!

解:
一直以來，我們都習慣使用 script 這個 HTML 標籤來載入 JavaScript 檔案。這種方式有兩種缺點：
無法在 JavaScript 程式中直接管理相依性，必須在 HTML 中處理。
雖然目前新式瀏覽器已經能夠以非同步的方式來載入 js 檔案，但是舊型瀏覽器還是會有阻塞 (blocking) 問題。

RequireJS 2.1.1引入了一个新的shim配置参数,可以帮你管理文件的依赖关系,你的RequireJS code可能是这样的:

<script type="text/javascript">
	requirejs.config({
		paths: {
			"jquery": "../../../js/jquery",
			"halobox": "../../../js/halobox",
			"nicEdit":"../../../js/nicEdit",
			"require_common":"../templates/orange/images/require_common"
		},
		shim:{
			'require_common':{
				deps:['jquery','halobox','nicEdit']
			},
			'halobox':{
				deps:['jquery'],
				exports: 'halobox'
			}
		}
	});
	require(['main','require_common'],function($){
	//my js code
		alert(halobox.getShareSite());
	});
</script>

参考网址:点击打开链接

                点击打开链接