zoukankan      html  css  js  c++  java
  • javascript模式——Mixin

    Mixin是一种扩展收集功能的方式,能提高代码的复用率。

    在javascript中,原型可以继承于其它对象的原型,并且可以为任意数量的实例定义属性。可以利用这一点来促进函数的复用。

    下面一段代码就是将一些可以被复用的代码利用underscore.js里的_.extend对原型扩展,以实现高复用。

    // 一些代码,可以被下面的类混入,
    var controls = {
        moveForward: function(){
            console.log(this.name + ' move forward');
        },
        moveLeft: function(){
            console.log(this.name + ' move left');
        },
        moveRight: function(){
            console.log(this.name + ' move right');
        }
    }
    
    // Car类
    function Car(){
        this.name = 'car';
        this.moveBackward = function(){
            console.log(this.name + ' move backward');
        }
    }
    
    // Airplane类
    function Airplane(){
        this.name = 'airplane';
        this.moveUp = function(){
            console.log(this.name + ' move up');
        }
        this.moveDown = function(){
            console.log(this.name + ' move down');
        }
    }
    _.extend(Car.prototype, controls);
    _.extend(Airplane.prototype, controls);
    
    var car = new Car()
    car.moveRight();
    
    var airplane = new Airplane()
    airplane.moveLeft();

    除了使用underscore.js里的方法进行对象扩展,我们也可以自己实现混入功能,像一些有独特需求的,比如指定混入的方法名等等。

    // 一些代码,可以被下面的类混入,
    var controls = {
        moveForward: function(){
            console.log(this.name + ' move forward');
        },
        moveLeft: function(){
            console.log(this.name + ' move left');
        },
        moveRight: function(){
            console.log(this.name + ' move right');
        }
    }
    
    // Car类
    function Car(){
        this.name = 'car';
        this.moveBackward = function(){
            console.log(this.name + ' move backward');
        }
    }
    
    function mixin( receivingClass, givingClass ) {
        // only provide certain methods
        if ( arguments[2] ) {
            for ( var i = 2, len = arguments.length; i < len; i++ ) {
                receivingClass[arguments[i]] = givingClass[arguments[i]];
            }
        }
    }
    
    mixin(Car.prototype, controls, 'moveForward');
    
    var car = new Car();
    car.moveForward() // car move forward 
    car.moveLeft() //  error:undefined is not a function  
  • 相关阅读:
    关闭webstorm自动保存,并显示文件未保存标识
    ionic1.3.3 下拉刷新 上拉加载更多
    纯css导航下划线跟随效果【转载】
    wpf获取模板化控件中的动画。
    wpf中dropdownButton控件下拉居中。。。
    C#综合揭秘——深入分析委托与事件
    反射
    多线程,异步
    wcf,socket,数据传输方式
    面向对象五大原则三个基本特征
  • 原文地址:https://www.cnblogs.com/winderby/p/4325087.html
Copyright © 2011-2022 走看看