博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
记6种常见的设计模式-Javascript
阅读量:6521 次
发布时间:2019-06-24

本文共 2840 字,大约阅读时间需要 9 分钟。

1、构造函数模式

/** * 构造一个对象函数 */function Animal(name, color){    this.name = name;    this.color = color;    this.getName = function(){        return this.name;    }}// 实例一个对象var cat = new Animal('狗', '黑色');console.log( cat.getName() );复制代码

2、工厂模式

/** * 工厂模式 */function Animal(opts){    var obj = new Object();    obj.name = opts.name;    obj.color = opts.color;    obj.getInfo = function(){        return '名称:'+obj.name +', 颜色:'+ obj.color;    }    return obj;}var cat = Animal({
name: '藏獒', color: '灰褐色'});cat.getInfo();复制代码

3、单例模式

/** * 在执行当前 Single 获得唯一对象 */var Single = (function(){    var instance;    function init() {        //define private methods and properties        //do something        return {            //define public methods and properties        };    }    return {        // 获取实例        getInstance:function(){            if(!instance){                instance = init();            }            return instance;        }    }})();var obj1 = Single.getInstance();var obj2 = Single.getInstance();console.log(obj1 === obj2);复制代码

4、发布订阅模式

/** * 发布订阅模式 */var EventCenter = (function(){    var events = {};    /*    {      my_event: [{handler: function(data){xxx}}, {handler: function(data){yyy}}]    }    */    // 绑定事件 添加回调    function on(evt, handler){        events[evt] = events[evt] || [];        events[evt].push({            handler:handler        })    }    function fire(evt, arg){        if(!events[evt]){            return         }        for(var i=0; i < events[evt].length; i++){            events[evt][i].handler(arg);        }    }    function off(evt){        delete events[evt];    }    return {        on:on,        fire:fire,        off:off    }}());var number = 1;EventCenter.on('click', function(data){    console.log('click 事件' + data + number++ +'次');});EventCenter.off('click');   //  只绑定一次EventCenter.on('click', function(data){    console.log('click 事件' + data + number++ +'次');});EventCenter.fire('click', '绑定');复制代码

5 、模块模式

/** * 模块模式 = 封装大部分代码,只暴露必需接口 */var Car = (function(){    var name = '兰博基尼';    function sayName(){        console.log( name );    }    function getColor(name){        console.log( name );    }    return {        name: sayName,        color: getColor    }})();Car.name();Car.color('红色');复制代码

6、混合模式

/** * 混合模式 = 原型模式 + 构造函数模式 */function Animal(name, color){    this.name = name;    this.color = color;    console.log( this.name  +  this.color)}Animal.prototype.getInfo = function(){    console.log('名称:'+ this.name);}function largeCat(name, color){    Animal.call(null, name, color);    this.color = color;}largeCat.prototype = create(Animal.prototype);function create (parentObj){    function F(){}    F.prototype = parentObj;    return new F();};largeCat.prototype.getColor = function(){    return this.color;}var cat = new largeCat("Persian", "白色");console.log( cat )复制代码

转载地址:http://oprfo.baihongyu.com/

你可能感兴趣的文章
c++builder6.0 mdi窗体+自定义子窗体
查看>>
poj3984 迷宫问题(简单搜索+记录路径)
查看>>
Linux 服务器buff/cache清理
查看>>
算法试题 及其他知识点
查看>>
php课程---Json格式规范需要注意的小细节
查看>>
hadoop hdfs notes
查看>>
Java反射机制详解(3) -java的反射和代理实现IOC模式 模拟spring
查看>>
(2编写网络)自己动手,编写神经网络程序,解决Mnist问题,并网络化部署
查看>>
手把手教你实现boost::bind
查看>>
【转】如何使用分区助手完美迁移系统到SSD固态硬盘?
查看>>
java~lambda表达式让查询更优雅
查看>>
a标签中的javascript:;是什么
查看>>
关于connect: network is unreachable 问题的解决【转】
查看>>
RxSwift源码与模式分析一:基本类
查看>>
.NET MVC5+ Dapper+扩展+微软Unity依赖注入实例
查看>>
INSTALL_FAILED_USER_RESTRICTED
查看>>
使用 https, 并将 WWW 跳转到 NON-WWW
查看>>
iToolkit,推荐我们自己做的一套前端组件
查看>>
Junit源码阅读(一)
查看>>
JavaScript设计模式与开发实践 | 01 - 面向对象的JavaScript
查看>>