1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>工厂模式</title>
6 </head>
7 <body>
8 <script>
9 //让我们决定通过厂长告诉做什么事情，不需了解内部
10 /*模式作用：
11 1，对象的构建十分复杂，可以用此模式
12 2，需要依赖具体的环境创建不同的实例
13 3，处理大量具有相同属性的小对象。
14 注意事项：
15 1，不能滥用工厂，有时候是增加代码增加复杂度
16 2，
17
18 */
19 </script>
20 <script>
21 /* 实例一个简单工厂
22 工厂应该有产长来决定运行哪些产品线
23 消费者 =》子类
24
25 */
26 //gongchang 是一个单例牧师
27 var gongchang = {};
28 gongchang.chanyifu =function(){
29 this.gongren = 50;
30 // alert('我们有工人数'+this.gongren);
31 }
32 gongchang.chanxie = function(){
33 alert('产鞋子')
34 }
35 gongchang.yunshu = function () {
36 alert('运输')
37 }
38 gongchang.changzhang = function (para) {
39 //new JS 构造函数模式 单例模式
40 return new gongchang[para]();
41 }
42 var me = gongchang.changzhang('chanyifu');
43 alert(me.gongren);
44 </script>
45 <script>
46 /*简单工厂 ajax*/
47 //单例，XMLHttpFactory一个简单工厂
48 var XMLHttpFactory = function(){};
49 //工厂里有createXMLHttp（）方法 根据当前环境的具体情况返回一个XHR对象
50 XMLHttpFactory.createXMLHttp = function(){
51 var XMLHttp = null;
52 if (window.XMLHttpRequest){
53 XMLHttp = new XMLHttpRequest();
54 }
55 else if(window.ActiveXObject){
56 XMLHttp = new ActiveXObject('Microsoft.XMLHTTP')
57 }
58 return XMLHttp;
59 };
60 var AjaxHander = function(){
61 //最后生产到 我拿到的对象 不用管工厂里做了什么事，
62 var XMLHttp = XMLHttpFactory.createXMLHttp();
63 //具体操作
64 }
65 </script>
66 <script>
67 /*以下是抽象复杂工厂*/
68 var XMLHttpFactory = function(){};
69 XMLHttpFactory.prototype = {
70 //调用这个的话 跑出一个错误，不能被实例化，只能用来派生子类 让别的子类来继承自己，然后做他们自己的事情
71 createFactory:function(){
72 throw new Error('这是一错误')
73 }
74 };
75 var XHRHander = function(){
76 XMLHttpFactory.call(this);
77 };
78 //将XMLHttpFactory的继承到XHRHander
79 XHRHander.prototype = new XMLHttpFactory();
80 //重新定义createFactory方法
81 XHRHander.prototype.constructor = XHRHander;
82
83 XHRHander.prototype.createFactory = function () {
84 var XMLHttp = null;
85 if (window.XMLHttpRequest){
86 XMLHttp = new XMLHttpRequest()
87 }
88 else if(window.ActiveXObject){
89 XMLHttp = new ActiveXObject('Microsoft.XMLHTTP')
90 }
91 return XMLHttp;
92 }
93
94 </script>
95 </body>
96 </html>
