1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Javascript高级语法10-工厂模式实例xhr</title>
6 </head>
7 <body>
8 <script>
9 //接口
10 var Interface = function(name,methods){
11 if(arguments.length != 2){
12 alert("interface must have two paramters...");
13 }
14 this.name = name;//这个是接口的名字
15 this.methods = [];//定义个空数组来转载函数名
16 for (var i = 0; i < methods.length; i++) {
17 if(typeof methods[i] != "string"){
18 alert("method name must is String ...")
19 }else{
20 this.methods.push(methods[i])
21 }
22 }
23 }
24 //定义接口的一个静态方法来实现接口与实现类的直接检验
25 //静态方法不要写成Interface.prototype.* 因为这是写到接口原型连上的
26 //我们要把静态的函数直接写到类层次上
27 Interface.ensureImplements = function(object){
28 if(arguments.length<2){
29 alert("必须最少是2个参数");
30 return false;
31 }
32 //遍历
33 for (var i = 1; i < arguments.length; i++) {
34 var inter = arguments[i];
35 //如果你是接口就必须是Interface类型的
36 if(inter.constructor != Interface){
37 throw new Error("if is interface class must is Interface type");
38 }
39 //遍历函数集合并分析
40 for (var j = 0; j < inter.methods.length; j++) {
41 var method = inter.methods[j];
42 //实现类中必须有方法名字 和 接口中所有的方法名项目
43 if(!object[method] || typeof object[method] != "function"){
44 throw new Error("实现类并且没有完全实现接口中的所有方法...");
45 }
46 }
47 }
48 }
49
50 //xhr工厂
51 function demo1(){
52 //Ajax操作接口
53 var AjaxHandler = new Interface("AjaxHandler",["request","createXHRObject"]);
54 //ajax简单实现类
55 var Simplehandler = function(){};
56 Simplehandler.prototype = {
57 /*method: get/post
58 *url 请求地址
59 * callback 回调函数
60 * postVars 传入参数
61 */
62 request:function(method,url,callback,postVars){
63 //1.得到xhr对象
64 var xhr = this.createXHRObject();
65 xhr.onreadystatechange = function(){
66 if(xhr.readyState != 4){ //4代表的意思是交互完成
67 return;
68 }
69 //200正常交互完成 404 文件没找到 500内部程序出现错误
70 (xhr.status == 200)?callback.success(xhr.responseText,xhr.responseXML):
71 callback.failure(xhr.status);
72 }
73 //打开链接
74 xhr.open(method,url,true);//true设置异步
75 //设置参数
76 if(method != "POST"){
77 postVars = null;
78 }
79 xhr.send(postVars);
80
81 },
82 createXHRObject:function(){
83 var methods = [
84 //针对不同的浏览器用不同的方法
85 function(){return new XMLHttpRequest();},
86 function(){return new ActiveObject('Msxml2.XMLHTTP');},
87 function(){return new ActiveObject('Microsoft.XMLHTTP');},
88 ]
89 //利用try catch制作一个智能循环体
90 for(var i=0;i<methods.length;i++){
91 try{
92 methods[i]();
93 }
94 catch(e){
95 continue;
96 }
97 //这句话非常重要，只有这样才能确保 不用每次请求都循环数组
98 this.createXHRObject = methods[i];
99 return methods[i]();
100 }
101 //如果全不对的话就显式报错
102 throw new Error("Error");
103 }
104 }
105
106 //实验
107 var myHandler = new Simplehandler();
108 var callback = {
109 success:function(responseText){
110 alert("Ok")
111 },
112 failure:function(status){
113 alert("failure")
114 }
115 }
116 myHandler.request("GET","",callback);
117 }
118
119 demo1();
120 /*
121 * 工厂模式使用场合：
122 * 1.动态实现，创建一些用不同方式实现的同一接口
123 * 可以被同等对待的一系列类，我们可以用工厂模式来实例化
124 * 2.节省设置开销，和子系统组合
125 * 针对不同情况的子系统，进行模块层次的收集，使其子系统使用起来变得更简单。
126 * 利与弊：
127 * 松耦合，把创建类等复杂的过程交给工厂来完成，程序员有时间和经历放到重点业务上
128 *
129 * 弊端：工厂好用，但处理起来很复杂
130 * 代码复杂度会随之增高，一般的程序员很难驾驭
131 * 一般的简单的类 推荐还是用new 比较好
132 */
133 </script>
134 </body>
135 </html>
