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(外观模式)
经过一段时间的学习与分享,我们对创建型设计模式已经有了一定的认识,未来的一段时间里我们将展开新的篇章,开始迈入结构性设计模式的学习. 结构性设计模式与创建型设计模式不同,结构性设计模式更偏向于关注如何 ...
随机推荐
- linux free命令下 cached占用很大
# 背景 使用free -h命令,展示如下: # 解决方法 先执行sync命令,同步数据 然后执行 echo 1 > /proc/sys/vm/drop_caches echo 2 > / ...
- C# GetHashCode、Equals函数和键值对集合的关系
C# GetHashCode.Equals函数和键值对集合的关系 说明 HashCode:Hash码.特性:两个值,相同的的值生成的Hash肯定相同,Hash不同的值肯定不同. 下面一张图中,只有和“ ...
- C# SQLite 数据库
数据库 Oracle.Oracle的应用,主要在传统行业的数据化业务中,比如:银行.金融这样的对可用性.健壮性.安全性.实时性要求极高的业务 MS SQL Server.windows生态系统的产品, ...
- Linux下.Net Core+Nginx环境搭建小白教程
前言 对于接触.Net Core的我们来说之前从未接触过Linux,出于资源和性能及成本的考虑我们可能要将我们的环境搬到Linux下,这对于我们从未接触过Linux的童鞋们来说很棘手,那么我今天将带你 ...
- UnSafe类中的一些重要方法
UnSafe类中的一些重要方法 JDK中的rt.jar保重Unsafe类中提供了硬件级别的原子性操作,Unsafe类中的方法都是navtice方法,他们使用JNI的方式访问C++实现库,下面我们来了解 ...
- Java按位取反运算符“~”的工作原理
说明:本文参考了文章<Java按位取反运算符“~”>,链接:https://blog.csdn.net/smilecall/article/details/4245447 补充:位运算符( ...
- java中二维数组遍历
public class Demoshuzu2 { public static void main(String[] args) { int[][] arr2 = {{78,79,65, ...
- AcDbTable表格实体的简单例子
例子是创建一个含有表格实体的块定义 效果如下(手动插入的块) 源代码如下,简单示意,采用了我不是很熟悉的智能指针创建实体对象,代码仅供参考 AcDbObjectPointer<AcDbTable ...
- DESTOON从CSRF到GETSHELL
本文作者:薄荷糖微微凉 Destoon B2B网站管理系统是一套完善的B2B(电子商务)行业门户解决方案.系统基于PHP+MySQL开发,采用B/S架构,模板与程序分离,源码开放.模型化的开发思路,可 ...
- mxonline实战12, 课程评论，相关课程推荐，课程视频页
对应github地址:第12天 一. 课程评论 1. 创建URL, VIEW courses/views.py -> Course