JavaScript设计模式-19.代理模式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript高级语法19-代理模式</title>
</head>
<body>
<script>
/*代理是一个对象（proxy），用它来控制对 目标对象的访问
* 他要实现与目标对象相同的接口，但不同于装饰者模式。
* 它对目标对象不进行任何修改。
* 它的目的在于：延缓复杂对象的初始化时间，
* 这样可以再用刀这个目标对象的时候再初始化它。
* （对于单例来讲，更是重要。）
*/
function demo1(){
//图书类
var Book = function(id,name,price){
this.id = id;
this.name = name;
this.price = price;
}
//目标类
var myBookShop = (function(){
//书店里的书
var books = {}
return function(bks){
if(typeof bks == "object"){
books = bks;
}
//加书
this.addBook = function(book){
books[book.id] = book;
}
this.findBook = function(bid){
//这块后边用责任链模式改写。
if(books[bid]){
return books[bid];
}else{
return null;
}
}
this.returnBook = function(book){
this.addBook(book);
}
this.checkBook = function(bid){
var book = this.findBook(bid);
return book;
}
// Interface.ensureImplements(this,bookShop);
}
})(); // 普通代理：没什么意义，一般不用
var myBookShopProxy = function(bks){
var obj = new myBookShop(bks);
//加书
this.addBook = function(book){
obj.addBook(book);
}
this.findBook = function(bid){
return obj.findBook(bid);
}
this.returnBook = function(book){
obj.returnBook(book);
}
this.checkBook = function(bid){
return obj.checkBook(bid);
}
} var proxy = new myBookShopProxy({
"001":new Book("001","extjs","45"),
"002":new Book("002","javascript","22")
})
alert(proxy.checkBook("002").name);
/*这个代理是严格按照定义来写的
* 一般开发中不会用到，没什么意义
*/
}
// demo1(); //惰性代理
function demo2(){
//图书类
var Book = function(id,name,price){
this.id = id;
this.name = name;
this.price = price;
}
//目标类
var myBookShop = (function(){
//书店里的书
var books = {}
return function(bks){
if(typeof bks == "object"){
books = bks;
}
//加书
this.addBook = function(book){
books[book.id] = book;
}
this.findBook = function(bid){
//这块后边用责任链模式改写。
if(books[bid]){
return books[bid];
}else{
return null;
}
}
this.returnBook = function(book){
this.addBook(book);
}
this.checkBook = function(bid){
var book = this.findBook(bid);
return book;
}
// Interface.ensureImplements(this,bookShop);
}
})(); //惰性代理
var myBookShopProxy = function(bks){
var obj = null;
this._init = function(){
alert("这时候初始化本类");
obj = new myBookShop(bks);
}
//加书
this.addBook = function(book){
this._init();
obj.addBook(book);
}
this.findBook = function(bid){
this._init();
return obj.findBook(bid);
}
this.returnBook = function(book){
this._init();
obj.returnBook(book);
}
this.checkBook = function(bid){
this._init();
return obj.checkBook(bid);
} }
var proxy = new myBookShopProxy({
"001":new Book("001","extjs","45"),
"002":new Book("002","javascript","22")
})
alert(proxy.checkBook("001").name); //调用方法的时候，才会初始化本类。
}
// demo2(); function demo3(){
/*模仿extjs store proxy之间的关系
*/
//定义命名空间
var Ext = Ext || {};
Ext.data = Ext.data || {};
//建立model
Ext.data.Model = function(fields){
this.fields = fields;
}
//model模型 proxy代理
Ext.data.Store = function(model,proxy){
//数据载体
var data = [];
this.model = model;
this.proxy = proxy;
//加载数据
this.load = function(){
var d = this.proxy.request();
//数据操作
for(var i=0;i<d.length;i++){
var o = {};
for(var k=0;k<model.fields.length;k++){
o[model.fields[k]["name"]] =
d[i][model.fields[k]["name"]];
}
data.push(o);
} }
//根据索引得到model
this.getAt = function(index){
return data[index];
}
//得到所有数据的count
this.getCount = function(){
return data.length;
}
//清除所有数据
this.removeAll = function(){
data = [];
}
//遍历
this.each = function(fn,scope){
for(var i=0;i<data.length;i++){
if(scope){
fn.call(scope,data[i]);
}else{
fn.call(this,data[i]);
}
}
}
}
//定义ajax的本体
Ext.Ajax = Ext.Ajax || function(){};
Ext.Ajax.prototype.request = function(type,extraParams,method,url){
//1.得到跨浏览器的xhr对象，发送请求
//2.验证请求的状态等等复杂的操作。
//3.我们认为这个本体是一个大型的复杂的对象。
//4.应该在这里使用惰性代理。
return [{'id':001,name:"extjs"},{id:"002",name:"js"}];
}
//代理类
Ext.Ajax.proxy = function(){
var ajax = null;
//构造函数
this._init = function(){
ajax = new Ext.Ajax();
}
this.request = function(type,extraParams,method,url){
this._init();
return ajax.request(type,extraParams,method,url);
}
}
//测试
var person = new Ext.data.Model([{
name:"name"
},{
name:"id"
}]); var personStore = new Ext.data.Store(person,new Ext.Ajax.proxy()); personStore.load();
alert(personStore.getCount());
alert(personStore.getAt(0).name);
personStore.each(function(model){
document.write(model.name + "<br>");
})
}
demo3();
</script>
</body>
</html>
JavaScript设计模式-19.代理模式的更多相关文章
- JavaScript设计模式之代理模式
一.代理模式概念 代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问.代理模式使得代理对象控制具体对象的引用.代理几乎可 ...
- 再起航，我的学习笔记之JavaScript设计模式19(状态模式)
状态模式 概念介绍 状态模式(State):当一个对象的内部状态发生改变时,会导致其行为的改变,这看起来像是改变了对象 示例演示 在我们写项目的过程中或多或少会遇到如下的多分支判断 function ...
- JavaScript 设计模式之代理模式
一.代理模式概念解读 1.代理模式概念文字解读 代理,顾名思义就是帮助别人做事,GOF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问.代理模式使得代理对象 ...
- 第三章 --- 关于Javascript 设计模式 之 代理模式
第一.定义: 代理模式是为一个对象提供代用品或者占位符,以便控制对它的访问. 比如说,某男生小明想向他的女神 A 表白,刚好小明认识的一个女生B 和 女神A 是好朋友,那么小明就想让 女生B 帮忙送花 ...
- JavaScript设计模式_03_代理模式
代理模式是非常常见的模式,比如我们使用的VPN工具,明星的经纪人,都是代理模式的例子.但是,有人会疑问,明明可以直接访问对象,为什么中间还要加一个壳呢?这也就说到了代理模式的好处.在我看来,代理模式最 ...
- 学习javascript设计模式之代理模式
1.代理模式为一个对象提供一个代用品或占位符,以便控制对它的访问. 2.不用代理模式: 客户 -> 本体 使用代理模式: 客户 -> 代理 -> 本体 3.例子场景1 点击操作与 ...
- JavaScript设计模式（代理模式）
一.简单的单例模式: 1.未使用代理模式的情况:小明直接给女神送花 var Flower = function() {} var xiaoming = { sendFlower: function( ...
- Java设计模式之代理模式（静态代理和JDK、CGLib动态代理）以及应用场景
我做了个例子 ,需要可以下载源码:代理模式 1.前言: Spring 的AOP 面向切面编程,是通过动态代理实现的, 由两部分组成:(a) 如果有接口的话 通过 JDK 接口级别的代理 (b) 如果没 ...
- 夜话JAVA设计模式之代理模式（Proxy）
代理模式定义:为另一个对象提供一个替身或者占位符以控制对这个对象的访问.---<Head First 设计模式> 代理模式换句话说就是给某一个对象创建一个代理对象,由这个代理对象控制对原对 ...
随机推荐
- TOAD连接ORACLE而不装ORACLE 客户端的方法
TOAD连接ORACLE而不装ORACLE 客户端的方法 原来连接ORACLE总是要装ORACLE客户端,挺麻烦得,一方面要带ORACLE得盘,另一方面,装这么大得东西也让人很不爽. ORACLE好像 ...
- ASP.NET：邮件服务器与客户端
目录: 一.概述 二.MX设置 三.使用系统的SMTP功能发邮件 四.使用hMailServer收发邮件 五.Web邮件客户端 一.概述 首先必须清楚SMTP才是提供邮件服务器的核心,收发邮件全靠SM ...
- solr特点三: QueryElevation(编辑结果排序)
在理想的情况下,搜索引擎只返回与用户查询相关的文档.而在现实的查询中,编辑(没发现更合适的表达)通常需要指定特定文档在搜索结果中的特定位置.这样做有很多原因.或许 “置顶” 的文档就是最好的查询结果. ...
- 记录一下显示Map<String, ArrayList<String>>中的ArrayList里的数据的操作
1.有以下数据: ArrayList<Employee> emp = new ArrayList<>(); emp.add(new Employee("zhang&q ...
- js虚拟数字小键盘
效果图 页面代码: @Html.TextBoxFor(m=>Model.FBP[i].RealNumb,new{onclick="showKeyboard('txtRealNumbOp ...
- 关于Unity中MonoBehaviour的构造函数
关于Unity中MonoBehaviour的构造函数 在学习Unity MVVM UI框架的时候,一不小给一个继承自MonoBehaviour类的子类编写了自定义构造函数,结果调Bug调了两个钟,特此 ...
- WPF InkCanvas EditingMode为Select时 在其选择时各种事件中撤销Select模式的方法
InkCanvas有多种输入模式. 通过InkCanvasEditingMode来进行对其调整 分别是 None=0// 忽略鼠标和手写笔输入 Ink = 1// 允许用户绘制批注,默认模式.使用鼠标 ...
- CF79D Password
题目链接 题意:给定长度为n的0/1序列,初始值都为0.你每次可以在给定的l个长度中的\(a_i\)并将序列中长度为\(a_i\)的部分取反.使得最终状态为\(x_1\)~\(x_k\),求最少取反次 ...
- Java50道经典习题-程序12 计算奖金
题目:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%: ...
- Maven 项目中使用mybatis-generator生成代码
在使用Maven构建SSM项目时,使用mybatis-generator插件自动生成代码 一.目录结构 bean:用来存放生成的实体类 dao:用来存放生成的 *mapper.java文件 mappe ...