`

javaScript设计模式中的掺元类

    博客分类:
  • js
阅读更多

今天虽然周末但是没有撒懒,因为媳妇要上班所以我得送她下去,一方面也是习惯了早起,睡不住。好久没有发表文章了,今天特意上来发表发表文章 ,呵呵。

以下是javascript的掺元类的一个demo,什么是掺元类呢,据我的理解掺元类你可以把他当做c里面的头文件,或者是java中的基类,然后呢其他的类想用这个类里面的方法,那么就直接继承它就可以了,但是这里的继承又不是java中的那种继承,其实更应该理解为对基类中方法的copy。下面上代码看看:

首先我们写一个User类,如下

function User(name,age){
    this.name = name;
    this.age = age;
};
User.prototype = {
    setName : function(n){
        this.name = n;
    },
    getName : function() {
        return this.name;
    },
    setAge : function(age){
        this.age = age;
    },
    getAge : function(){
        return this.age;
    }
};

然后呢再写一个掺元类,如下

var Mixin = function(){};
Mixin.prototype = {
    serialize : function(){//写这个方法的意图是为了查看类继承了掺元类后的结构
        var output = [];
        for(v in this){    //这里的this是指当前类,v代表中的中的属性(包含方法),this[v]表示属性的value
            output.push(v+':'+this[v]);
        }
        return output.join(",");    //这句话的意思是序列化继承后的当前类
    },
    name_age : function(){
        return this.name+"_"+this.age;
    },
    bb : function(){}
};

当然了掺元类本身不具备copy的功能,我们必须要写一个使用掺元类的方法的方法,如下

//copy掺元类里面所有的方法

function augment2(re,giv){
    for(mth in giv.prototype){
        if(!re.prototype[mth]){
            re.prototype[mth] = giv.prototype[mth];
        }
    }
};

/
function augment(re,giv){

//if的意思是根据自己的意愿copy需要的方法,而不是所有的
    if(typeof(arguments[2]) == 'object'){//这里要判断第三个参数是否为数组 这里不严谨大家自己改下
        for(var i=0;i<arguments[2].length;i++){
            re.prototype[arguments[2][i]] = giv.prototype[arguments[2][i]];
        }
    }else{

//这里的意思是如果没有第三个参数,或者是其他的那么直接copy掺元类里面的所有的方法到当前类
        augment2(re,giv);
    }
}

//这句话很重要,这句话的意思是继承掺元类,如果丢了这句话那么就无法使用掺元类里面的方法,这里只copy掺元类里面的serialize跟name_age方法

augment(User,Mixin,['serialize','name_age']);

如果写copy所有的方法那么就这样写

augment(User,Mixin);

接着我们实例化一个User对象

var au = new User('信科',23);

然后我们就可以调用掺元类里面的方法了

alert(au.serialize());

大家现在就可以观察效果了

希望大家多多指教,可能有的地方表示不准确,希望大家见谅!

 

 

0
0
分享到:
评论

相关推荐

    JavaScript设计模式与开发实践.pdf

    本书《JavaScript设计模式与开发实践》是JavaScript语言的设计模式和开发实践的指南,旨在帮助初、中、高级Web前端开发人员和想往架构师晋级的中高级程序员,掌握JavaScript设计模式和开发实践的知识。本书共分为三...

    JavaScript设计模式.pdf

    单体模式是JavaScript中最基本的设计模式之一。它的主要作用是提供一个命名空间,减少全局变量的数量,避免代码冲突,并组织代码使其易于维护。单体模式可以用来划分命名空间,组织代码和避免代码冲突。 2. 工厂...

    总结JavaScript设计模式编程中的享元模式使用

    在JavaScript中实现享元模式时,我们需要关注几个角色: 1. 客户端(Client):客户端是调用享元工厂来获取对象的类,通常指的是应用中需要用到对象的部分。 2. 享元工厂(Flyweight Factory):负责创建和管理享...

    JavaScript设计模式与开发实践_himppf_js_jspremise_精通javascript_Js设计模式_

    在JavaScript中,"模块模式"是常见的设计模式,它通过闭包来封装变量和函数,防止全局污染。"工厂模式"可以用来动态地创建具有相似特征的对象,而"单例模式"确保一个类只有一个实例,常用于管理共享资源。"装饰器...

    JavaScript高级与设计模式.zip

    在JavaScript中,常见的设计模式有: 1. **单例模式(Singleton)**:确保一个类只有一个实例,并提供一个全局访问点。在JavaScript中,通常通过闭包实现。 2. **工厂模式(Factory)**:用于创建对象,隐藏了对象...

    javascript 设计模式之享元模式原理与应用详解

    本文实例讲述了javascript 设计模式之享元模式。分享给大家供大家参考,具体如下: 享元模式说明 定义:用于解决一个系统大量细粒度对象的共享问题: 关健词:分离跟共享; 说明: 享元模式分单纯(共享)享元模式,...

    学用 JavaScript 设计模式

    在JavaScript中,设计模式的学习和应用能够帮助开发者利用这门语言的特性,编写出更加模块化、易于维护和复用的代码。 具体到JavaScript设计模式,有多种类型可以利用,包括: 1. 构造器模式:通过构造函数创建...

    Javascript 设计模式系统讲解与应用视频资源地址.txt

    Javascript 设计模式系统讲解与应用视频资源地址.txt

    JavaScript设计模式与开发实践1

    《JavaScript设计模式与开发实践1》是一本深入探讨JavaScript设计模式的书籍,旨在帮助Web前端开发人员提升开发技能,特别是对于希望晋升为架构师的中高级程序员。全书分为三个部分,涵盖了JavaScript面向对象、函数...

    JavaScript模式(中文版带目录)

    书中可能会详细介绍一些经典的设计模式,如观察者模式、策略模式、装饰模式、适配器模式等,以及它们在JavaScript中的实现和应用场景。理解这些模式可以帮助开发者在面对复杂问题时,选择最适合的解决方案。 八、...

    【JavaScript设计模式】根据曾探所著《JavaScript设计模式与开发实践》整理的学习笔记.zip

    【JavaScript设计模式】根据曾探所著《JavaScript设计模式与开发实践》整理的学习笔记

    JavaScript 设计模式.zip

    JavaScript 设计模式JavaScript 模式项目页面http: //shichuan.github.io/javascript-patterns

    【JavaScript设计模式】根据曾探所著《JavaScript设计模式与开发实践》整理的学习笔记_pgj.zip

    【JavaScript设计模式】根据曾探所著《JavaScript设计模式与开发实践》整理的学习笔记_pgj

    JavaScript模式【英文版】.pdf

    如果您是一名有经验的开发者,正在寻找与对象、函数、继承以及其他特定语言分类,那么本书中的抽象方案和代码模板将是十分理想的指南,无论您正在使用Javascript编写客户端、服务端,抑或是桌面应用程序。...

    JavaScript设计模式_hy5.zip

    JavaScript设计模式_hy5

    JavaScript设计模式_hy4.zip

    JavaScript设计模式_hy4

    设计模式_javascript_

    在JavaScript中,常见的设计模式有单例模式、工厂模式、观察者模式、装饰器模式、代理模式、策略模式、命令模式、模态模式、建造者模式以及组合模式等。这些模式都是为了提升代码质量、降低复杂度和提高代码复用性。...

Global site tag (gtag.js) - Google Analytics