JavaScript 设计模式之工厂模式

工厂模式的定义

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

工厂模式的使用场景

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

（1）对象的构建十分复杂

（2）需要依赖具体环境创建不同实例

（3）处理大量具有相同属性的小对象

什么时候不该用工厂模式

不滥用运用工厂模式，有时候仅仅只是给代码增加了不必要的复杂度，同时使得测试难以运行下去。

举个简单的例子：页面上需要根据下拉框选择不同的选项，下面的页面展示不同的内容

一、页面展示内容：

二、工厂模式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

posted on 2016-05-17 11:40 Sun‘刺眼的博客阅读(337) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Sun‘刺眼的博客

JavaScript 设计模式之工厂模式

导航

公告