您的位置：首页 > Web前端 > JavaScript

JavaScript 设计模式之工厂模式

2016-05-17 10:57 441 查看

工厂模式的定义

工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。

工厂模式的使用场景

以下几种情景下工厂模式特别有用：

（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>

View Code
三、调用：

<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>

根据选择不同的选项进行不同内容的展示，只需要把类型参数传进去即可。

另外网站的不同皮肤也可以使用工厂模式进行切换样式，个人觉得。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航