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>
