js工厂模式vs 实例demo 讲解

工厂模式是我们最常用的实例化对象模式，是用工厂方法代替new 操作的一种模式。

我们不暴露对象创建的逻辑，而是将逻辑封装在一个函数内，那么这个函数就成为了工厂，工厂模式根据抽象程度的不同分为：1.简单工厂 2 工厂方法 3 抽象工厂

实例demo:

假如我们想在网页面里插入一些元素，而这些元素不固定，可能是图片，也有可能是连接，甚至可能是文本，根据工厂模式的定义，我们需要工厂类和子类，先来定义子类的实现:

var page = page || {};
page.dom = page.dom || {};
//子函数1：处理文本
page.dom.Text = function () {
    this.insert = function (where) {
        var txt = document.createTextNode(this.url); //创建一个文本节点
        where.appendChild(txt);
    };
};

//子函数2：处理链接
page.dom.Link = function () {
    this.insert = function (where) {
        var link = document.createElement('a');
        link.href = this.url;
        link.appendChild(document.createTextNode(this.url));
        where.appendChild(link);
    };
};

//子函数3：处理图片
page.dom.Image = function () {
    this.insert = function (where) {
        var im = document.createElement('img');
        im.src = this.url;
        where.appendChild(im);
    };
};

工厂类

page.dom.factory=function(type){
  return new page.dom[type]
}

使用方式

var o=page.dom.factory('Link')
o.url='http:www.baidu.com'
o.insert(document.body)

实例demo2

/**
 2     
 3      */
 4     StorageUtilManager: new Object({
 5         createStorageUtil: function () {
 6             if (window.applicationCache) {
 7                 return AppUtil.LocalStorageUtil;
 8             } else {
 9                 return AppUtil.CookieStorageUtil;
10             }
11         }
12     }),
13     /**
15      * write()
16      * get()
17      */
18     CookieStorageUtil: {
19         write: function (key, dataObj) {
20             this._clearCookie(key);
21             //写入的字符串
22             var dataObjStr = JSON.stringify(dataObj);
23             this._setCookie(key, dataObjStr, 15);
24         },
25         get: function (key) {
26             return this._getCookie(key);
27         },
28         _setCookie: function (cname, cvalue, exdays) {
29             var d = new Date();
30             d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
31             var expires = "expires=" + d.toUTCString();
32             var path = "path=/";
33             document.cookie = cname + "=" + cvalue + "; " + expires + "; " + path;
34         },
35         _getCookie: function (cname) {
36             var name = cname + "=";
37             var ca = document.cookie.split(';');
38             for (var i = 0; i < ca.length; i++) {
39                 var c = ca[i];
40                 while (c.charAt(0) == ' ') c = c.substring(1);
41                 if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
42             }
43             return null;
44         },
45         _clearCookie: function (key) {
46             this._setCookie(key, "", -1);
47         }
48     },
49     /**
50      * implement Storage   cnblogs.com/tdws
51      * write()
52      * get()
53      */
54     LocalStorageUtil: {
55         write: function (key, dataObj) {
56             this._writeLocalStorage(key, dataObj);
57         },
58         get: function (key) {
59             return this._getFromLocalStorage(key);
60         },
61         _writeLocalStorage: function (key, dataObj) {
62             var localStorage = window.localStorage;
63             localStorage.removeItem(key);
64             //对象转化为字符串,将objStr按正常的方式存入localStorage中
65             var dataObjStr = JSON.stringify(dataObj);
66             localStorage.setItem(key, dataObjStr);
67         },
68         _getFromLocalStorage: function (key) {
69             var localStorage = window.localStorage;
70             return localStorage.getItem(key);
71         },
72         _removeLocalStorage: function (key) {
73             var localStorage = window.localStorage;
74             localStorage.removeItem(key);
75         }
76     }

主要是为了解决不同浏览器的兼容问题，如果兼容H5就创建某个对象，如果不兼容就创建另一个对象，然后其子对象对做相对应的具体的操作。
场景描述：

• 对象的构建十分复杂
• 需要依赖具体环境创建不同实例
• 处理大量具有相同属性的小对象

其实自己平时写代码的时候就有这种思想，但是不知道这就是工厂模式，如果写的在规矩一些，就是一个完美的工厂模式。

例如:当你写一个页面的时候，里面就会有好多好多方法，事件，属性，

• 绑定事件
• 操作dom的方法
• 请求数据的方法
• 处理请求到的数据的方法
• .....
  将所有绑定事件都写在一个方法中；操作dom的方法；请求数据的方法，会全部整理在一个init()方法中一并运行处理；不会

domg()
ajax()
eventClick()
而是
init(){
domg()
ajax()
eventClick()
}

相信大家应该明白个一二了吧！加油，奥力给