美文网首页
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 讲解

    工厂模式是我们最常用的实例化对象模式,是用工厂方法代替new 操作的一种模式。 我们不暴露对象创建的逻辑,而是将逻...

  • 抽象工厂模式Demo讲解

    0.背景 小明是一位艺术总监,他准备开一些艺术工厂(factory),但是由于资金问题,这些艺术工厂暂时只做一件事...

  • js观察者模式与订阅发布模式讲解vs 实例demo

    观察者模式:定义的对象是一对多的关系,当目标对象的状态改变的时候,所有依赖他的对象observer都会得到通知例如...

  • 相近设计模式比较

    设计模式干货: 简单工厂模式 vs. 工厂模式 vs. 抽象工厂模式简单工厂和工厂模式区别? 简单工厂没有多个子类...

  • 创建型设计模式-工厂模式

    这篇博客讲解工厂模式 概念 工厂模式是我们最常用的实例化对象模式了,是用工厂方法代替new操作的一种模式。 分类 ...

  • 设计模式

    设计模式 工厂模式生成bean 工厂模式分为静态工厂和实例工厂 静态工厂: 实例工厂

  • js状态机设计模式讲解-》demo实例

    一个对象有状态的变化 每次状态都会触发一个逻辑 不用if else 控制 实例demo:开关等 总结 重要的部分在...

  • JS创建对象的几种模式

    JS创建对象的几种模式及分析对比 工厂模式 实例化: 缺点:没有解决对象的识别问题. 构造函数模式 通过对比工厂模...

  • 设计模式-3种工厂模式

    工厂模式包括:简单工厂模式,工厂方法模式,抽象工厂模式 简单工厂模式 工厂方法根据参数直接创建实例:工厂->产品 ...

  • 设计模式-工厂模式

    工厂模式概念 实例化对象,用工厂方法代替new操作。工厂模式包括工厂方法模式和抽象工厂模式。抽象工厂模式是工厂模式...

网友评论

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

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