工厂模式在JS中的实践

首先，写在前面

相信大家一定非常熟悉工厂模式和抽象工厂在后台代码中的使用，所以我就不需要多讲概念了。您可以将其用作类和层之间的解耦。工厂模式没有难度，在JS中，思路也是一样的，不要废话，直接去实际场景和代码。

二.场景描述

1.最近项目的登录使用了Owin身份验证，因此token必须存储在一个好的地方。由于在请求API资源时需要将令牌放入请求头的Authorization中，因此可以在进入WebAPI之前对其进行身份验证。所以，我不想在主流浏览器的cookie中存储令牌，因为那样的话，每次cookie携带一个令牌，Authorization就会携带另一个令牌。如果你不再说一次，人们会觉得很低落。你忍心用这么低的行为吗？因此，我想在本地存储中存储令牌。那么问题来了，不支持H5的浏览器怎么办？

2.为了以后把所有前端资源都放在CDN里，前端只有html、css和js。页面加载到浏览器客户端后，所有动态资源都是AJAX，所有资源都是跨域的。然后问题又来了。跨域很容易解决。IE 8和IE 9呢，默认关闭跨域功能的浏览器？

三.公共JS结构概述

我通常为应用程序定义一个全局的Application.js。大概包括以下内容。首先，给出整体代码结构以供参考

4.引入工厂理念解决问题

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

也就是说，为了解决问题一，当浏览器支持H5时，将令牌存储在localStorage中。Cookie仍然存在于不支持h5的浏览器中。

所以有两个JS对象，CookieStorageUtil对象和LocalStorageUtil对象。它们应该实现相同的“接口”。这里我不使用JS代码来模仿接口，而是用标注的形式来标记两个对象需要实现同一个接口，并在接口中实现write()和get()两种方法。并且规范代码，在私有方法的开头加下划线，这样以后修改内部代码的时候，私有方法随便改，对外公开的方法名称不变。是不是有点像后台的面向接口编程？其实JS也是一样。总之，如果不用JS的函数来模拟类，就无法实现真正的私有方法，那么如果有人在下划线' _ '开头调用私有方法，将来私有方法发生变化时会影响函数，那么就不会是我的锅了？

仍在代码上：

/** *存储工厂-作者吴双cnblogs.com/tdws *存储映像管理器：新对象({ createStorageUtil:函数(){ if(window。应用程序缓存){返回AppUtil .localstoreutil } else { return AppUtil .CookieStorageUtil} } })，/** *实现存储-作者吴双* write()* get()*/cookiestorageutil : { write : function(key，dataObj) { this ._clearCookie(密钥);//写入的字符串var dataObjStr=JSON。stringify(DataObj)；这个. setCookie(key，dataObjStr，15)；}，get:函数(键){ 0返回这个_getCookie(密钥);}，setCookie:函数(cname，cvalue，ex days){ var d=new Date()；d . SetTime(d . GetTime()(ex days * 24 * 60 * 60 * 1000))；var expires=' expires=' d . tout string()；var path=' path=/'；文件。cookie=cname '=' cvvalue'过期';'路径；}，getCookie:函数(cname){ var name=cname '='；var ca=文档。饼干。拆分('；');for(var I=0；约1 .长度；I){ var c=ca[I]；while(c . charat(0)=')c=c . substring(1)；if (c.indexOf(name)！=-1)返回c.substring(name.length，c . length)；}返回null}，_clearCookie:函数（键){这个._setCookie(键'',-1);} },/** *实现存储cnblogs.com/tdws * write()* get()*/localstorutil : { write :函数(key，dataObj) { this ._writeLocalStorage(键，DataObj)；}，get:函数(键){ 0返回这个_getFromLocalStorage(密钥);}，writeLocalStorage:函数（键，DataObj){ var本地存储=window。本地存储；localStorage.removeItem(键);//对象转化为字符串，将objStr按正常的方式存入localStorage中var dataObjStr=JSON。stringify(DataObj)；localStorage.setItem(key，dataObjStr)；}，GetFromLocalStorage : _ function(key){ var local storage=window。本地存储；返回localStorage.getItem(键);}，removeLocalStorage:函数（键){ var localStorage=window。localStoragelocalStorage.removeItem(键);} }这样第二个问题也得到了解决，在不支持跨域的浏览器创建XDomainRequest对象来做请求，两个HttpUtil对象依然实现相同的接口中的方法。在这个跨域问题上，推荐使用gayhub中的一个1.8k的JS https://github。com/moon脚本/jQuery-Ajaxtransport-XDomainRequest

对了，为了避免使用工厂模式，使代码调用复杂，我们可以简化射流研究…

AppUtil.currentHttpUtil=AppUtil .httputilmanager。createhttputil()；

五。写在最后

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

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