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(外观模式)
经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...
随机推荐
- 企业搜索引擎开发之连接器connector（二十六）
连接器通过监视器对象DocumentSnapshotRepositoryMonitor从上文提到的仓库对象SnapshotRepository(数据库仓库为DBSnapshotRepository)中 ...
- threadpoolExecutor----自动执行任务
使用threadpoolExecutor,主要是任务的提交的执行和获取结果. 提交任务的方法有: 1.submit 2.execute 3.queue的add 其中1和2的使用必须是threadpoo ...
- git@oschina使用入门（图形界面版）
首先,如果你想使用git@oschina ,你的电脑上必须先有git工具:你可以从这里获取谷歌提供的git.exe http://git-scm.com/当然,如果你能熟练通过命令行操作git,那么这 ...
- stack和stack frame
首先,我们先来了解下栈帧和栈的基本知识: 栈帧也常被称为“活动记录”(activation record),是编译器用来实现过程/函数调用的一种数据结构. 从逻辑上讲,栈帧就是一个函数执行的环境,包含 ...
- CF834D The Bakery
题目链接:戳我 题意:将一个长度为n的序列分为k段,使得总价值最大.一段区间的价值表示为区间内不同数字的个数 \(n<=35000,k<=50\) 开始想的转移方程是这个样子的--\(dp ...
- ClamAV学习【4】——cli_magic_scandesc函数浏览
今晚继续浏览ClamAV代码,挖掘到了cli_magic_scandesc函数,发现前面包装了很多次扫描函数,这里就是最后一层的感觉.一些扫描限制判断加上文件类型判断,采用不同扫描函数处理. (PS: ...
- 深入了解java虚拟机（JVM） 第九章 class文件结构及意义
Class文件是访问jvm的重要指令,学习了class文件能够更加深入的了解jvm的工作过程.本文只进行概况总结,要进行更加详细的学习class文件,可以参考:https://blog.csdn.ne ...
- “全栈2019”22篇Java异常学习资料及总结
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"22篇Ja ...
- linux环境搭建前期配置
一.永久修改主机名 1.修改network文件 # vim /etc/sysconfig/network 加入 HOSTNAME=主机名 保存退出 2.修改hosts文件 # vim /etc/hos ...
- API接口文档范例