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 是一种非常松散的面向对象语言,也是 ...
随机推荐
- iOS － 移动设备防丢失App
一.原理 二.数据获取 三.报警
- 20141128--JavaScript HTML DOM
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). 每个 ...
- UI4_LabelChess
// // AppDelegate.m // UI4_LabelChess // // Created by zhangxueming on 15/6/29. // Copyright (c) 201 ...
- easyUi学习备忘
1.获取datagrid的自身相关的属性方式: jQuery("#grid").datagrid("options").height jQuery(" ...
- 4月13日学习笔记——jQuery动画
基本动画函数 $("#divPop").show(); $("#divPop").hide(); $("#divPop").toggle() ...
- .NET研发人员面试题（二）
1.当使用new BB()创建BB的实例时,产生什么输出? public class AA { public AA() { PrintFields(); } public virtual void P ...
- Berkeley DB数据处理
设计一个结构,利用Berkeley DB完成大数据的存储,备份,查询功能. 已有的储备: 1.Berkeley DB的基本操作. 2.数据转存后数据不丢失. 3.过百GB以上数据的存储. 数据流如下, ...
- Delphi ISO 收藏!
CodeGear RAD Studio 2007 最终版(With Update4) v11.0.2902.10471http://altd.codegear.com/download/radstud ...
- 植物大战僵尸中文第二版和年度版 游戏分析及delphi源码
00413184 |. E8 77E30100 |CALL PlantsVs.00431500 ; 地上的物品00413189 |. 8D7424 10 ...
- pandas库学习笔记（二）DataFrame入门学习
Pandas基本介绍——DataFrame入门学习 前篇文章中,小生初步介绍pandas库中的Series结构的创建与运算,今天小生继续“死磕自己”为大家介绍pandas库的另一种最为常见的数据结构D ...