工厂模式的定义
工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。
工厂模式的使用场景
以下几种情景下工厂模式特别有用：
（1）对象的构建十分复杂
（2）需要依赖具体环境创建不同实例
（3）处理大量具有相同属性的小对象
什么时候不该用工厂模式
不滥用运用工厂模式，有时候仅仅只是给代码增加了不必要的复杂度，同时使得测试难以运行下去。
举个简单的例子：页面上需要根据下拉框选择不同的选项，下面的页面展示不同的内容
一、页面展示内容：
<body>
<div>
<select id="sel" onchange="selChange()">
<option selected="selected" value="0">文本</option>
<option value="1">表格1</option>
<option value="2">链接</option>
<option value="3">表格2</option>
</select>
</div>
<div id="divContent"></div>
</body>
二、工厂模式js：
<script type="text/javascript">
//var page = page || {};
//page.dom = page.dom || {};
var page = {};
page.dom = {};
//子函数1：处理文本
page.dom.Text = function () {
this.insert = function (where,url) {
var txt = url;
where.innerHTML = txt;
};
};
//子函数2：处理链接
page.dom.Link = function () {
this.insert = function (where, url) {
var link = "<a href=‘" + url + "‘>" + url + "</a>";
where.innerHTML = link;
};
};
//子函数3：表格1
page.dom.Table1 = function () {
this.insert = function (where) {
var table = "<table>";
table += "<tr><td>编号</td><td>姓名</td></tr>";
table += "<tr><td>1</td><td>ck</td></tr>";
table += "<tr><td>2</td><td>lily</td></tr>";
table += "<tr><td>3</td><td>tom</td></tr>";
table += "</table>";
where.innerHTML = table;
};
};
//子函数4：表格2
page.dom.Table2 = function () {
this.insert = function (where) {
var table = "<table>";
table += "<tr><td>编号</td><td>姓名</td><td>年龄</td></tr>";
table += "<tr><td>1</td><td>ck</td><td>25</td></tr>";
table += "<tr><td>2</td><td>lily</td><td>26</td></tr>";
table += "<tr><td>3</td><td>tom</td><td>28</td></tr>";
table += "</table>";
where.innerHTML = table;
};
};
page.dom.facory = function (type) {
return new page.dom[type];
}
</script>
三、调用：
<script type="text/javascript">
function selChange() {
var value = document.getElementById("sel").value;
var divContent = document.getElementById("divContent");
if (value == 0) {
var o = page.dom.facory("Text");
o.url = "http://www.baidu.com";
o.insert(divContent, o.url);
}
else if (value == 1) {
var o = page.dom.facory("Table1");
o.insert(divContent);
}
else if (value == 2) {
var o = page.dom.facory("Link");
o.url = "http://www.baidu.com";
o.insert(divContent, o.url);
}
else if (value == 3) {
var o = page.dom.facory("Table2");
o.insert(divContent);
}
}
</script>
根据选择不同的选项进行不同内容的展示，只需要把类型参数传进去即可。
另外网站的不同皮肤也可以使用工厂模式进行切换样式，个人觉得。
时间： 2024-10-09 13:45:26