设计模式系列之二策略模式

Java实现

有如下需求，明天周一，需要去公司上班，目前从家里到公司有两种策略，一种是公交，一种是地铁。下面就来实现一下

定义具体策略

public interface IStrategy {
   //对策略的描述
   public void description();
}

public class Bus implements IStrategy{
   @Override
   public void description() {
   	// TODO Auto-generated method stub
   	System.out.println("乘公交去上班");
   }
}

public class Subway implements IStrategy {
   @Override
   public void description() {
   	// TODO Auto-generated method stub
   	System.out.println("乘地铁去上班");
   }
}

最简单的策略调用

public class GoToWork {
	public void myStrategy(String strategy){
		if("bus".equals(strategy)){
			new Bus().description();
		}else if("subway".endsWith(strategy)){
			new Subway().description();
		}
	}
}

public class Test {
	public static void main(String[] args) {
		GoToWork gotowork = new GoToWork();
		gotowork.myStrategy("bus");
		gotowork.myStrategy("subway");
	}
}

从上面的代码中可以看出，通过if else的使用实现了简单的策略模式。但是，假如有一天我买车了，可以自己开车去上班了。这个时候就需要对GoToWork类做修改，需要再加一个else if判断来实现需求。这样就造成了代码的紧耦合。那么，有没有办法解耦，不但能让我开车，甚至开飞机上班都不用修改GoToWork类呢？

改造

public class GoToWork {
	//保存策略的引用
	private IStrategy strategy;
	//可动态设置策略
	public void setStrategy(IStrategy strategy){
		this.strategy = strategy;
	}
	public void myStrategy(){
		//这里实现了对策略的动态调用
		this.strategy.description();
	}
}

public class Test {
	public static void main(String[] args) {
		GoToWork work = new GoToWork();
		//乘公交上班
		work.setStrategy(new Bus());
		work.myStrategy();
		//乘地铁上班
		work.setStrategy(new Subway());
		work.myStrategy();
	    //开车上班
	    //work.setStrategy(new Car());
	    //work.myStrategy();
	    /*.....还可增加任意策略.....*/
	}
}

可以看到，对GoToWork类做完改造后，即满足了我们的需求。

JavaScript实现

之前写表格组件，有一个表格行可编辑的需求。开发人员在使用表格组件时可选择单元格的编辑类型：文本框、下拉框、单选按钮等。并且，为了灵活性，还需要能够让开发人员自定义类型，比如在表格的单元格中日期选择、弹出框选择等。针对该需求，策略模式派上了用场。

实现

(function(W){
    var singleton  = null;
    function Grid(){
        this.config = {
            pagination:true
        };
        init(this);
    }
    //表格初始化
    var init = function (G) {
        var $table = $("<table></table>");
        G.$Container = $("#"+this.placeAt).empty().append($table);
    };
    //设置表格配置
    Grid.prototype.setConfig = function (config) {
        this.config = $.extend(this.config,config);
    };
    //添加行
    Grid.prototype.addRow = function () {
        var $tr = $("<tr></tr>");
        var len = this.config.layout.length;
        for(var i=0;i<len;i++){
            var $td = $("<td></td>");
            new Cell($td,this.config.layout[i]);
            $tr.append($td);
        }
        this.$Container.append($tr);
    };
    //删除行
    Grid.prototype.deleteRow = function () {

    };
    //单例模式使用
    W.Grid.getInstance = function () {
        if(singleton===null){
            singleton = new Grid();
        }
        return singleton;
    };

    //单元格对象
    function  Cell($container,config) {
        this.$Container = $container;
        this.config     = config;
        this.init();
    }
    Cell.fn = Cell.prototype;

    Cell.fn.init = function(){
        if(this.config.editor){
            this._editor = this.edit();
        }else{
            this._editor = this.read();
        }
    };
    //单元格只读
    Cell.fn.read = function(){
        //使用默认策略渲染单元格
        return new Forms["Span"](this.$Container,"");
    };
    //单元格自定义与已有表单对象渲染
    Cell.fn.edit = function(){
        var formObj = null;
        var type    = this.config.editor.type;
        if(typeof(type)=="function"){
            //开发人员自定义的策略
            formObj = new type(this.$Container,"");
        }else if(typeof(type)=="string"){
            //首字母大写转换
            type    =  type.substring(0,1).toUpperCase() + type.substring(1,type.length);
            //动态选择已有策略
            formObj = new Forms[type](this.$Container,"");
        }
        return formObj;
    };


    /*******************************策略定义*****************************/
    var Forms = {};

    /**
     * 默认 只读
     * @param $container
     * @param value
     * @constructor
     */
    Forms.Span = function($container,value){
        this.parent = $container;
        this._value = value;
        this.$Dom   = '';
        this._init();
    };
    Forms.Span.prototype._init = function(){
        this.$Dom   = $('<span></span>').append(this._value);
        this.parent.append(this.$Dom);
    };
    Forms.Span.prototype.setValue = function(value){
        this.$Dom.html(value);
    };
    Forms.Span.prototype.getValue = function(){
        return this._value;
    };

    /**
     * 文本框
     * @param $container
     * @param value
     * @constructor
     */
    Forms.Text = function($container,value){
        this.parent     = $container;
        this._value     = value;
        this.$Dom       = null;
        this._init();
    };
    Forms.Text.prototype._init = function(){
        this.$Dom   = $('<input type="text" style="width:100%">');
        this.parent.append(this.$Dom);
        this.setValue(this._value);
    };
    Forms.Text.prototype.setValue = function(value){
        this.$Dom.val(value);
    };
    Forms.Text.prototype.getValue = function(){
        return this.$Dom.val();
    };
    /*自定义对象只需要同样实现set和get方法即可*/

})(window);

//使用策略模式动态渲染表格行中的单元格
var grid = Grid.getInstance();
grid.setConfig({
    placeAt:"GridContainer",
    layout:[
        {name:"姓名",field:"Name",sort:true,locked:true,editor:{type:"Text"}},
        {name:"性别",field:"Sex",sort:true,editor:{type:"radio",options:[{name:"男",value:"1"},{name:"女",value:"0"}]}},
        {name:"电话",field:"Phone",editor:{type:"Text"}},
        {name:"邮件",field:"Email"},
        {name:"地址",field:"Address",format:function(obj){}}
    ]
});
grid.addRow();

上一篇：设计模式系列之一单例模式
下一篇：设计模式系列之三观察者模式