工厂模式在JS中的实践


Posted in Javascript onJanuary 18, 2017

一.   写在前面

 工厂模式和抽象工厂在后台代码中的使用,相信你一定非常熟悉,所以关于概念的东西也用不着我多说。你可以用其做为类与类之间,层与层之间的解耦。工厂模式没有什么难点,在JS中其实思想也是一样的,所以废话不多说,直接上实践的场景和代码。

二.  场景描述

 1.最近的项目的登陆使用了Owin认证,所以token必须找好地方进行存储,鉴于token需要在请求API资源的时候放到请求头的Authorization当中,以便在进入WebAPI前进行身份验证。所以我不想在主流浏览器中的cookie中存储token,因为这样一来,每次Cookie中带一份token,Authorization中又带一份token.多传输一次不说,还让人感到很low.这么 这么low的行为,你忍心使用吗。所以我希望把token存储于localStorage当中。那么问题来了,不支持H5的浏览器怎么办?

 2.为了将来把所有前端资源置于CDN, 前端仅拥有html,css和js。页面加载到浏览器客户端后,所有动态资源走AJAX,并且所有资源均跨域。那么问题又来了,跨域很容易解决,在IE8,IE9这种默认关闭跨域功能的浏览器怎么办?

三. 公共JS结构一览

我通常会给应用定义一个全局Application.js。其中大概包括如下内容。 先上整体代码结构,供参考

工厂模式在JS中的实践

工厂模式在JS中的实践

四. 引入工厂思想解决问题

为了解决上述两个问题,所以引入工厂模式,在工厂中创建对象,工厂中根据不同浏览器类型,创建不同对象。

也就是说在解决问题一上,在浏览器支持H5的时候,存储token于localStorage。在不支持h5的浏览器中还是存于cookie.

所以产生了两个JS对象,CookieStorageUtil对象,LocalStorageUtil对象。并且他们应该实现相同的“接口”,在这里我没有使用JS代码来模仿接口,而是采用注释的形式,标注两个对象需要实现相同的接口,实现接口中的两个方法write()和get()。并规范代码,下划线开头的为私有方法,这样一来今后修改内部代码的时候,私有方法随便改,对外部暴露的方法名称不变就好,是不是有点像后台的面向接口编程呢?其实JS也是一样的。再多费一句话,如果我不使用JS的function模拟类的话,是无法达到真正的方法私有,所以如果有人调用下划线'_'开头的私有方法,在今后私有方法有变动的时候影响了功能,那就不是我的锅咯?

还是上代码靠谱:

/**
  * Storage Factory -Author 吴双 cnblogs.com/tdws
  */
 StorageUtilManager: new Object({
  createStorageUtil: function () {
   if (window.applicationCache) {
    return AppUtil.LocalStorageUtil;
   } else {
    return AppUtil.CookieStorageUtil;
   }
  }
 }),
 /**
  * implement Storage -Author 吴双
  * write()
  * get()
  */
 CookieStorageUtil: {
  write: function (key, dataObj) {
   this._clearCookie(key);
   //写入的字符串
   var dataObjStr = JSON.stringify(dataObj);
   this._setCookie(key, dataObjStr, 15);
  },
  get: function (key) {
   return this._getCookie(key);
  },
  _setCookie: function (cname, cvalue, exdays) {
   var d = new Date();
   d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
   var expires = "expires=" + d.toUTCString();
   var path = "path=/";
   document.cookie = cname + "=" + cvalue + "; " + expires + "; " + path;
  },
  _getCookie: function (cname) {
   var name = cname + "=";
   var ca = document.cookie.split(';');
   for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1);
    if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
   }
   return null;
  },
  _clearCookie: function (key) {
   this._setCookie(key, "", -1);
  }
 },
 /**
  * implement Storage cnblogs.com/tdws
  * write()
  * get()
  */
 LocalStorageUtil: {
  write: function (key, dataObj) {
   this._writeLocalStorage(key, dataObj);
  },
  get: function (key) {
   return this._getFromLocalStorage(key);
  },
  _writeLocalStorage: function (key, dataObj) {
   var localStorage = window.localStorage;
   localStorage.removeItem(key);
   //对象转化为字符串,将objStr按正常的方式存入localStorage中
   var dataObjStr = JSON.stringify(dataObj);
   localStorage.setItem(key, dataObjStr);
  },
  _getFromLocalStorage: function (key) {
   var localStorage = window.localStorage;
   return localStorage.getItem(key);
  },
  _removeLocalStorage: function (key) {
   var localStorage = window.localStorage;
   localStorage.removeItem(key);
  }
 }

这样第二个问题也得到了解决,在不支持跨域的浏览器创建XDomainRequest对象来做请求,两个HttpUtil对象依然实现相同的接口中的方法。在这个跨域问题上,推荐使用gayhub中的一个1.8k的JS https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest

对了,为了避免使用工厂模式,使代码调用复杂,我们可以简化JS

AppUtil.currentHttpUtil = AppUtil.HttpUtilManager.createHttpUtil();

五. 写在最后

所以有了这样的方式,问题平滑的解决了,两个StorageUtil与调用方,通过工厂StorageUtilManager完成解耦。可能你看完代码后说,不就是多了一个Manager吗?这也很简单啊,是啊,就是这么简单,这就是设计模式,它仅仅是前人的经验模式,它更平滑的解决我们的实际问题。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
基于jQuery制作小图标上下滑动特效
Jan 18 #Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 #Javascript
动态加载css方法实现和深入解析
Jan 18 #Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 #Javascript
JS实现旋转木马式图片轮播效果
Jan 18 #Javascript
微信小程序实现图片预加载组件
Jan 18 #Javascript
JavaScript原生节点操作小结
Jan 17 #Javascript
You might like
php重定向的三种方法分享
2012/02/22 PHP
PHP中文乱码解决方案
2015/03/05 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
PHP如何使用Memcached
2016/04/05 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
python进程与线程小结实例分析
2018/11/11 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Django组件content-type使用方法详解
2019/07/19 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
python模拟斗地主发牌
2020/04/22 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
前台文员岗位职责
2013/12/28 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
创先争优活动方案
2014/02/12 职场文书
大学军训感言600字
2014/02/25 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
利用js实现简单开关灯代码
2021/11/23 Javascript