JavaScript 设计模式之工厂模式
Posted ck168
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 设计模式之工厂模式相关的知识，希望对你有一定的参考价值。
工厂模式的定义
工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。
工厂模式的使用场景
以下几种情景下工厂模式特别有用：
（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>
根据选择不同的选项进行不同内容的展示，只需要把类型参数传进去即可。
另外网站的不同皮肤也可以使用工厂模式进行切换样式，个人觉得。
以上是关于JavaScript 设计模式之工厂模式的主要内容，如果未能解决你的问题，请参考以下文章