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 设计模式> 代理模式换句话说就是给某一个对象创建一个代理对象,由这个代理对象控制对原对 ...
随机推荐
- UVA 11235 Frequent values 线段树/RMQ
vjudge 上题目链接:UVA 11235 *******************************************************大白书上解释**************** ...
- UVALive - 6436 —（DFS+思维）
题意:n个点连成的生成树(n个点,n-1条边,点与点之间都连通),如果某个点在两点之间的路径上,那这个点的繁荣度就+1,问你在所有点中,最大繁荣度是多少?就比如上面的图中的C点,在A-B,A-D,A- ...
- 试题 E: 迷宫 第十届蓝桥杯
[问题描述]下图给出了一个迷宫的平面图,其中标记为 1 的为障碍,标记为 0 的为可以通行的地方.010000000100001001110000迷宫的入口为左上角,出口为右下角,在迷宫中,只能从一个 ...
- [label][JavaScript]闭包阅读笔记
原文链接来源: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.ht ...
- Android-自定义开关(ViewGroup版)
虽然实现自定义开关,通常情况下都是继承View,比较合理方便快捷一些 但是我今天想去继承ViewGroup来实现自定义开关来玩玩 效果图: 布局代码: <!-- 自定义开关ViewGroup版 ...
- nginx 用户登录认证
1.配置nginx server { listen ; server_name kibana.×××.com; location / { auth_basic "secret"; ...
- WebApi 插件式构建方案：IOC 容器初始化
body { border: 1px solid #ddd; outline: 1300px solid #fff; margin: 16px auto; } body .markdown-body ...
- IEqualityComparer的使用
当我们用Linq操作我们自定义的对像数组时,我们会发现有些方法直接使用的话根本不起作用,比如:Distinct.Except.Intersect等扩展方法. 对于我们自定义的对象的比较,我们必须实现I ...
- C#冒泡排序（完整代码）
百度百科 冒泡排序是笔试面试经常考的内容,虽然它是这些算法里排序速度最慢的 原理:从头开始,每一个元素和它的下一个元素比较,如果它大,就将它与比较的元素交换,否则不动. 这意味着,大的元素总是在向后慢 ...
- SharePoint Caml Query 使用
需要注意的是: 再使用ListQueryWebPart部件时,默认查看的list列表会出现乱码的情况,需要开启服务器呈现模式,如图: 特此记录一下