1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript高级语法19-代理模式</title> 6 </head> 7 <body> 8 <script> 9 /*代理是一个对象（proxy），用它来控制对 目标对象的访问 10 * 他要实现与目标对象相同的接口，但不同于装饰者模式。 11 * 它对目标对象不进行任何修改。 12 * 它的目的在于：延缓复杂对象的初始化时间， 13 * 这样可以再用刀这个目标对象的时候再初始化它。 14 * （对于单例来讲，更是重要。） 15 */ 16 function demo1(){ 17 //图书类 18 var Book = function(id,name,price){ 19 this.id = id; 20 this.name = name; 21 this.price = price; 22 } 23 //目标类 24 var myBookShop = (function(){ 25 //书店里的书 26 var books = {} 27 return function(bks){ 28 if(typeof bks == "object"){ 29 books = bks; 30 } 31 //加书 32 this.addBook = function(book){ 33 books[book.id] = book; 34 } 35 this.findBook = function(bid){ 36 //这块后边用责任链模式改写。 37 if(books[bid]){ 38 return books[bid]; 39 }else{ 40 return null; 41 } 42 } 43 this.returnBook = function(book){ 44 this.addBook(book); 45 } 46 this.checkBook = function(bid){ 47 var book = this.findBook(bid); 48 return book; 49 } 50 // Interface.ensureImplements(this,bookShop); 51 } 52 })(); 53 54 // 普通代理：没什么意义，一般不用 55 var myBookShopProxy = function(bks){ 56 var obj = new myBookShop(bks); 57 //加书 58 this.addBook = function(book){ 59 obj.addBook(book); 60 } 61 this.findBook = function(bid){ 62 return obj.findBook(bid); 63 } 64 this.returnBook = function(book){ 65 obj.returnBook(book); 66 } 67 this.checkBook = function(bid){ 68 return obj.checkBook(bid); 69 } 70 } 71 72 var proxy = new myBookShopProxy({ 73 "001":new Book("001","extjs","45"), 74 "002":new Book("002","javascript","22") 75 }) 76 alert(proxy.checkBook("002").name); 77 /*这个代理是严格按照定义来写的 78 * 一般开发中不会用到，没什么意义 79 */ 80 } 81 // demo1(); 82 83 //惰性代理 84 function demo2(){ 85 //图书类 86 var Book = function(id,name,price){ 87 this.id = id; 88 this.name = name; 89 this.price = price; 90 } 91 //目标类 92 var myBookShop = (function(){ 93 //书店里的书 94 var books = {} 95 return function(bks){ 96 if(typeof bks == "object"){ 97 books = bks; 98 } 99 //加书 100 this.addBook = function(book){ 101 books[book.id] = book; 102 } 103 this.findBook = function(bid){ 104 //这块后边用责任链模式改写。 105 if(books[bid]){ 106 return books[bid]; 107 }else{ 108 return null; 109 } 110 } 111 this.returnBook = function(book){ 112 this.addBook(book); 113 } 114 this.checkBook = function(bid){ 115 var book = this.findBook(bid); 116 return book; 117 } 118 // Interface.ensureImplements(this,bookShop); 119 } 120 })(); 121 122 //惰性代理 123 var myBookShopProxy = function(bks){ 124 var obj = null; 125 this._init = function(){ 126 alert("这时候初始化本类"); 127 obj = new myBookShop(bks); 128 } 129 //加书 130 this.addBook = function(book){ 131 this._init(); 132 obj.addBook(book); 133 } 134 this.findBook = function(bid){ 135 this._init(); 136 return obj.findBook(bid); 137 } 138 this.returnBook = function(book){ 139 this._init(); 140 obj.returnBook(book); 141 } 142 this.checkBook = function(bid){ 143 this._init(); 144 return obj.checkBook(bid); 145 } 146 147 } 148 var proxy = new myBookShopProxy({ 149 "001":new Book("001","extjs","45"), 150 "002":new Book("002","javascript","22") 151 }) 152 alert(proxy.checkBook("001").name); 153 154 //调用方法的时候，才会初始化本类。 155 } 156 // demo2(); 157 158 function demo3(){ 159 /*模仿extjs store proxy之间的关系 160 */ 161 //定义命名空间 162 var Ext = Ext || {}; 163 Ext.data = Ext.data || {}; 164 //建立model 165 Ext.data.Model = function(fields){ 166 this.fields = fields; 167 } 168 //model模型 proxy代理 169 Ext.data.Store = function(model,proxy){ 170 //数据载体 171 var data = []; 172 this.model = model; 173 this.proxy = proxy; 174 //加载数据 175 this.load = function(){ 176 var d = this.proxy.request(); 177 //数据操作 178 for(var i=0;i<d.length;i++){ 179 var o = {}; 180 for(var k=0;k<model.fields.length;k++){ 181 o[model.fields[k]["name"]] = 182 d[i][model.fields[k]["name"]]; 183 } 184 data.push(o); 185 } 186 187 } 188 //根据索引得到model 189 this.getAt = function(index){ 190 return data[index]; 191 } 192 //得到所有数据的count 193 this.getCount = function(){ 194 return data.length; 195 } 196 //清除所有数据 197 this.removeAll = function(){ 198 data = []; 199 } 200 //遍历 201 this.each = function(fn,scope){ 202 for(var i=0;i<data.length;i++){ 203 if(scope){ 204 fn.call(scope,data[i]); 205 }else{ 206 fn.call(this,data[i]); 207 } 208 } 209 } 210 } 211 //定义ajax的本体 212 Ext.Ajax = Ext.Ajax || function(){}; 213 Ext.Ajax.prototype.request = function(type,extraParams,method,url){ 214 //1.得到跨浏览器的xhr对象，发送请求 215 //2.验证请求的状态等等复杂的操作。 216 //3.我们认为这个本体是一个大型的复杂的对象。 217 //4.应该在这里使用惰性代理。 218 return [{'id':001,name:"extjs"},{id:"002",name:"js"}]; 219 } 220 //代理类 221 Ext.Ajax.proxy = function(){ 222 var ajax = null; 223 //构造函数 224 this._init = function(){ 225 ajax = new Ext.Ajax(); 226 } 227 this.request = function(type,extraParams,method,url){ 228 this._init(); 229 return ajax.request(type,extraParams,method,url); 230 } 231 } 232 //测试 233 var person = new Ext.data.Model([{ 234 name:"name" 235 },{ 236 name:"id" 237 }]); 238 239 var personStore = new Ext.data.Store(person,new Ext.Ajax.proxy()); 240 241 personStore.load(); 242 alert(personStore.getCount()); 243 alert(personStore.getAt(0).name); 244 personStore.each(function(model){ 245 document.write(model.name + "<br>"); 246 }) 247 } 248 demo3(); 249 </script> 250 </body> 251 </html>