seajs 2.x 和 requirejs 2.x 的差异

写在前面的话:

现在web框架很多,相关的自动化解决方案也很多,这点我知道。

请不要问本人为啥还研究这个两个“工具”,我回答不了,如果觉得低级,直接忽略本文。

不比两个工具的好坏,就说说本人查看两个“工具”源代码感受到的差异。


差异

内部架构

requirejs里面是有“上下文-模块”的概念。

seajs里面只有“模块”的概念。

requirejs里面有使用事件defined来解耦


模块的差异

编写模块(即调用define函数)的时候,对require的机制是不一样的

seajs里面的define可以使用require的返回值来取得模块“导出的信息”,require是阻塞的。模块里面的require只针对模块。程序主入口使用 seajs.use(['depend1'],function(depend1){ ... });

requirejs里面的define不可以使用require的返回值来取得模块“导出的信息”,require是异步的,里面只能用回调的方式来使用。模块里面的require和程序的主入口中的require是一致的。程序的主入口:require(['depend1'],function(depend1){ ... });

requirejs里面require的用法

define(function(require,exports,module) {
	
	require(["modules/module1/define"], function(module1) {
		 module1.console('modules/module1/define');
	});
});

seajs里面require的用法

define(function(require,exports,module) {
	
	var module2 = require('modules/module1/define');
	module2.console('invoke module1...');
});

个人会养成的模块写法

requirejs模块的写法

全参数的写法( 此例子,只是说明define中可支持的全部依赖参数)

define(['modules/module3/define','require','exports','module'],function(module3,require,exports,module) {
	console.log('loaded module 2 begain...');
	
	console.log('bing module3 mehtod ...');
	exports.console1 = module3.console;
	exports.console2 = module3.console;	
	exports.console3 = module3.console;
	
	console.log('loaded module 2 end...');
});

没有依赖的写法

define(function(require,exports,module) {
	console.log('loaded module 3...');
	
	module.exports = {
		console : function(str){
			console.log(str);
		}
	};
});

有依赖的写法(把依赖直接声明在第一个参数上,放弃掉require的引用,会立即加载依赖)

define(['modules/module3/define','exports','module'],function(module3,exports,module) {
	console.log('loaded module 2 begain...');
	
	console.log('bing module3 mehtod ...');
	exports.console1 = module3.console;
	exports.console2 = module3.console;	
	exports.console3 = module3.console;
	
	console.log('loaded module 2 end...');
});

seajs模块的写法

没有声明依赖的写法(依赖在匿名函数内编写,会延迟加载依赖)

define(function(require,exports,mod) { 
	var jquery = require('jquery');
	return {
		console : function(str){
			console.log(str);
		}
	};
});

有声明依赖的写法(声明依赖,会立即加载依赖)

define(['jquery'],function(require,exports,mod) {  
	return {
		console : function(str){
			console.log(str);
		}
	};
});

入口函数差异

requirejs的入口

require(["modules/module1/define"], function(module1) {
	 module1.console('modules/module1/define');
})

seajs的入口

seajs.use("modules/module1/define", function(module1) {
    module1.console('modules/module1/define');
});

配置的差异

requirejs的配置

require.config({	
	baseUrl: "http://www.domaintrade.com/requirejs/assets/",
	paths: {
	  "jquery": "global/js/jquery-1.8.3",
	}
});

seajs的配置

seajs.config({
	base: "http://www.domaintrade.com/seajs/assets/",
	alias: {
	  "jquery": "global/js/jquery-1.8.3.js",
	}
});


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值