JavaScript设计模式-12.门面模式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript高级语法12-门面模式</title>
</head>
<body>
<a id="btn" href="#">click</a>
<script>
/*用途比较广，通过一个简单的例子引出门面模式
* 简化类的接口体现门面的好处。
*
* 门面模式作用：1.简化类的接口 2.消除类和使用本类的客户端的代码耦合
* 3.通过构建一个简单的门面代码让系统变得更简单
*/
function demo1(){
/*各种浏览器对于DOM事件的注册是不一样的(那么每一个浏览器会被看成一个子系统)
程序员如果天天和这些问题打交道的话，那么重点就偏离了原本的业务
* */
function addEventFacade(el,type,fn){
if(window.addEventListener){
//使用火狐浏览器
el.addEventListener(type,fn,false);
}else if(window.attachEvent){
//适用于IE的
el.attachEvent("on"+type,fn);
}else{
el["on"+type] = fn;
}
}
var ele = document.getElementById("btn");
addEventFacade(ele,"click",function(){
alert("ok");
}) }
// demo1(); //接口
var Interface = function(name,methods){
if(arguments.length != 2){
alert("interface must have two paramters...");
}
this.name = name;//这个是接口的名字
this.methods = [];//定义个空数组来转载函数名
for (var i = 0; i < methods.length; i++) {
if(typeof methods[i] != "string"){
alert("method name must is String ...")
}else{
this.methods.push(methods[i])
}
}
}
//定义接口的一个静态方法来实现接口与实现类的直接检验
//静态方法不要写成Interface.prototype.* 因为这是写到接口原型连上的
//我们要把静态的函数直接写到类层次上
Interface.ensureImplements = function(object){
if(arguments.length<2){
alert("必须最少是2个参数");
return false;
}
//遍历
for (var i = 1; i < arguments.length; i++) {
var inter = arguments[i];
//如果你是接口就必须是Interface类型的
if(inter.constructor != Interface){
throw new Error("if is interface class must is Interface type");
}
//遍历函数集合并分析
for (var j = 0; j < inter.methods.length; j++) {
var method = inter.methods[j];
//实现类中必须有方法名字 和 接口中所有的方法名项目
if(!object[method] || typeof object[method] != "function"){
throw new Error("实现类并且没有完全实现接口中的所有方法...");
}
}
}
}
function demo2(){
/*用2个DAO体现门面模式
*/
//人员类
var PersonDao = new Interface("PersonDao",["getInfo","learn","merry"]);
var Person = function(){
this.name = "zhangsan";
this.address = "beijing";
this.getInfo = function(){
return "名字"+this.name+" 地址"+this.address;
}
this.learn = function(){
document.write("学习");
}
this.merry = function(){
}
//验证实现的接口
Interface.ensureImplements(this,PersonDao);
}
//dog Dao
var DogDao = new Interface("DogDao",["call","run","getInfo"]);
var Dog = function(){
this.name = "dahuang";
this.getInfo = function(){
return "狗的名字："+this.name;
}
this.run = function(){}
this.call = function(){}
//验证接口
Interface.ensureImplements(this,DogDao);
}
//需求是现在需要给养的狗办理相应的宠物领养证件。需要人和狗的信息
//1.不用门面
function action(person,dog){
var r = "GG" + new Date().getDate() + Math.floor(Math.random()*11);
var str = "办证成功：编号" +r + "<br>主人信息："+person.getInfo()+"<br>狗的信息"+
dog.getInfo();
document.write(str);
}
//action(new Person(),new Dog()); //使用门面模式 复杂的事 交给门面来做
function facade(person,dog){
var r = "GG" + new Date().getDate() + Math.floor(Math.random()*11);
var str = "办证成功：编号" +r + "<br>主人信息："+person.getInfo()+"<br>狗的信息"+dog.getInfo();
this.action = function(){
return str;
} } function action2(person,dog){
document.write(new facade(person,dog).action());
}
action2(new Person(),new Dog()); //用了门面模式，客户端代码变得简单了。
}
demo2();
</script>
</body>
</html>
JavaScript设计模式-12.门面模式的更多相关文章
- JavaScript设计模式(6)-门面模式
门面模式 门面模式(Facade Pattern):他隐藏了系统的复杂性,并向客户端提供了一个可以访问系统的接口.这种类型的设计模式属于结构性模式.为子系统中的一组接口提供了一个统一的访问接口,这个接 ...
- JavaScript设计模式之----组合模式
javascript设计模式之组合模式 介绍 组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式.使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更 ...
- python 设计模式之门面模式
facade:建筑物的表面 门面模式是一个软件工程设计模式,主要用于面向对象编程. 一个门面可以看作是为大段代码提供简单接口的对象,就像类库. 门面模式被归入建筑设计模式.门面模式隐藏系统内部的细 ...
- 从ES6重新认识JavaScript设计模式(三): 建造者模式
1 什么是建造者模式? 建造者模式(Builder)是将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示. 建造者模式的特点是分步构建一个复杂的对象,可以用不同组合或顺序建造出不 ...
- 设计模式_Facade_门面模式
形象例子: 我有一个专业的Nikon相机,我就喜欢自己手动调光圈.快门,这样照出来的照片才专业,但MM可不懂这些,教了半天也不会.幸好相机有Facade设计模式,把相机调整到自动档,只要对准目标按快门 ...
- JavaScript设计模式之策略模式（学习笔记）
在网上搜索“为什么MVC不是一种设计模式呢?”其中有解答:MVC其实是三个经典设计模式的演变:观察者模式(Observer).策略模式(Strategy).组合模式(Composite).所以我今天选 ...
- 再起航，我的学习笔记之JavaScript设计模式08(建造者模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
- 再起航，我的学习笔记之JavaScript设计模式09(原型模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...
- 再起航，我的学习笔记之JavaScript设计模式11(外观模式)
经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...
随机推荐
- Opengl的TOOL收集
1. http://my.oschina.net/sweetdark 不错的opengl学习网站 2, 优秀博客 网址: http://www.zwqxin.com/archives/opengl/s ...
- leancloud 云引擎
可以部署网站的云端,云代码的升级版.
- Git Note - Branch
1. add a new branch cd workspace git branch user1/newbranch1 git checkout user1/newbranch1 or git ch ...
- 在TFS 2013的迭代视图中修改工作项数目限制
当TFS迭代中的工作项数目超过500时,在TFS的网页(Web Access)显示中就会出现红色警告提示"积压工作(backlog)中的项数超出配置的限制500.当前总数为529-.&quo ...
- Ubuntu 16.04.2 LTS 安装 jdk1.6 和 tomcat6 （二）
上一篇记录和分享了jdk1.6 在Ubuntu 16.04.2 环境下的安装配置,本文开始安装和配置tomcat 6 2 安装tomcat http://tomcat.apache.org ...
- gitignore 使用
在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如无,则需自己手工建立此文件).这个文件每一行保存了一个匹配的规则例如: # 此为注 ...
- JS三个编码函数和net编码System.Web.HttpUtility.UrlEncode比较
JS三个编码函数和net编码比较 总结 1.escape.encodeUri.encodeUriComponent均不会对数字.字母进行编码.2.escape:对某些字符(如中文)进行unicode编 ...
- ASP.NET Core使用Ping判断网络是否接通
static void Main(string[] args) { // 主机地址 string targetHost = "bing.com"; string data = &q ...
- 【OCP认证12c题库】CUUG 071题库考试原题及答案（27）
27.choose two The SQL statements executed in a user session are as follows: SQL> CREATE TABLE pro ...
- JAVA 中的 StringBuilder 和 StringBuffer 适用的场景是什么？
JAVA 中的 StringBuilder 和 StringBuffer 适用的场景是什么? 最简单的回答是,stringbuffer 基本没有适用场景,你应该在所有的情况下选择使用 stringbu ...