JavaScript高级---桥模式设计
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>桥设计模式</title>
<!--
@theme: javascript高级 桥模式设计
@autor：EthanCoco
@date：2015-11-21
@email：lijianlin0204@163.com
-->
<!-- 引入的核心js公共文件 -->
<script type=text/javascript charset=utf-8 src="jquery-1.8.0.min.js"></script>
<script type=text/javascript charset=utf-8>
//命名空间
var LJL = {};
//单体模式 跨浏览器事件处理
LJL.EventHandler = {
addHandler : function(element,type,handle){
if(element.addEventListener){ //狐火
element.addEventListener(type,handle,false);
}else if(element.attachEvent){ //IE
element.attachEvent('on'+type,handle,false);
}
},
removeHandler : function(element,type,handle){
if(element.addEventListener){
element.addEventListener(type,handle,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handle,false);
}
}
};
// 桥接模式: 主要作用就是把抽象和现实分离开来，使他们可以完全独立变化
// 应用场景：事件监听回调机制 (用户点击一个按钮,向服务器端发送信息)
// 当页面加载完毕之后执行函数体
/*
//经典
$(function(){
// 1前台业务逻辑
var ipn = document.getElementById('ipn');
// 用事件注册的方式 在元素上添加事件
LJL.EventHandler.addHandler(ipn,'click',sendMsg);
//--------------------------------------------------
// 2后台业务逻辑
function sendMsg(){//处理后台的函数
alert(this.value);
}
})
*/
// 利用桥模式 分开俩个业务逻辑单元
$(function(){
// 1前台业务逻辑 : 这一段代码处理前台的事件注册和绑定的
var ipn = document.getElementById('ipn');
// 用事件注册的方式 在元素上添加事件
LJL.EventHandler.addHandler(ipn,'click',bridgeHandler);
//--------------------------------------------------
// 利用桥模式分开
function bridgeHandler(msg){
var msg = this.value;
sendMsg(msg);
}
//--------------------------------------------------
// 2后台业务逻辑 ：这一段代码处理后台发送请求的
function sendMsg(msg){//处理后台的函数
alert(msg);
}
//单元测试
sendMsg("I have getVlaue");
});
// 桥模式：特权函数
var PublicClass = function(){
//private variable
var name = '张三';
// getter 访问私用成员变量 // 特权函数
this.getName = function(){
return name ;
};
};
var p1 = new PublicClass();
alert(p1.getName());
var PublicClass = function(){
// 私用化的变量
var privateMethod = function(){
alert('执行了一个很复杂的操作...');
};
// 单元测试这个很复杂的函数
//privateMethod();
// 通过特权函数去访问这个私用的独立单元
this.bridgeMethod = function(){
return privateMethod();
}
};
var p1 = new PublicClass();
p1.bridgeMethod();
// 桥模式：用桥把多个单体组织在一起
// 使每个单元都能独立化,可以实现自己的变化
var Class1 = function(a,b,c){
this.a = a ;
this.b = b ;
this.c = c ;
};
var Class2 = function(d,e){
this.d = d ;
this.e = e ;
};
var BridgeCalss = function(a,b,c,d,e){
this.class1 = new Class1(a,b,c);
this.class2 = new Class2(d,e);
};
</script>
</head>
<body>
<input id=ipn type=button value="getValue"/>
</body>
</html>
JavaScript高级---桥模式设计的更多相关文章
- JavaScript高级---组合模式设计
一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...
- JavaScript高级---门面模式设计
门面模式 两个作用: 1.简化类的接口 2.消除类与使用它的客户代码之间的耦合 门面模式常常是开发人员最亲密的朋友.它几乎是所有javascript库的核心原则 门面模式的目的是为了让开发人员用更简单 ...
- JavaScript高级---装饰者模式设计
一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...
- javascript闭包(Module模式)的用途和高级使用方式
javascript闭包(Module模式)的用途和高级使用方式 javascript闭包的用途:1. 匿名自执行函数:或者可以理解为,避免污染全局变量2. 缓存:源于闭包的核心特性便是保存状态,应用 ...
- JavaScript高级---适配器模式
一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...
- 《JavaScript高级程序设计》学习笔记(4)——引用类型
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...
- javascript高级编程笔记01(基本概念)
1.在html中使用JavaScript 1. <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...
- 《Javascript高级程序设计》阅读记录（三）：第五章 上
这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 这个系列,我会把阅读< ...
- JavaScript高级程序设计第三版.CHM【带实例】
从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...
随机推荐
- UI2_UISwitch与UIActivity
// // ViewController.m // UI2_UISwitch与UIActivity // // Created by zhangxueming on 15/7/7. // Copyri ...
- iOS Foundation框架 -2.常用集合类简单总结
Foundation框架中常用的类有:NSString.NSArray.NSSet.NSDictionary 以及它们对应的子类 NSMutableString.NSMutableArray.NSMu ...
- <postfix邮件服务下mysql的升级>
本片服务的环境的红帽的企业版6.5 的,6.3的测试可能会略有不一样,不过方法大致是一样的. 当前系统的postfix的版本为 postfix-2.6.6-2.2.el6_1.x86_64 我们要向使 ...
- [sql server] 如何阻止SELECT * 语句
我们每个人都知道是个不好的做法,但有时我们还是要这样做:我们执行SELECT * 语句.这个方法有很多弊端: 你从你的表里返回每个列,甚至后期加的列.想下如果你的查询里将来加上了VARCHAR(MAX ...
- System Generator入门
System generator 安装之后会在Simulin模块库中添加一些Xilinx FPGA专用的模块库,包括Basic Element,Communication,Control Logi ...
- Windows 8.1 序列化与反序列化
/// <summary> /// 对象序列化成 XML String /// </summary> public static void XmlSerialize<T& ...
- [大牛翻译系列]Hadoop（8）MapReduce 性能调优：性能测量（Measuring）
6.1 测量MapReduce和环境的性能指标 性能调优的基础系统的性能指标和实验数据.依据这些指标和数据,才能找到系统的性能瓶颈.性能指标和实验数据要通过一系列的工具和过程才能得到. 这部分里,将介 ...
- NetworkInfo 手机中的网络类型
04-27 21:56:54.442: E/NetworkInfo(26457): NetworkInfo: type: mobile[EDGE], state: DISCONNECTED/IDLE, ...
- 1017. Queueing at Bank (25)
Suppose a bank has K windows open for service. There is a yellow line in front of the windows which ...
- Linux挂载60T存储
操作系统: CentOS 6.3 存储:总大小为72T,并划分成3个块,每块20T 安装多实例MySQL数据库,不想挂载3个块,弄成一个大的比较方便管理,个人比较懒. 配置多路径:http://blo ...