码迷,mamicode.com
首页 > Web开发 > 详细

requireJS的匿名模块和命名模块的差别和最佳实践

时间:2014-10-18 18:24:17      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:requirejs定义模块   匿名模块   命名模块   

requirejs是一个简单的javascript框架,支持模块化编码和模块的异步加载。

在requireJS中模块可以分为:匿名模块和命名模块这2种。

requireJS定义一个匿名模块

define(function(){  
	
	return {id:"noName"};
	
}); 

requireJS定义一个命名模块

define("constantModule",[],function(){  
	
	return {id:"hasName"};
	
}); 

requireJS官网上也说: It is normally best to avoid coding in a name for the module and just let the optimization tool burn in the module names。就是说推荐使用匿名模块。


jquery从1.7版本开始支持AMD(Asynchronous Module Definition),并且是一个命名模块,模块名就是jquery,我使用的是jquery-1.11.1.js,源码如下:

if ( typeof define === "function" && define.amd ) {
	define( "jquery", [], function() {
		return jQuery;
	});
}

现在看下使用requireJS框架加载jquery,只要路径是正确的,下面代码是能够正确加载jquery的。

require.config({
	baseUrl:"./../",
    paths: {
        jquery: 'jquery-1.11.1'
    }
});

//jquery框架的模块名是jquery,这里不能修改,不然加载不成功
require(["jquery"], function(jq) {
	
	//如果加载成功,应该显示1.11.1
    alert(jq().jquery);

});

上面的代码能够正常加载jquery框架之后,我们稍微修改下上面的代码

require.config({
	baseUrl:"./../",
    paths: {
        jquery_name: 'jquery-1.11.1'
    }
});

//jquery框架的模块名是jquery,这里不能修改,不然加载不成功
require(["jquery_name"], function(jq) {
	
	//如果加载成功,应该显示1.11.1
    alert(jq().jquery);

});
可以发现,这次jquery框架不能正常加载。我们仅仅是改变了模块名而已。这里可以得出一个结论:

如果是命名模块,那么使用require加载该模块的时候,模块名一定要正确,不能随意修改

接下来我们加载自己定义的匿名模块和命名模块,验证下我们的结论。

require.config({
	baseUrl:"./../",
    paths: {
        jquery: 'jquery-1.11.1',
        hehe: 'require_demo/module_noName',
        constantModule: 'require_demo/module_hasName',
    }
});

//jquery框架的模块名是jquery,这里不能修改,不然加载不成功
require(["jquery","hehe","constantModule"], function(jq,noName,hasName) {
	
        alert(jq().jquery);
	alert(noName.id);
	alert(hasName.id);
});
调整文件路径,保证上面的代码能够正常加载。接下来我们可以修改上面的代码

require.config({
	baseUrl:"./../",
    paths: {
        jquery: 'jquery-1.11.1',
        xx: 'require_demo/module_noName',
        constantModule_hehe: 'require_demo/module_hasName',
    }
});

//jquery框架的模块名是jquery,这里不能修改,不然加载不成功
require(["jquery","xx","constantModule_hehe"], function(jq,noName,hasName) {
	
    alert(jq().jquery);
	alert(noName.id);
	alert(hasName.id);
});
可以发现:xx模块能够正常加载,constantModule_hehe不能正常加载。我们可以看到:匿名模块具有更大的灵活性,加载匿名模块的时候,名称可以随意指定



requireJS的匿名模块和命名模块的差别和最佳实践

标签:requirejs定义模块   匿名模块   命名模块   

原文地址:http://blog.csdn.net/aitangyong/article/details/40213043

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!