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 是一种非常松散的面向对象语言,也是 ...
随机推荐
- （转）Linux下Oracle启动、建立表空间、用户、授权、数据库导入导出
Linux系列 启动1.启动数据库实例,分为两步:第一步,启动监听:第二步,启动数据库实例. 1.1进入到sqlplus启动实例 [oracle@redhat ~]$ su - oracle ...
- webSphere提示SSL证书过期，解决方法
1.点击Security ------SSL certificate and key management2.点击Related Items下的key stores and certificates3 ...
- jquery.cookie.js 使用方法
Cookies 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jq ...
- 会场安排问题—NYOJ14
时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工作就是安排学校 ...
- Fragstats软件使用及其景观生态学意义
[转]Fragstats软件使用及其景观生态学意义 原文地址:http://blog.163.com/shuailai@126/blog/static/13238040820104152513 ...
- 洛谷 P3374 【模板】树状数组 1
题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某一个数加上x 2.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表示该数列数字的个数和操作的总个数. ...
- 安装php-posix
1.安装php-posix 1 yum -y install php-process 2.验证是否安装上了 1 php -m|grep posix 1 posix
- Apache+lvs高可用+keepalive(主从+双主模型)
Apache+lvs高可用+keepalive(主从+双主模型) keepalive实验准备环境: httpd-2.2.15-39.el6.centos.x86_64 keepalived-1 ...
- ADO.NET笔记——使用通用数据访问
相关知识: 前面所有示例,君是访问特定的数据库(SQL Server),因此注入SqlConnection.SqlCommand.SqlDataReader.SqlDataAdapter等类名都添加了 ...
- javascript 数字字符串转为数字
var a="111"; comsole.log(a); //打印出来是个字符串类型 comsole.log(+a); //打印出来是个数字类型 comsole.log ...