當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript设计模式-10.工厂模式实例xhr
生活随笔
收集整理的這篇文章主要介紹了
JavaScript设计模式-10.工厂模式实例xhr
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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>
?
轉載于:https://www.cnblogs.com/chengyunshen/p/7191781.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的JavaScript设计模式-10.工厂模式实例xhr的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： H264规定了三种主要档次
- 下一篇： 银行转账java代码事务实现_Sprin