JavaScript设计模式-19.代理模式
2024-10-18 22:30:04
<!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>
最新文章
- seajs源码分析
- 【WP 8.1开发】如何处理摄像头翻转的问题
- MP4和HR-HDTV压制教程
- Java注解一谈
- iframe 内联框架
- NULL对反连接的影响
- rds材资收集
- 数据导出至Excel文件--好库编程网http://code1.okbase.net/codefile/SerializeHelper.cs_2012122018724_118.htm
- 从客户端中检测到有潜在危险的Request.Form值的解决办法
- 海量数据解决思路之BitMap
- Directshow 通过 put_Owner 指定显示窗口后，自动刷新问题
- WCF异常传播
- iOS开发之UITextView，设置textViewplaceholder
- 2017-10-22—光电二极管
- securecrt-active
- 利用"SQL"语句自动生成序号的两种方式
- Three.js里自定义顶点构建三角形面的朝向问题
- [jsp] - jsp引入c标签出错
- [android] 轮播图-无限循环
- Netty入门（五）ChanneHandler
热门文章
- 用 pyqt4 编写的一个翻译小工具
- ansible常用ad hoc操作
- Easy前端正确删除datagrid的方式（避免直接删除索引没更新问题）
- ashx、aspx、ASP.NET MVC
- 会HTML/CSS就可以轻松创建网站
- Android Bug BaseExpandableListAdapter, getChildView
- Ubuntu16.04 - 怎么能够更好设置PATH变量，便于管理？
- TortoiseGit revert failed - unable to revert local changes
- C# 键盘中的按键对应KeyValue
- 安装 luajit && 给 luajit 安装 cjson