脱离OO，拥抱“行为委托”式编程

脱离OO，拥抱“行为委托”式编程

今天分享的鸡汤来自于“有书共读”——《你的衣服淘汰的太快，居然是网络时代的错》

任何新方法，任何可以使事情更易完成的方法都是科技，这才是对科技的正确理解。

相信大家都很熟悉Javascript“面向对象”编程，但是这种设计模式对于JS来说，我认为不是一个简单的科学的设计模式。先来上代码

• 面向对象编程

---

    function Widget(width, height) {
        this.width = width || 50;
        this.height = height || 50;
        this.$elem = null;
    }

    Widget.prototype.render = function ($where) {
        if(this.$elem){
            this.$elem.css({
                width : this.width + "px",
                height : this.height + "px"
            }).appendTo( $where )
        }
    };

    //子类
    function Button(width, height, label) {
        //调用super 构造函数
        Widget.call(this, width, height);
        this.label = label || "Default";

        this.$elem = $("<button>").text( this.label );
    }
    //继承
    Button.prototype = Object.create( Widget.prototype );
    //重写render
    Button.prototype.render = function ($where) {
        //构造函数
        Widget.prototype.render.call(this, $where);

        this.$elem.click( this.onClick.bind( this ));
    };

    Button.prototype.onClick = function () {
        console.log("Button"+this.label+"Clicked!");
    };

    $( document ).ready( function () {
        var $body = $(document.body);
        var btn1 = new Button(125, 30, "hello");
        var btn2 = new Button(150, 40, "world!");

        btn1.render($body);
        btn2.render($body);
    })

总结：在上面代码中出现了显示的伪多态，即通过Widget.call和Widget.prototype.render.call从“子类”方法中引用“父类方法”中的基础方法。本来就不适合为什么要强行使用呢？真的好看么？

• 行为委托方式

---

    var Widget = {
        init : function (width, height) {
            this.width = width || 50;
            this.height = height || 50;
            this.$elem = null
        },
        insert : function ($where) {
            if(this.$elem){
                this.$elem.css({
                    width : this.width + "px",
                    height : this.height + "px"
                }).appendTo($where)
            }
        }
    };

    var Button = Object.create(Widget);

    Button.setup = function (width, height, label) {
        //委托调用
        this.init(width, height);
        this.label = label;

        this.$elem = $("<button>").text( this.label );
    };

    Button.build = function ($where) {
        //委托调用
        this.insert($where);
        this.$elem.click( this.onClick.bind( this ));
    };

    Button.onClick = function () {
        console.log("Button" + this.label + "clicked！");
    };

    $( document ).ready( function () {
        var $body = $( document.body );
        var btn1 = Object.create( Button );
        btn1.setup(125, 30, "Hello");

        var btn2 = Object.create( Button );
        btn2.setup(150, 40, "World! ");

        btn1.build($body);
        btn2.build($body);
    })
    

---

总结：两种编程的风格不同如果说简洁度可能OO会比较好一点，但是对相关联可以更好的支持关注分离原则，创建和初始化并不需要合并为一个步骤。