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

Posted 2020-09-13 wzjhoutai

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不能正常载入。

我们能够看到：匿名模块具有更大的灵活性。载入匿名模块的时候，名称能够任意指定。