设计模式
到目前为止,我已经写完了面向对象完整的一个系列知识,前面基本属于理论,原理的理解,接下来,我们就用学到的知识来实战下吧.
看看理解原理和理论是否重要?例子从简单到复杂
一、单体(字面量)封装加减乘除
- var Oper = {
- add : function( n1, n2 ){
- return n1 + n2;
- },
- sbb : function( n1, n2 ){
- return n1 - n2;
- },
- mul : function( n1, n2 ){
- return n1 * n2;
- },
- div : function( n1, n2 ){
- return n1 / n2;
- },
- };
- console.log( Oper.add( 10, 20 ) ); //30
- console.log( Oper.sbb( 10, 20 ) ); //-10
- console.log( Oper.mul( 10, 20 ) ); //200
- console.log( Oper.div( 10, 20 ) ); //0.5
二、构造函数方式
- function Oper( n1, n2 ){
- this.num1 = n1 || 0;
- this.num2 = n2 || 0;
- this.setData = function( n1, n2 ){
- this.num1 = n1;
- this.num2 = n2;
- };
- this.add = function(){
- this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 );
- return this.num1 + this.num2;
- };
- this.sbb = function(){
- this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 );
- return this.num1 - this.num2;
- };
- this.mul = function(){
- this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 );
- return this.num1 * this.num2;
- };
- this.div = function(){
- this.setData( arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0 );
- return this.num1 / this.num2;
- };
- };
- console.log( new Oper( 10, 20 ).add() ); //30
- console.log( new Oper(100, 200).sbb( 10, 20 ) ); //-10
- console.log( new Oper().mul( 10, 20 ) ); //200
- console.log( new Oper().div( 10, 20 ) ); //0.5
三、构造函数+原型对象(prototype)
- function Oper(n1, n2) {
- this.num1 = n1 || 0;
- this.num2 = n2 || 0;
- };
- Oper.prototype = {
- constructor : Oper,
- setData : function (n1, n2) {
- this.num1 = n1;
- this.num2 = n2;
- },
- add : function () {
- this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0);
- return this.num1 + this.num2;
- },
- sbb : function () {
- this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0);
- return this.num1 - this.num2;
- },
- mul : function () {
- this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0);
- return this.num1 * this.num2;
- },
- div : function () {
- this.setData(arguments[0] || this.num1 || 0, arguments[1] || this.num2 || 0);
- return this.num1 / this.num2;
- }
- };
- console.log(new Oper().add(10, 20)); //30
- console.log(new Oper( 100, 200 ).sbb()); //-100
- console.log(new Oper().mul(10, 20)); //200
- console.log(new Oper().div(10, 20)); //0.5
四、寄生组合继承+简单工厂模式
- function Oper( n1, n2 ){
- this.num1 = n1;
- this.num2 = n2;
- };
- Oper.prototype.run = function(){}
- function object( o ){
- var G = function(){};
- G.prototype = o;
- return new G();
- };
- function inheritPrototype( subObj, superObj ){
- var proObj = object( superObj.prototype );
- proObj.constructor = subObj;
- subObj.prototype = proObj;
- }
- function OperAdd( n1, n2 ){
- Oper.call( this, n1, n2 );
- }
- inheritPrototype( OperAdd, Oper );
- OperAdd.prototype.run = function(){
- return this.num1 + this.num2;
- }
- function OperSbb( n1, n2 ){
- Oper.call( this, n1, n2 );
- }
- inheritPrototype( OperSbb, Oper );
- OperSbb.prototype.run = function(){
- return this.num1 - this.num2;
- }
- function OperMul( n1, n2 ){
- Oper.call( this, n1, n2 );
- }
- inheritPrototype( OperMul, Oper );
- OperMul.prototype.run = function(){
- return this.num1 * this.num2;
- }
- function OperDiv( n1, n2 ){
- Oper.call( this, n1, n2 );
- }
- inheritPrototype( OperDiv, Oper );
- OperDiv.prototype.run = function(){
- return this.num1 / this.num2;
- }
- function OperFactory( oper, n1, n2 ){
- switch( oper ) {
- case ‘+‘:
- return new OperAdd( n1, n2 ).run();
- break;
- case ‘-‘:
- return new OperSbb( n1, n2 ).run();
- break;
- case ‘*‘:
- return new OperMul( n1, n2 ).run();
- break;
- case ‘/‘:
- return new OperDiv( n1, n2 ).run();
- break;
- }
- }
- console.log( OperFactory( ‘+‘, 10, 20 ) ); //30
- console.log( OperFactory( ‘-‘, 10, 20 ) ); //-10
- console.log( OperFactory( ‘*‘, 10, 20 ) ); //200
- console.log( OperFactory( ‘/‘, 10, 20 ) ); //0.5
这种方式,虽然增加了代码量, 如果这道题是实际运用,比如说后面还有很多种运算,两个数的乘方,立方,平方等等,
还有其他特殊处理等等,那么这种扩展性就非常强
来源: http://www.bubuko.com/infodetail-2291613.html