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

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

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

以上是关于JavaScript 设计模式之工厂模式的主要内容,如果未能解决你的问题,请参考以下文章

Javascript设计模式之工厂模式

javascript的设计模式之抽象工厂模式

深入理解JavaScript系列(28):设计模式之工厂模式

设计模式简单工厂之我见

设计模式-工厂模式(JavaScript)

JavaScript创建对象之单例工厂构造函数模式