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(外观模式)
经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...
随机推荐
- Modelsim设置数据以模拟波形显示
选中希望以模拟波形显示的信号,右击选择format—>Analog(automatic) 如果你的数据是用无符号数表示一个完整的波形的,那么可能显示出来的波形样子是下面的样子,不过不要紧,这是因 ...
- leancloud js SDK 学习
测试页面 AV.initialize("id", "key"); var TestObject = AV.Object.extend("TestObj ...
- vue实现随机验证码功能
效果图: 1.html代码 <div class="form-group" style="display: flex;"> <div> ...
- [Erlang35]Erlang18的time
在Erlang 18中, 我们还是可以使用erlang:now/0 但也已经 deprecated啦,大量使用可能引发瓶颈. The default time warp mode has the sa ...
- Tempdb--临时对象缓存
SQL Server删除一个临时对象时,不移除该对象的条目,当再次使用时,就无须重新创建临时对象,SQL Server为临时对象缓存一个数据页和一个IAM页,并回收剩余页,如果临时表的大小超过8MB, ...
- 修改mysql的时间/时区
# 背景 往db中insert数据发现时间不对,因为是新DB,所以猜测是mysql设置不对 # 解决方法 方法一:通过mysql命令行模式下动态修改 show variables like " ...
- 利用backgroundwork----递归读取网页源代码，并下载href链接中的文件
今天闲着没事,研究了一下在线更新程序版本的问题.也是工作中的需要,开始不知道如何下手,各种百度也没有找到自己想要的,因为我的需求比较简单,所以就自己琢磨了一下.讲讲我的需求吧.自己在IIs上发布了一个 ...
- WPF Path 画箭头
代码: <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.c ...
- DS博客作业01-日期抽象数据类型的设计与实现
1.思维导图和学习体会 1.1绪论知识思维导图 1.2学习体会 通过这几节课数据结构的新学习,让我感到了难度,很多概念性的东西,不是很好理解,老师在讲内容的时候,很容易跟不上节奏,我发现这门课的学习一 ...
- 十一、linux文件系统权限详解
对于文件系统权限,我们前面已经讲解了一部分,这里就不在重复了. 1.修改文件权限有两种,一种是数字.一种是字母 (chmod 的修改只能是属主或者root) 数字: 修改目录权限和目录内所有文件的权限 ...