脫離OO，擁抱“行為委托”式編程

sumory 發(fā)布于2019-08-20 11:57 / 2427人閱讀

摘要：脫離，擁抱行為委托式編程今天分享的雞湯來自于有書共讀你的衣服淘汰的太快，居然是網(wǎng)絡(luò)時代的錯任何新方法，任何可以使事情更易完成的方法都是科技，這才是對科技的正確理解。

脫離OO，擁抱“行為委托”式編程

今天分享的雞湯來自于“有書共讀”——《你的衣服淘汰的太快，居然是網(wǎng)絡(luò)時代的錯》

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

相信大家都很熟悉Javascript“面向?qū)ο蟆本幊蹋沁@種設(shè)計模式對于JS來說，我認(rèn)為不是一個簡單的科學(xué)的設(shè)計模式。先來上代碼

面向?qū)ο缶幊?/p>

    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) {
        //調(diào)用super 構(gòu)造函數(shù)
        Widget.call(this, width, height);
        this.label = label || "Default";

        this.$elem = $("

總結(jié)：在上面代碼中出現(xiàn)了顯示的偽多態(tài)，即通過Widget.call和Widget.prototype.render.call從“子類”方法中引用“父類方法”中的基礎(chǔ)方法。本來就不適合為什么要強(qiáng)行使用呢？真的好看么？

行為委托方式

    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) {
        //委托調(diào)用
        this.init(width, height);
        this.label = label;

        this.$elem = $("

總結(jié)：兩種編程的風(fēng)格不同如果說簡潔度可能OO會比較好一點(diǎn)，但是對相關(guān)聯(lián)可以更好的支持關(guān)注分離原則，創(chuàng)建和初始化并不需要合并為一個步驟。