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(外观模式)
经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...
随机推荐
- MFC中的一般经验之谈----OnInitialUpdate
在MFC程序设计中,按照传统的设计,如果处理WM_PAINT消息,一般会派生一个OnPaint函数,映射到WM_PAINT消息上进行绘图处理.但是很多程序中并没有出现OnPaint,一个OnDraw函 ...
- solr特点八:Spatial(空间搜索)
前言 在美团CRM系统中,搜索商家的效率与公司的销售额息息相关,为了让BD们更便捷又直观地去搜索商家,美团CRM技术团队基于Solr提供了空间搜索功能,其中移动端周边商家搜索和PC端的地图模式搜索功能 ...
- sql server 关于表中只增标识问题
由于我们系统时间用的过长,数据量大,设计是采用自增ID 我们插入数据的时候把ID也写进去,我们可以采用 关闭和开启自增标识 没有关闭的时候 ,提示一下错误,不能修改 set identity_inse ...
- 遇到问题-----cas4.2.x登录成功后报错No principal was found---cas中文乱码问题完美解决
情况 我们之前已经完成了cas4.2.x登录使用MongoDB验证方式并且自定义了加密. 单点登录(十五)-----实战-----cas4.2.x登录mongodb验证方式实现自定义加密 但是悲剧的是 ...
- 如何处理加括号的四则混合运算表达式——基于二叉树的实现（Eclipse平台 Java版）
记得上<数据结构>课程时,利用栈的特性解决过四则混合运算表达式.而如今在编写小型关系数据库的时候,编译部分要处理where后面的逻辑表达式——检查语法正确与否的同时,还要将信息传给下一个接 ...
- DS博客作业01--日期抽象数据类型
1.思维导图及学习体会(2分) 1.1第一章绪论知识点思维导图 1.2学习体会 从暑假看视频到开学的预习,我感觉数据结构与c语言比起来更加抽象,更加难理解,那些概念也只能理解一些字面意思,对时间复杂度 ...
- spring利用注解方式实现Java读取properties属性值
1. 建立properties文件:我在resource下面建立一个config文件夹,config文件夹里面有mytest.properties文件,文件内容如下: sam.username=sam ...
- redhat linux elk命令
安装es后不能启动原因在elasticsearch.yml中加如下两个配置: bootstrap.memory_lock: falsebootstrap.system_call_filter: fal ...
- 哈工大ComingX-创新工场俱乐部正式成立
当我把这两个Logo放在一起的时候,我有一种感觉,这种感觉同样存在于ComingX队员的心中.大学我们走到了一起,非你我所预料,却又如此自然.在感恩节的零点,我迫不及待地告诉各位ComingX队员和关 ...
- vue重构后台管理系统调研
Q4要来了,我来这家公司已经一个季度了,通过对公司前端框架的整体认识,对业务的一些认识,发现,这些东西也都是可以重构,无论是v2,还是v3的代码. 首先就要那后台管理来开刀来,现有的技术框架就是php ...