工厂模式是我们最常用的实例化对象模式,是用工厂方法代替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()
}
相信大家应该明白个一二了吧!加油,奥力给
网友评论