JavaScript高级---适配器模式
一、设计模式
javascript里面给我们提供了很多种设计模式：
工厂、桥、组合、门面、适配器、装饰者、享元、代理、观察者、命令、责任链
在前面我们实现了工厂模式和桥模式
工厂模式 ：
核心：为了生产对象，实现解耦。
桥接模式 ：
（桥接模式是一种既能把两个对象连接在一起，又能避免二者间的强耦合的方法。通过“桥”把彼此联系起来，同时又允许他们各自独立变化）
主要作用：主要作用表现为将抽象与其实现隔离开来，以便二者独立化。
组合模式 ：
（组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式。使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为。这可以简化粘合性代码，使其更容易维护，而那些复杂行为则被委托给各个对象。）
优点 ：
1 你可以用同样的方法处理对象的集合与其中的特定子对象。
2 它可以用来把一批子对象组织成树形结构，并且使整棵树都可以被遍历。
场景 ：
1 存在一批组织成某种层次体系的对象
2 希望对这批对象或其中的一部分对象实施一个操作。
特点 ：
1 组合模式中只有两种类型对象：组合对象、叶子对象
2 这两种类型都实现同一批接口
3 一般我们会在组合对象中调用其方法并隐式调用"下级对象"的方法（这里我们一般采用递归的形式去做）
门面模式
两个作用：
1、简化类的接口
2、消除类与使用它的客户代码之间的耦合
门面模式常常是开发人员最亲密的朋友。它几乎是所有javascript库的核心原则
门面模式的目的是为了让开发人员用更简单的方法调用一些相对复杂或组合的方法，主要就是简化开发的复杂性，提供一个相对容易的API去调用内部的方法供外界去使用，这样程序员开发会变得轻松些，编写一次组合代码后可以反复的去使用它，有助于节省时间和精力
注意：
不要滥用门面模式，所以使用你心仪的门面之前一定要三思而定，搞不好你就会小题大做
适配器设计
1、适配器模式可用来在现有的接口和不兼容的类之间进行适配。
使用这种模式的对象又叫做包装器（wrapper），因为他们是在用一个新的接口包装另一个对象。
借助适配器可以处理一些类与API不匹配、不能一同使用的情况。
2、注意适配器和门面虽然比较类似，但是门面模式只是为了简化一个接口，
它并不是提供额外的选择，适配器则要把一个接口转换为另一个接口，
它并不会滤除某些能力，也不会简化接口。
介绍简单的适配器模式-------注意主要要掌握思想，代码是次要
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>适配器设计</title>
<!--
@theme: javascript高级 适配器设计
@autor：EthanCoco
@date：2015-11-23
@email：lijianlin0204@163.com
-->
</head>
<body>
<script type=text/javascript charset=utf-8>
//适配器设计
/**
适配器模式可用来在现有的接口和不兼容的类之间进行适配。
使用这种模式的对象又叫做包装器（wrapper），因为他们是在用一个新的接口包装另一个对象。
借助适配器可以处理一些类与API不匹配、不能一同使用的情况。
注意适配器和门面虽然比较类似，但是门面模式只是为了简化一个接口，
它并不是提供额外的选择，适配器则要把一个接口转换为另一个接口，
它并不会滤除某些能力，也不会简化接口。
*/
/*********************************************************/
/*********************************************************/
//通常做法很简单 如下：
//我在页面上写了三个div
//场景 ：在企业开发中：JavaScript库中有(extjs,jquery,yui,prototype....等等)
//（我们现用prototype框架，会prototype的程序员该怎写？
//用yui的程序员要怎么写呢？）
//(模拟取得页面元素id)
//////////////////////////////////////////////////////////////////////
//首先我们看会YUI开发人员的写法
/*
//模拟YAHOO中YUI程序员的写法
//YUI get function (传递了一个参数 :类型不是字符串 就是数组)
var YAHOO={};//命名空间
YAHOO.get = function(ele){//YUI中get只接受一个参数，不是字符串就是数组
if(typeof ele === 'string'){//如果是字符串
return document.getElementById(ele);
}
if(ele instanceof Array){//如果是数组
var elements = [] ;
for(var i = 0 ; i < ele.length ; i++){
elements[elements.length] = YAHOO.get(ele[i]);
}
return elements;
}
if(ele){//如果都不是，来什么我返回什么
return ele;
}
return null;//如果没有参数，我就返回null，不管了
}
window.onload = function(){
//YUI 开发人员调用就会用他们习惯的写法
var arr = YAHOO.get(['div1','div2','div3'])
alert(arr);
//返回[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement]
};
*/
//////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
//现在我们看一下prototype开发人员的写法
/*
//Prototype $ function (不需要传递任何的形参：一个id 写一个参数 多个id 多个参数)
function $(){
var elements = [] ;
for(var i = 0 ; i < arguments.length; i++){
var element = arguments[i];
if(typeof element == 'string')
element = document.getElementById(element);
if(arguments.length ==1)
return element ;
elements.push(element);
}
return elements;
}
window.onload = function(){
//prototype 开发人员调用就会用他们习惯的写法
var arr = $('div1','div2','div3');
//var arr = YAHOO.get('div1','div2','div3')//YUI开发人员使用就会出错不是期望的
alert(arr);
//返回[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement]
};
*/
//////////////////////////////////////////////////////////////////////////
//我们发现在调用的时候传入的参数形式是不一样的，
//如果项目用雅虎框架，YUI开发人员写他们的调用方法没有任何问题，
//但是prototype开发人员改怎么调用呢，他调用就会出错或者不是我们期望的
//这样适配器模式就可以用来解决这样的事情
//简单的适配器模式设计
//YUI开发人员获取页面元素的方法
//YUI get function (传递了一个参数 :类型不是字符串 就是数组)
var YAHOO={};//命名空间
YAHOO.get = function(ele){//YUI中get只接受一个参数，不是字符串就是数组
if(typeof ele === 'string'){//如果是字符串
return document.getElementById(ele);
}
if(ele instanceof Array){//如果是数组
var elements = [] ;
for(var i = 0 ; i < ele.length ; i++){
elements[elements.length] = YAHOO.get(ele[i]);
}
return elements;
}
if(ele){//如果都不是，来什么我返回什么
return ele;
}
return null;//如果没有参数，我就返回null，不管了
}
//prototype开发人员获取页面元素的方法
//Prototype $ function (不需要传递任何的形参：一个id 写一个参数 多个id 多个参数)
function $(){
var elements = [] ;
for(var i = 0 ; i < arguments.length; i++){
var element = arguments[i];
if(typeof element == 'string')
element = document.getElementById(element);
if(arguments.length ==1)
return element ;
elements.push(element);
}
return elements;
}
//回到我们的场景
//我们用雅虎框架YUI 写一个prototype开发人员也能使用的适配器
YAHOO.get = YUIToPrototypeAdapter;//转换
function YUIToPrototypeAdapter(){
//对于YUI开发人员来说 永远传递一个参数
if(arguments.length == 1){
var e = arguments[0];
return $.apply(window,e instanceof Array?e:[e]);
} else {
return $.apply(window ,arguments);
}
}
window.onload = function(){
// YUI 调用
var domarr = YAHOO.get(['div1','div2','div3']);
alert(domarr);
//prototype 调用
var domarr = YAHOO.get('div1','div2','div3');
alert(domarr);
};
//这样就传入的参数来说都能使用
</script>
<div id="div1" >我是div1</div><br/>
<div id="div2" >我是div2</div><br/>
<div id="div3" >我是div3</div>
</body>
</html>
JavaScript高级---适配器模式的更多相关文章
- JavaScript高级---装饰者模式设计
一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...
- 《JavaScript高级程序设计（第3版）》笔记-序
很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...
- 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 【javascript学习——《javascript高级程序设计》笔记】DOM操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...
- 读javascript高级程序设计00-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 《JavaScript高级程序设计》读书笔记--前言
起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...
- 阅读摘录《javascript 高级程序设计》01
前言: 因为工作需要,所以开始主攻前台JS方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...
- 《JavaScript高级程序设计》学习笔记(5)——面向对象编程
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...
- 《JavaScript高级程序设计》学习笔记(4)——引用类型
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...
随机推荐
- 用java发送email邮件例子
package com.hzk.mail; import java.net.MalformedURLException; import java.net.URL; import java.text.S ...
- 【转载】#274 - Can't Overload if Methods Differ Only by ref and out Modifiers
You can overload a method in a class, i.e. define two methods with the same name, if the methods hav ...
- (转)Linux vmstat命令实战详解
vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...
- 去掉影响效率的where 1=1
最近看了篇文章,觉得挺有道理.实际项目中,我们进行sql条件过滤,我们不能确定是不是有条件.也不能确定条件的个数.大多数人会先把sql语句组装为: 这样,如果有其他过滤条件直接加上“and 其他条件” ...
- chrome源码编译常见的错误解决
最近编译chrome浏览器源码时,下载源码和一般的设置,网络中都有说明,而且一般的说明都是类似的,然后都说编译成功了,但本人没有试成功,碰到常见的2个错误,记录下,不知道大家碰到没有. 1.pytho ...
- SNRO:Number Range
业务对象是在一定的编号范围内分配编号的,编号既可以是内部分配也可以是外部分配.对于外部分配,用户输入编号,系统检查这个编号是否被占用.对于内部分配,系统会自动的把编号分配给业务对象.所以内部分配和外部 ...
- FPGA笔记-读取.dat文件
读取.dat图像文件 .dat文件是matlab生成的图像文件 initial begin // Initialize Inputs CLK = 0; RST = 1; IMAGE_DATA = 0; ...
- svn不能更新也不能提交【svn A conflict in the working copy obstructs the current operation】
SVN不能提交解决方法: 最近发现了svn有一种特殊的冲突,跟svn版本库同步的时候,还提示代码没有不一样的,但是文件图标上又是一个特殊的冲突符号,不是那种大红的冲突符号.更新不了也 ...
- js设计模式(3)---桥接模式
0.前言 看设计模式比较痛苦,一则是自己经验尚浅,不能体会到使用这些设计模式的益处:二则是不能很好把握使用这些设计模式的时机.所以这一部分看得断断续续,拖拖拉拉,为了了却这快心病,决定最近一口气看完几 ...
- nginx总结
kill int 2333 进程号 停止程序 kiil quit 2322 优雅停止服务 kill -HUP 2333 优雅重启 从新读取配置文件 kill -HUP 'cat logs/n ...