requirejs与seajs的异同
首先咱们先来看看需求效果：
可以实现加减乘除取模运算，不用模块化开发代码很好实现，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="calculate">
<input type="text"><br>
<select>
<option value="1">加</option>
<option value="2">减</option>
<option value="3">乘</option>
<option value="4">除</option>
<option value="5">取余</option>
</select><br>
<input type="text"><br>
<input type="button" value="计算"><br>
<div></div>
</div>
<script>
// 构造函数+原型
function Calculate(cId) {
this.container = document.getElementById(cId);
this.btn = this.container.getElementsByTagName('input')[2];
this.a = this.container.getElementsByTagName('input')[0];
this.b = this.container.getElementsByTagName('input')[1];
this.flag = this.container.getElementsByTagName('select')[0];
this.result = this.container.getElementsByTagName('div')[0];
}
Calculate.prototype.sum = function(a,b){
return parseInt(a) + parseInt(b);
}
Calculate.prototype.abstract = function(a,b){
return parseInt(a) - parseInt(b);
}
Calculate.prototype.multiply = function(a,b){
return parseInt(a) * parseInt(b);
}
Calculate.prototype.divide = function(a,b){
return parseInt(a) / parseInt(b);
}
Calculate.prototype.mod = function(a,b){
return parseInt(a) % parseInt(b);
}
Calculate.prototype.init = function() {
// 原型方法中的this与构造函数中的this指向相同，都指向构造函数的实例
var that = this;
this.btn.onclick = function() {
// 事件方法中的this指向绑定事件的对象
var a = that.a.value;
var b = that.b.value;
var flag = that.flag.value;
var result = 0;
switch (parseInt(flag)) {
case 1:
result = that.sum(a, b);
break;
case 2:
result = that.abstract(a, b);
break;
case 3:
result = that.multiply(a, b);
break;
case 4:
result = that.divide(a, b);
break;
case 5:
result = that.mod(a, b);
break;
}
console.log(that.result);
that.result.innerHTML = result;
}
};
var Calculateobj = new Calculate('calculate');
Calculateobj.init();
</script>
</body>
</html>用模块化的方式来实现的话，首先要抽取模块，那么哪些东西可以抽取为模块呢？四则运算的函数和初始化的函数可以作为模块抽离出来，不论是seajs实现还是requirejs实现都需要一个主文件，seajs实现效果如下：index.html
首先是配置模块的路径和别名，然后引入并执行主文件main.js,man.js代码如下：
这里通过 require导入了 calculate模块，calculate模块内容如下：
通过require 导入了相应的功能模块，并且最后用module.exports将构造函数导出，
来看一下sum 是如何导出的：
其他的模块也是这样导出。以上便是seajs实现计算器功能。
用requirejs来实现计算器功能也很简单，写法不同而已，首先看index.html
main.js代码：
calculate模块内容如下：
通过依赖注入的方式引入模块，最后通过return导出构造函数。
sum模块的代码：
通过return 直接导出函数，以便其他模块使用。其他功能模块也是如此。
项目代码地址：https://github.com/clm1100/sandr（阅读原文打开链接）
从这两个例子中我们可以看出：
AMD和CMD最大的区别是对依赖模块的执行时机处理不同，注意不是加载的时机或者方式不同。 很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略。 为什么说是执行时机处理不同？ 同样都是异步加载模块，AMD在加载模块完成后就会执行该模块，所有模块都加载执行完后会进入回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行。 CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的。