JS 设计模式
1、单例模式:产生一个类的唯一实例
例如:我们在页面中添加遮罩层,每次只能有一个遮罩层存在,因此为单例模式。
在创建遮罩层之前判断是否已经存在,若没有存在,则创建。
这里使用闭包,将是mask变量封装在createMask内。
var createMask=function(){
var mask;
return function(){
return mask||mask=document.body.appendChild(document.createElement('div'));
}
}()
2、工厂模式:产生多个相似的实例
这里使用的是 var x = Parent()而不是 var x = new Parent();因为后者会可能出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用这种模式。
var lev=function(){
return "play";
};
function Parent(){
var Child = new Object(); //在内部构造对象并返回
Child.name="xiaoming";
Child.age="20";
Child.lev=lev;
return Child;
};
var x = Parent();
alert(x.name);
alert(x.lev());
3、观察者模式:
观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 我们平时接触的dom事件. 就是js和dom之间实现的一种观察者模式。它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。(使用回调函数实现)
观察者模式可以很好的实现2个模块之间的解耦。
例如实现自定义事件,使用的就是观察者模式。
详细的内容可见博客:http://www.cnblogs.com/telnetzhang/p/5817033.html
4、代理模式
代理模式的定义是把对一个对象的访问, 交给另一个代理对象来操作。
我们来举一个简单的例子,假如dudu要送酸奶小妹玫瑰花,却不知道她的联系方式或者不好意思,想委托大叔去送这些玫瑰,那大叔就是个代理那我们如何来做呢?
// 先声明美女对象
var girl = function (name) {
this.name = name;
}; // 这是dudu
var dudu = function (girl) {
this.girl = girl;
this.sendGift = function (gift) {
alert("Hi " + girl.name + ", dudu送你一个礼物:" + gift);
}
}; // 大叔是代理
var proxyTom = function (girl) {
this.girl = girl;
this.sendGift = function (gift) {
(new dudu(girl)).sendGift(gift); // 替dudu送花咯
}
};
调用方式就非常简单了:
var proxy = new proxyTom(new girl("酸奶小妹"));
proxy.sendGift("999朵玫瑰");
实际的编程中, 因为性能问题使用代理模式的机会是非常多的。比如频繁的访问dom节点, 频繁的请求远程资源. 可以把操作先存到一个缓冲区, 然后自己选择真正的触发时机。
JS 设计模式的更多相关文章
- JS设计模式(一)
刚入职时,看过一段时间的设计模式,似懂非懂.不知不觉过去七个月了,对JS的理解更深刻了,数据结构与算法的基础也基本上算是过了一遍了,接下来要把设计模式搞定,然后不再深层次研究JS了,而是学习前端自动化 ...
- js设计模式(12)---职责链模式
0.前言 老实讲,看设计模式真得很痛苦,一则阅读过的代码太少:二则从来或者从没意识到使用过这些东西.所以我采用了看书(<js设计模式>)和阅读博客(大叔.alloyteam.聂微东)相结合 ...
- JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
- js 设计模式-接口
js模拟java接口检测函数:确保子类实现接口中的方法:(出自js设计模式) 上代码: <script type="text/javascript" > <%-- ...
- 前端笔记之JavaScript面向对象(三)初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
- [js]js设计模式小结
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- [js]设计模式小结&对原型的修改
js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...
- js设计模式总结1
js设计模式有很多种,知道不代表会用,更不代表理解,为了更好的理解每个设计模式,对每个设计模式进行总结,以后只要看到总结,就能知道该设计模式的作用,以及模式存在的优缺点,使用范围. 本文主要参考张容铭 ...
- js设计模式-观察者模式
定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...
- js设计模式:工厂模式、构造函数模式、原型模式、混合模式
一.js面向对象程序 var o1 = new Object(); o1.name = "宾宾"; o1.sex = "男"; o1.a ...
随机推荐
- asp.net mvc 防止开放重定向
/// <summary> /// 防止开发重定向,篡改returnurl /// </summary> /// <param name="request&qu ...
- 数组求和,计算给定数组 arr 中所有元素的总和
一,题目分析:可以使用数组的归并方法计算,reduce和reduceRight.二者作用几乎相同.只是归并方向相反.reduce和reduceRight都可以接收两个参数.第一个是在每一项上调用的函数 ...
- 几种排序算法的学习,利用Python和C实现
之前学过的都忘了,也没好好做过总结,现在总结一下. 时间复杂度和空间复杂度的概念: 1.空间复杂度:是程序运行所以需要的额外消耗存储空间,一般的递归算法就要有o(n)的空间复杂度了,简单说就是递归集算 ...
- ASP.NET DAY1
<!-- AutoEventWireup,CodeBehind,Inherits等属性可省略, Language属性为必须项 --> <%@ Page Language=" ...
- Linux学习 :移植U-boot_2016.09到JZ2440开发板
一.下载源码:ftp://ftp.denx.de/pub/u-boot/ 二.初始化编译: ①新建一个单板: cd board/samsung/ cp smdk2410 smdk2440 -rf ...
- PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)
PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...
- NLPIR(ICTCLAS)分析包的使用记录
前段时间使用了HanLP一个纯JAVA分词工具包,后来老大说分词效果不是很好,需要换一个分词工具.于是推荐了一个分词工具——NLPIR,它是中科院XXX研发的一个分词工具.这个分词工具只用C/C++写 ...
- MySQL数据库8 -子查询,联合查询
一 使用IN关键字的子查询 问题: 查询游戏类型是'棋牌类' 的游戏的分数信息 - 游戏分数表中并未包含游戏类型信息 思路一:采用链接查询 思路二: 分两步进行,首先找到所以'棋牌类'游戏的编号,再以 ...
- .NET连接SAP系统专题:BAPI_TRANSACTION_COMMIT的使用方法(十)
from:http://scnblogs.techweb.com.cn/mengxin/archives/5.html 为什么.net调用SAP的BAPI接口需要调用BAPI_TRANSACTION_ ...
- 入住cnblogs第一篇随笔 Hello, world!
在网上搜索计算机参考资料时经常看到各位大神的博客,甚是神往.今天我也在这里安家,记录自己的学习过程,也同各位共勉. 第一篇随笔,就用来测试一下这里的文本编辑器吧. //The C language # ...