[js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算
到目前为止,我已经写完了面向对象完整的一个系列知识,前面基本属于理论,原理的理解,接下来,我们就用学到的知识来实战下吧.
看看理解原理和理论是否重要?例子从简单到复杂
一、单体(字面量)封装加减乘除
1 var Oper = { 2 add : function( n1, n2 ){ 3 return n1 + n2; 4 }, 5 sbb : function( n1, n2 ){ 6 return n1 - n2; 7 }, 8 mul : function( n1, n2 ){ 9 return n1 * n2; 10 }, 11 div : function( n1, n2 ){ 12 return n1 / n2; 13 }, 14 }; 15 console.log( Oper.add( 10, 20 ) ); //30 16 console.log( Oper.sbb( 10, 20 ) ); //-10 17 console.log( Oper.mul( 10, 20 ) ); //200 18 console.log( Oper.div( 10, 20 ) ); //0.5
二、构造函数方式
1 function Oper( n1, n2 ){ 2 this.num1 = n1 || 0; 3 this.num2 = n2 || 0; 4 this.setData = function( n1, n2 ){ 5 this.num1 = n1; 6 this.num2 = n2; 7 }; 8 this.add = function(){ 9 this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 ); 10 return this.num1 + this.num2; 11 }; 12 this.sbb = function(){ 13 this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 ); 14 return this.num1 - this.num2; 15 }; 16 this.mul = function(){ 17 this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 ); 18 return this.num1 * this.num2; 19 }; 20 this.div = function(){ 21 this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 ); 22 return this.num1 / this.num2; 23 }; 24 }; 25 26 console.log( new Oper( 10, 20 ).add() ); //30 27 console.log( new Oper(100, 200).sbb( 10, 20 ) ); //-10 28 console.log( new Oper().mul( 10, 20 ) ); //200 29 console.log( new Oper().div( 10, 20 ) ); //0.5
三、构造函数+原型对象(prototype)
1 function Oper(n1, n2) { 2 this.num1 = n1 || 0; 3 this.num2 = n2 || 0; 4 }; 5 Oper.prototype = { 6 constructor : Oper, 7 setData : function (n1, n2) { 8 this.num1 = n1; 9 this.num2 = n2; 10 }, 11 add : function () { 12 this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0); 13 return this.num1 + this.num2; 14 }, 15 sbb : function () { 16 this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0); 17 return this.num1 - this.num2; 18 }, 19 mul : function () { 20 this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0); 21 return this.num1 * this.num2; 22 }, 23 div : function () { 24 this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0); 25 return this.num1 / this.num2; 26 } 27 }; 28 console.log(new Oper().add(10, 20)); //30 29 console.log(new Oper( 100, 200 ).sbb()); //-100 30 console.log(new Oper().mul(10, 20)); //200 31 console.log(new Oper().div(10, 20)); //0.5
四、寄生组合继承+简单工厂模式
1 function Oper( n1, n2 ){ 2 this.num1 = n1; 3 this.num2 = n2; 4 }; 5 Oper.prototype.run = function(){} 6 function object( o ){ 7 var G = function(){}; 8 G.prototype = o; 9 return new G(); 10 }; 11 function inheritPrototype( subObj, superObj ){ 12 var proObj = object( superObj.prototype ); 13 proObj.constructor = subObj; 14 subObj.prototype = proObj; 15 } 16 17 function OperAdd( n1, n2 ){ 18 Oper.call( this, n1, n2 ); 19 } 20 inheritPrototype( OperAdd, Oper ); 21 OperAdd.prototype.run = function(){ 22 return this.num1 + this.num2; 23 } 24 25 function OperSbb( n1, n2 ){ 26 Oper.call( this, n1, n2 ); 27 } 28 inheritPrototype( OperSbb, Oper ); 29 OperSbb.prototype.run = function(){ 30 return this.num1 - this.num2; 31 } 32 33 function OperMul( n1, n2 ){ 34 Oper.call( this, n1, n2 ); 35 } 36 inheritPrototype( OperMul, Oper ); 37 OperMul.prototype.run = function(){ 38 return this.num1 * this.num2; 39 } 40 41 function OperDiv( n1, n2 ){ 42 Oper.call( this, n1, n2 ); 43 } 44 inheritPrototype( OperDiv, Oper ); 45 OperDiv.prototype.run = function(){ 46 return this.num1 / this.num2; 47 } 48 49 function OperFactory( oper, n1, n2 ){ 50 switch( oper ) { 51 case '+': 52 return new OperAdd( n1, n2 ).run(); 53 break; 54 case '-': 55 return new OperSbb( n1, n2 ).run(); 56 break; 57 case '*': 58 return new OperMul( n1, n2 ).run(); 59 break; 60 case '/': 61 return new OperDiv( n1, n2 ).run(); 62 break; 63 } 64 } 65 66 console.log( OperFactory( '+', 10, 20 ) ); //30 67 console.log( OperFactory( '-', 10, 20 ) ); //-10 68 console.log( OperFactory( '*', 10, 20 ) ); //200 69 console.log( OperFactory( '/', 10, 20 ) ); //0.5
这种方式,虽然增加了代码量, 如果这道题是实际运用,比如说后面还有很多种运算,两个数的乘方,立方,平方等等,
还有其他特殊处理等等,那么这种扩展性就非常强
作者:ghostwu, 出处:http://www.cnblogs.com/ghostwu
博客大多数文章均属原创,欢迎转载,且在文章页面明显位置给出原文连接