一.   写在前面

 工厂模式和抽象工厂在后台代码中的使用，相信你一定非常熟悉，所以关于概念的东西也用不着我多说。你可以用其做为类与类之间，层与层之间的解耦。工厂模式没有什么难点，在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。其中大概包括如下内容。 先上整体代码结构，供参考

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

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

也就是说在解决问题一上，在浏览器支持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吗？这也很简单啊，是啊，就是这么简单，这就是设计模式，它仅仅是前人的经验模式，它更平滑的解决我们的实际问题。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js  # 工厂模式  # 详解js产生对象的3种基本方式（工厂模式  # 构造函数模式  # 原型模式）  # js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)  # JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)  # JavaScript 模式之工厂模式(Factory)应用介绍  # javascript 模式设计之工厂模式详细说明  # javascript 模式设计之工厂模式学习心得  # js简单工厂模式用法实例  # JavaScript设计模式之工厂模式和构造器模式  # javascript设计模式之工厂模式示例讲解  # Javascript面向对象设计一 工厂模式  # 不支持  # 下划线  # 解决问题  # 多说  # 器中  # 让人  # 来了  # 我不  # 在这个  # 那就  # 在这  # 这就是  # 是一样的  # 就好  # 可以用  # 推荐使用  # 是啊  # 很容易  # 没有什么  # 我们可以 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  微信小程序 require机制详解及实例代码  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  网站建设整体流程解析，建站其实很容易！  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  Linux网络带宽限制_tc配置实践解析【教程】  制作旅游网站html,怎样注册旅游网站？  如何用免费手机建站系统零基础打造专业网站？  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  高防服务器如何保障网站安全无虞？  如何快速搭建高效WAP手机网站吸引移动用户？  Laravel如何处理跨站请求伪造（CSRF）保护_Laravel表单安全机制与令牌校验  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  Laravel Docker环境搭建教程_Laravel Sail使用指南  bing浏览器学术搜索入口_bing学术文献检索地址  JS经典正则表达式笔试题汇总  Laravel如何使用withoutEvents方法临时禁用模型事件  成都网站制作公司哪家好,四川省职工服务网是做什么用？  如何快速搭建虚拟主机网站？新手必看指南  清除minerd进程的简单方法  如何快速查询网址的建站时间与历史轨迹？  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  Python自动化办公教程_ExcelWordPDF批量处理案例  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  如何在搬瓦工VPS快速搭建网站？  详解jQuery中基本的动画方法  iOS验证手机号的正则表达式  Laravel如何实现用户注册和登录？（Auth脚手架指南）  Java解压缩zip - 解压缩多个文件或文件夹实例  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  实例解析Array和String方法  Win11怎么更改系统语言为中文_Windows11安装语言包并设为显示语言  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  如何在Ubuntu系统下快速搭建WordPress个人网站？  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程  JavaScript Ajax实现异步通信  文字头像制作网站推荐软件,醒图能自动配文字吗？  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  HTML5建模怎么导出为FBX格式_FBX格式兼容性及导出步骤【指南】  网站建设保证美观性，需要考虑的几点问题！  魔毅自助建站系统：模板定制与SEO优化一键生成指南  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程