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

sumory 发布于2019-08-20 11:57 / 2474人阅读

摘要：脱离，拥抱行为委托式编程今天分享的鸡汤来自于有书共读你的衣服淘汰的太快，居然是网络时代的错任何新方法，任何可以使事情更易完成的方法都是科技，这才是对科技的正确理解。

脱离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.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.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会比较好一点，但是对相关联可以更好的支持关注分离原则，创建和初始化并不需要合并为一个步骤。

云服务器 GPU云服务器响应式编程函数式编程函数式编程指针 php响应式编程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80716.html

这一次，我们换种姿势学习 javascript

摘要：操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。此外可以使用和来设置对象及其属性的不可变性级别。忽视这一点会导致许多问题。使用调用函数时会把新对象的属性关联到其他对象。前言《你不知道的 javascript》是一个前端学习必读的系列，让不求甚解的JavaScript开发者迎难而上，深入语言内部，弄清楚JavaScript每一个零部件的用途。本书介绍了该系列的两个主题：...

zone 2019-08-26 11:54 评论0 收藏0
简析React 和 Redux 的特点和关系

摘要：这对复杂问题定位是有好处的。同时，也是纯函数，与的是纯函数呼应。强约束约定，增加了内聚合性。通过约定和全局的理解，可以减少的一些缺点。约定大于配置也是框架的主要发展方向。 React+Redux非常精炼，良好运用将发挥出极强劲的生产力。但最大的挑战来自于函数式编程（FP）范式。在工程化过程中，架构（顶层）设计将是一个巨大的挑战。要不然做出来的东西可能是一团乱麻。说到底，传统框架与rea...

iOS122 2019-08-21 11:35 评论0 收藏0
每个 JavaScript 工程师都应当知道的 10 个面试题

摘要：在创业初期，你招来的工程师必须是能够独当一面的大神队友。要评估一个应聘者的真实水准，最佳方式就是结对编程。用微博的抓取消息并显示在时间线上，就是个很好的考察应聘者的面试项目。不过结对编程再好使，也没办法让你完全了解一个应聘者。原文链接：10 Interview Questions Every JavaScript Developer Should Know 对大部分公司来说，招聘技...

weij 2019-08-22 15:59 评论0 收藏0
每个 JavaScript 工程师都应当知道的 10 个面试题

摘要：所支持的面向对象编程包括原型继承。发明于年的就是首批支持函数式编程的语言之一，而演算则可以说是孕育了这门语言。即使在今天，这个家族的编程语言应用范围依然很广。 1. 能说出来两种对于 JavaScript 工程师很重要的编程范式么？ JavaScript 是一门多范式（multi-paradigm）的编程语言，它既支持命令式（imperative）/面向过程（procedural）编程...

jone5679 2019-08-29 15:28 评论0 收藏0
每个 JavaScript 工程师都应当知道的 10 个面试题

摘要：所支持的面向对象编程包括原型继承。发明于年的就是首批支持函数式编程的语言之一，而演算则可以说是孕育了这门语言。即使在今天，这个家族的编程语言应用范围依然很广。 1. 能说出来两种对于 JavaScript 工程师很重要的编程范式么？ JavaScript 是一门多范式（multi-paradigm）的编程语言，它既支持命令式（imperative）/面向过程（procedural）编程...

YorkChen 2019-08-22 17:27 评论0 收藏0