首先咱们先来看看需求效果:
可以实现加减乘除取模运算,不用模块化开发代码很好实现,代码如下:
<!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语句的时候才执行对应的模块,这样模块的执行顺序和书写顺序是完全一致的。