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

作者 : 开心源码 本文共2760个字,预计阅读时间需要7分钟 发布时间: 2022-05-13 共257人阅读

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写法很像。故尽管好几年没怎样开发前台,因为它的重要性特意重新花点进行整理这门前台语言。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 【第8篇】TypeScript的Mixin案例代码详解

发表回复