美文网首页
js工厂模式vs 实例demo 讲解

js工厂模式vs 实例demo 讲解

作者: 拾钱运 | 来源:发表于2020-10-20 15:57 被阅读0次

    工厂模式是我们最常用的实例化对象模式,是用工厂方法代替new 操作的一种模式。

    我们不暴露对象创建的逻辑,而是将逻辑封装在一个函数内,那么这个函数就成为了工厂,工厂模式根据抽象程度的不同分为:1.简单工厂 2 工厂方法 3 抽象工厂

    实例demo:

    假如我们想在网页面里插入一些元素,而这些元素不固定,可能是图片,也有可能是连接,甚至可能是文本,根据工厂模式的定义,我们需要工厂类和子类,先来定义子类的实现:

    var page = page || {};
    page.dom = page.dom || {};
    //子函数1:处理文本
    page.dom.Text = function () {
        this.insert = function (where) {
            var txt = document.createTextNode(this.url); //创建一个文本节点
            where.appendChild(txt);
        };
    };
    
    //子函数2:处理链接
    page.dom.Link = function () {
        this.insert = function (where) {
            var link = document.createElement('a');
            link.href = this.url;
            link.appendChild(document.createTextNode(this.url));
            where.appendChild(link);
        };
    };
    
    //子函数3:处理图片
    page.dom.Image = function () {
        this.insert = function (where) {
            var im = document.createElement('img');
            im.src = this.url;
            where.appendChild(im);
        };
    };
    

    工厂类

    page.dom.factory=function(type){
      return new page.dom[type]
    }
    

    使用方式

    var o=page.dom.factory('Link')
    o.url='http:www.baidu.com'
    o.insert(document.body)
    

    实例demo2

    /**
     2     
     3      */
     4     StorageUtilManager: new Object({
     5         createStorageUtil: function () {
     6             if (window.applicationCache) {
     7                 return AppUtil.LocalStorageUtil;
     8             } else {
     9                 return AppUtil.CookieStorageUtil;
    10             }
    11         }
    12     }),
    13     /**
    15      * write()
    16      * get()
    17      */
    18     CookieStorageUtil: {
    19         write: function (key, dataObj) {
    20             this._clearCookie(key);
    21             //写入的字符串
    22             var dataObjStr = JSON.stringify(dataObj);
    23             this._setCookie(key, dataObjStr, 15);
    24         },
    25         get: function (key) {
    26             return this._getCookie(key);
    27         },
    28         _setCookie: function (cname, cvalue, exdays) {
    29             var d = new Date();
    30             d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    31             var expires = "expires=" + d.toUTCString();
    32             var path = "path=/";
    33             document.cookie = cname + "=" + cvalue + "; " + expires + "; " + path;
    34         },
    35         _getCookie: function (cname) {
    36             var name = cname + "=";
    37             var ca = document.cookie.split(';');
    38             for (var i = 0; i < ca.length; i++) {
    39                 var c = ca[i];
    40                 while (c.charAt(0) == ' ') c = c.substring(1);
    41                 if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    42             }
    43             return null;
    44         },
    45         _clearCookie: function (key) {
    46             this._setCookie(key, "", -1);
    47         }
    48     },
    49     /**
    50      * implement Storage   cnblogs.com/tdws
    51      * write()
    52      * get()
    53      */
    54     LocalStorageUtil: {
    55         write: function (key, dataObj) {
    56             this._writeLocalStorage(key, dataObj);
    57         },
    58         get: function (key) {
    59             return this._getFromLocalStorage(key);
    60         },
    61         _writeLocalStorage: function (key, dataObj) {
    62             var localStorage = window.localStorage;
    63             localStorage.removeItem(key);
    64             //对象转化为字符串,将objStr按正常的方式存入localStorage中
    65             var dataObjStr = JSON.stringify(dataObj);
    66             localStorage.setItem(key, dataObjStr);
    67         },
    68         _getFromLocalStorage: function (key) {
    69             var localStorage = window.localStorage;
    70             return localStorage.getItem(key);
    71         },
    72         _removeLocalStorage: function (key) {
    73             var localStorage = window.localStorage;
    74             localStorage.removeItem(key);
    75         }
    76     }
    

    主要是为了解决不同浏览器的兼容问题,如果兼容H5就创建某个对象,如果不兼容就创建另一个对象,然后其子对象对做相对应的具体的操作。
    场景描述:

    • 对象的构建十分复杂
    • 需要依赖具体环境创建不同实例
    • 处理大量具有相同属性的小对象

    其实自己平时写代码的时候就有这种思想,但是不知道这就是工厂模式,如果写的在规矩一些,就是一个完美的工厂模式。

    例如:当你写一个页面的时候,里面就会有好多好多方法,事件,属性,

    • 绑定事件
    • 操作dom的方法
    • 请求数据的方法
    • 处理请求到的数据的方法
    • .....
      将所有绑定事件都写在一个方法中;操作dom的方法;请求数据的方法,会全部整理在一个init()方法中一并运行处理;不会
    domg()
    ajax()
    eventClick()
    而是
    init(){
    domg()
    ajax()
    eventClick()
    }
    

    相信大家应该明白个一二了吧!加油,奥力给

    相关文章

      网友评论

          本文标题:js工厂模式vs 实例demo 讲解

          本文链接:https://www.haomeiwen.com/subject/csgkmktx.html