全局函數(shù)的方式
在html中要實(shí)現(xiàn)加減的運(yùn)算
<body>
<input type="text" id="txt_a">
<select id="sel_op">
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="text" id="txt_b">
<input type="button" id="btn" value=" = ">
<input type="text" id="txt_res">
<!-- 需要實(shí)現(xiàn)計(jì)算的功能，于是乎抽象了一個(gè)計(jì)算的模塊 -->
</body>
在header中實(shí)現(xiàn)加減function，將重復(fù)使用的代碼封裝到函數(shù)中。
<script>
// 實(shí)現(xiàn)加減function
function add(a, b) {
return parseFloat(a) + parseFloat(b);
}
function subtract(a, b) {
return parseFloat(a) - parseFloat(b);
}
// 早期的開發(fā)過程中就是將重復(fù)使用的代碼封裝到函數(shù)中
// 再將一系列的函數(shù)放到一個(gè)文件中，稱之為模塊
// 約定的形式定義的模塊，存在命名沖突，可維護(hù)性也不高的問題
// 僅僅從代碼角度來(lái)說(shuō)：沒有任何模塊的概念
window.onload = function() {
var ta = document.getElementById('txt_a');
var tb = document.getElementById('txt_b');
var tres = document.getElementById('txt_res');
var btn = document.getElementById('btn');
var op = document.getElementById('sel_op');
btn.onclick = function() {
switch (op.value) {
case '+':
tres.value = add(ta.value, tb.value);
break;
case '-':
tres.value = subtract(ta.value, tb.value);
break;
}
};
};
</script>
封裝對(duì)象的方式
首先建立math對(duì)象，對(duì)于加減操作都放在calculator對(duì)象中，在calculator對(duì)象中添加具體方法，缺點(diǎn)是沒有私有空間。
var math = {};
math.calculator = {};
math.calculator.add = function(a, b) {
return a + b;
};
私有空間劃分
建立自執(zhí)行函數(shù)，返回相應(yīng)的方法，函數(shù)有了私有空間可以定義私有變量及方法
<script>
// 計(jì)算模塊
var calculator = (function() {
// 這里形成一個(gè)單獨(dú)的私有的空間var name = '';
// convert函數(shù)為私有的轉(zhuǎn)換邏輯
function convert(input){
return parseInt(input);
}
// 加減函數(shù)為暴露給外部的邏輯
function add(a, b) {
return convert(a) + convert(b);
}
function subtract(a, b) {
return convert(a) - convert(b);
}
// 返回
return {
add: add,
subtract: subtract,
}
})();
封裝函數(shù)的方式
建立自執(zhí)行函數(shù)，傳入?yún)?shù)為window.calculator或空對(duì)象，首先實(shí)現(xiàn)add方法，新增需求時(shí)，傳入calculator對(duì)象，會(huì)添加remain方法
(function(calculator) {
function convert(input) {
return parseInt(input);
}
calculator.add = function(a, b) {
return convert(a) + convert(b);
}
window.calculator = calculator;
})(window.calculator || {});
// 新增需求
(function(calculator) {
function convert(input) {
return parseInt(input);
}
// calculator 如果存在的話，就是擴(kuò)展，不存在就是新加
calculator.remain = function(a, b) {
return convert(a) % convert(b);
}
window.calculator = calculator;
})(window.calculator || {});
// 開閉原則，對(duì)新增開放，對(duì)修改關(guān)閉；
第三方依賴
對(duì)于第三方的依賴，作為參數(shù)傳入，如下面第一種方式，需要引入jquery，第二中方式j(luò)query直接作為參數(shù)傳入
(function(calculator) {
// 對(duì)全局產(chǎn)生依賴，不能這樣用
//console.log($);
function convert(input) {
return parseInt(input);
}
calculator.add = function(a, b) {
return convert(a) + convert(b);
}
window.calculator = calculator;
})(window.calculator || {});
// 新增需求
// calc_v2016.js
(function(calculator, $) {
// 依賴函數(shù)的參數(shù)，是屬于模塊內(nèi)部
console.log($);
function convert(input) {
return parseInt(input);
}
// calculator 如果存在的話，我就是擴(kuò)展，不存在我就是新加
calculator.remain = function(a, b) {
return convert(a) % convert(b);
}
window.calculator = calculator;
})(window.calculator || {}, jQuery);
