【第8篇】TypeScript的Mixin案例代码详解

1、Mixin使用

• Ts代码

/**
 * Mixin使用.
 *随着传统的面向对象的层次结构，从可重用的组件建立类的另一种流行的方式是通过简单的组合部分类来构建他们。
 *你可能熟悉混入或性状比如Scala语言的理念，模式也达到了JavaScript的一些社区人气 
 */
// Disposable Mixin(一次性)
class Disposable {
    isDisposed: boolean;
    dispose() {
        this.isDisposed = true;
    }
}

// Activatable Mixin(激活混入)
class Activatable {
    isActive: boolean;
    activate() {
        this.isActive = true;
    }
    deactivate() {
        this.isActive = false;
    }
}

//SmartObject类实现Disposable与Activatable类
class SmartObject implements Disposable, Activatable {
    constructor() {
        setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);
    }
 
    //相互作用
    interact() {
        this.activate();
    }
 
    // Disposable
    isDisposed: boolean = false;
    dispose: () => void;
    // Activatable
    isActive: boolean = false;
    activate: () => void;
    deactivate: () => void;
}
applyMixins(SmartObject, [Disposable, Activatable])
var smartObj = new SmartObject();
setTimeout(() => smartObj.interact(), 1000);

////////////////////////////////////////
// In your runtime library somewhere
//在您的运行时库的地方
////////////////////////////////////////
function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        })
    }); 
}

• Js代码

/**
 * Mixin使用.
 *随着传统的面向对象的层次结构，从可重用的组件建立类的另一种流行的方式是通过简单的组合部分类来构建他们。
 *你可能熟悉混入或性状比如Scala语言的理念，模式也达到了JavaScript的一些社区人气 
 */
// Disposable Mixin(一次性)
var Disposable = (function () {
    function Disposable() {
    }
    Disposable.prototype.dispose = function () {
        this.isDisposed = true;
    };
    return Disposable;
})();

// Activatable Mixin(激活混入)
var Activatable = (function () {
    function Activatable() {
    }
    Activatable.prototype.activate = function () {
        this.isActive = true;
    };
    Activatable.prototype.deactivate = function () {
        this.isActive = false;
    };
    return Activatable;
})();

//SmartObject类实现Disposable与Activatable类
var SmartObject = (function () {
    function SmartObject() {
        var _this = this;
        // Disposable
        this.isDisposed = false;
        // Activatable
        this.isActive = false;
        setInterval(function () { return console.log(_this.isActive + " : " + _this.isDisposed); }, 500);
    }
    //相互作用
    SmartObject.prototype.interact = function () {
        this.activate();
    };
    return SmartObject;
})();
applyMixins(SmartObject, [Disposable, Activatable]);
var smartObj = new SmartObject();
setTimeout(function () { return smartObj.interact(); }, 1000);
////////////////////////////////////////
// In your runtime library somewhere
//在您的运行时库的地方
////////////////////////////////////////
function applyMixins(derivedCtor, baseCtors) {
    baseCtors.forEach(function (baseCtor) {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(function (name) {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}

---

工程源代码

TypeScript的Mixin案例代码详解

博客所有文章是本人2014年撰写,而GItHub的源代码是有些是2014年与2015年进行整理，由于在2013年项目接触TypeScript，同时在当年接触KendoUI开发的时候TypeScript的影子，故一年后决定把官方文档所有API文档认真琢磨了一遍，并且撰写成一本最全的中文TypeScript入门指南详解案例教程与代码,当初的下载量还是比较高的。由于最近接触Kotlin，自从学习TypeScript，它的语法对我后面学习Kotlin有了极大的帮助，个人感觉，它的语法跟ActionScript，Swift写法很像。故虽然好几年没怎么开发前端，由于它的重要性特意重新花点进行整理这门前端语言。