实现计算器
首先从大多数人熟悉的编程习惯开始，假如现在要使用JacaScript实现一个计算器的案例，如图所示：
前面两个文本框用语输入需要计算的数值，下拉菜单用于选择运算符，单击等号后，计算结果会出现在第三个文本框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
计算器
</title>
</head>
<body>
<input type="text" id="x">
<select name="" id="opt">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
<option value="4">%</option>
</select>
<input type="text" id="y">
<button id="cal">=</button>
<input type="text" id="result">
<script>
//传递参数cal
var calculator=(function(cal){
function add(x,y) {
// 加法
return parseInt(x)+parseInt(y);
}
function subtract(x,y) {
// 减法
return parseInt(x)-parseInt(y);
}
function multiply(x,y) {
// 乘法
return parseInt(x)*parseInt(y);
}
function divide(x,y) {
// 除法
return parseInt(x)/parseInt(y);
}
cal.add=add;
cal.subtract=subtract;
cal.multiply=multiply;
cal.divide=divide;
return cal;
})(calculator||{});
//从代码上来看：下面的calculator已经把上面的calcutator给覆盖掉了
//注意：在进行代码扩展的时候，优先查找要扩展的对象是否已经存在
var calculator=(function(cal){
//取余方法
cal.mod=function(x,y){
return x%y
}
return cal;
})(calculator||{});
//获取所有DOM元素
var oX=document.getElementById('x');
var oY=document.getElementById('y');
var oOpt=document.getElementById('opt');
var oCal=document.getElementById('cal');
var oResult=document.getElementById('result');
//为等号按钮添加单击事件，当按钮被单击时调用此方法
oCal.addEventListener('click',function(){
var x=oX.value.trim();
var y=oY.value.trim();
var opt=oOpt.value
var result=0
switch(opt){
case'0':
result=calculator.add(x,y);
break;
case'1':
result=calculator.subtract(x,y);
break;
case'2':
result=calculator.multiply(x,y);
break;
case'3':
result=calculator.divide(x,y);
break;
case'4':
result=calculator.mod(x,y);
break;
}
oResult.value=result
})
</script>
</body>
</html>
当要对这个模块进行扩展和维护的时候，或者这个模块存有第三方依赖的时候，可以通过参数的形式将原来的模块和第三方库传递进去。
在上述代码中，第23行在用语计算的匿名函数中传递cal作为参数，该参数可以看做匿名函数本身，第45行代码“calculator||{}”的意思是，当扩展该模块时，判断calculator函数是否存在，如果存在使用已经存在的，如果不存在就重新创建，这样做的好处是在加载时不需要考虑顺序。第48-54行用于添加取余的方法，第81行用于调用取余方法，在浏览器中打开，效果如下：
