5分钟即可掌握的前端高效利器：JavaScript策略模式

浅谈 JavaScript 中策略模式的使用：

作为一家“创意+整合+营销”的成都网站建设机构，我们在业内良好的客户口碑。创新互联提供从前期的网站品牌分析策划、网站设计、网站设计、网站建设、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。

  •  什么是设计模式
  •  什么是策略模式
  •  策略模式在 JavaScript 中的应用（使用策略模式封装百度AI识别调用）
  •  策略模式在 Vue 组件封装中的应用（使用策略模式封装Select组件）

什么是设计模式

设想有一个电子爱好者，虽然他没有经过正规的培训，但是却日积月累地设计并制造出了许多有用的电子设备：业余无线电、盖革计数器、报警器等。有一天这个爱好者决定重新回到学校去攻读电子学学位，来让自己的才能得到正式的认可。随着课程的展开，这个爱好者突然发现课程内容都似曾相识。似曾相识的不是术语或表述的方式，而是背后的概念。这个爱好者不断学到一些名称和原理，虽然这些名称和原理原来他并不知道，但事实上他多年以来一直都在使用。整个过程只不过是一个接一个的顿悟。

设计模式沉思录 ，John Vlissides， 第一章 1.2节

我们在写代码的时候，一定也遇到过许多类似的场景。随着经验的增加，我们对于这些常见场景的处理越来越得心应手，甚至总结出了针对性的“套路”，下次遇到此类问题直接运用“套路”解决，省心又省力。这些在软件开发过程中逐渐积累下来的“套路”就是设计模式。

设计模式的目标之一就是提高代码的可复用性、可扩展性和可维护性。正因如此，虽然有时候我们不知道某个设计模式，但是看了相关书籍或文章后会有一种“啊，原来这就是设计模式”的恍然大明白。

如果你看完这篇文章后也有此感觉，那么恭喜你，你已经在高效程序员的道路上一路狂奔了。

什么是策略模式

策略模式是一种简单却常用的设计模式，它的应用场景非常广泛。我们先了解下策略模式的概念，再通过代码示例来更清晰的认识它。

策略模式由两部分构成：一部分是封装不同策略的策略组，另一部分是 Context。通过组合和委托来让 Context 拥有执行策略的能力，从而实现可复用、可扩展和可维护，并且避免大量复制粘贴的工作。

策略模式的典型应用场景是表单校验中，对于校验规则的封装。接下来我们就通过一个简单的例子具体了解一下：

粗糙的表单校验

一个常见的登录表单代码如下： 

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.     手机号  
    3. 
  
  
  
  3.       
    4. 
  
  
  
  4.     密码  
    5. 
  
  
  
  5.       
    6. 
  
  
  
  6.     登录  
    7. 
  
  
  
  7.   
    8. 
  
  
  
  8.  
    9.

以上代码，虽然功能没问题，但是缺点也很明显：

代码里遍地都是 if 语句，并且它们缺乏弹性：每新增一种、或者修改原有校验规则，我们都必须去改loginForm.onsubmit内部的代码。另外逻辑的复用性也很差：如果有其它表单也是用同样的规则，这段代码并不能复用，只能复制。当校验规则发生变化时，比如上文的正则校验并不能匹配虚拟运营商14/17号段，我们就需要手动同步多处代码变更（Ctrl+C/Ctrl+V）。

优秀的表单验证

接下来我们通过策略模式的思路改写一下上段代码，首先抽离并封装校验逻辑为策略组： 

 
 
 
    
  
  
  
  1. var strategies = {  
    2. 
  
  
  
  2.     isNonEmpty: function (value, errorMsg) {  
    3. 
  
  
  
  3.         if (value === '' || value === null) {  
    4. 
  
  
  
  4.             return errorMsg;  
    5. 
  
  
  
  5.         }  
    6. 
  
  
  
  6.     },  
    7. 
  
  
  
  7.     isMobile: function (value, errorMsg) { // 手机号码格式  
    8. 
  
  
  
  8.         if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)) {  
    9. 
  
  
  
  9.             return errorMsg;  
    10. 
  
  
  
  10.         }  
    11. 
  
  
  
  11.     },  
    12. 
  
  
  
  12.     minLength: function (value, length, errorMsg) {  
    13. 
  
  
  
  13.         if (value.length < length) {  
    14. 
  
  
  
  14.             return errorMsg;  
    15. 
  
  
  
  15.         }  
    16. 
  
  
  
  16.     }  
    17. 
  
  
  
  17. }; 
    18.

接下来修改 Context: 

 
 
 
    
  
  
  
  1. var loginForm = document.getElementById('login-form');  
    2. 
  
  
  
  2. loginForm.onsubmit = function (e) {  
    3. 
  
  
  
  3.     e.preventDefault();   
    4. 
  
  
  
  4.     var accountIsMobile = strategies.isMobile(account,'手机号格式错误');  
    5. 
  
  
  
  5.     var pwdMinLength = strategies.minLength(pwd,8,'密码不能小于8位');  
    6. 
  
  
  
  6.     var errorMsg = accountIsMobile||pwdMinLength;   
    7. 
  
  
  
  7.     if(errorMsg){  
    8. 
  
  
  
  8.         alert(errorMsg); 
    9. 
  
  
  
  9.          return false;  
    10. 
  
  
  
  10.     } 
    11. 
  
  
  
  11. } 
    12.

对比两种实现，我们可以看到：分离了校验逻辑的代码如果需要扩展校验类型，在策略组中新增定义即可使用；如果需要修改某个校验的实现，直接修改相应策略即可全局生效。对于开发和维护都有明显的效率提升。

扩展：史诗的表单校验

有兴趣的朋友可以了解下 async-validator ，element-ui 和 antd 的表单校验都是基于 async-validator 封装的，可以说是史诗级别的表单校验了

通过表单校验的对比，相信大家都对策略模式有所了解，那么接下来通过两个例子具体了解下 JavaScript 中策略模式的应用：

使用策略模式调用百度AI图像识别

因为百度AI图像识别的接口类型不同，所需的参数格式也不尽相同。然而图像的压缩及上传、错误处理等部分是公用的。所以可以采用策略模式封装：

定义策略组

通过定义策略组来封装不同的接口及其参数：比如身份证识别接口的side字段，自定义识别的templateSign字段，以及行驶证识别的接收参数为poparamstData。 

 
 
 
    
  
  
  
  1. /**  
    2. 
  
  
  
  2.  * 策略组  
    3. 
  
  
  
  3.  * IDCARD:身份证识别  
    4. 
  
  
  
  4.  * CUSTOMIZED:自定义识别  
    5. 
  
  
  
  5.  * VL:行驶证识别  
    6. 
  
  
  
  6.  */  
    7. 
  
  
  
  7. var strategies = {  
    8. 
  
  
  
  8.     IDCARD: function (base64) {  
    9. 
  
  
  
  9.         return {  
    10. 
  
  
  
  10.             path: 'idcard',  
    11. 
  
  
  
  11.             param: {  
    12. 
  
  
  
  12.                 'side': 'front',  
    13. 
  
  
  
  13.                 'base64': base64  
    14. 
  
  
  
  14.             }  
    15. 
  
  
  
  15.         };  
    16. 
  
  
  
  16.     },  
    17. 
  
  
  
  17.     CUSTOMIZED: function (base64) {  
    18. 
  
  
  
  18.         return {  
    19. 
  
  
  
  19.             path: 'customized',  
    20. 
  
  
  
  20.             param: {  
    21. 
  
  
  
  21.                 'templateSign': '52cc2d402155xxxx',  
    22. 
  
  
  
  22.                 'base64': base64  
    23. 
  
  
  
  23.             }  
    24. 
  
  
  
  24.         };  
    25. 
  
  
  
  25.     },  
    26. 
  
  
  
  26.     VL: function (base64) {  
    27. 
  
  
  
  27.         return {  
    28. 
  
  
  
  28.             path: 'vehicled',  
    29. 
  
  
  
  29.             poparamstData: {  
    30. 
  
  
  
  30.                 'base64': base64  
    31. 
  
  
  
  31.             }  
    32. 
  
  
  
  32.         };  
    33. 
  
  
  
  33.     },  
    34. 
  
  
  
  34. }; 
    35.

定义 Context 

 
 
 
    
  
  
  
  1. var ImageReader = function () { };  
    2. 
  
  
  
  2. /**  
    3. 
  
  
  
  3.  * 读取图像,调用接口,获取识别结果  
    4. 
  
  
  
  4.  *   
    5. 
  
  
  
  5.  * @param {*} type 待识别文件类型  
    6. 
  
  
  
  6.  * @param {*} base64 待识别文件 BASE64码  
    7. 
  
  
  
  7.  * @param {*} callBack 识别结果回调  
    8. 
  
  
  
  8.  */  
    9. 
  
  
  
  9. ImageReader.prototype.getOcrResult = function (type, base64, callBack) {  
    10. 
  
  
  
  10.     let fileSize = (base64.length / (1024 * 1024)).toFixed(2);  
    11. 
  
  
  
  11.     let compressedBase64 = '';  
    12. 
  
  
  
  12.     let image = new Image();  
    13. 
  
  
  
  13.     image.src = base64;  
    14. 
  
  
  
  14.     image.onload = function () {  
    15. 
  
  
  
  15.         /**  
    16. 
  
  
  
  16.          * 图片压缩处理及异常处理，代码略  
    17. 
  
  
  
  17.          */     
    18. 
  
  
  
  18.         let postData = strategies[type](compressedBase64); 
    19. 
  
  
  
  19.         ajax( 
    20. 
  
  
  
  20.             host + postData.path, {  
    21. 
  
  
  
  21.                 data: postData.param,  
    22. 
  
  
  
  22.                 type: 'POST',  
    23. 
  
  
  
  23.                 headers: {  
    24. 
  
  
  
  24.                     'Content-Type': 'application/x-www-form-urlencoded'  
    25. 
  
  
  
  25.                 },  
    26. 
  
  
  
  26.                 success: function (res) {  
    27. 
  
  
  
  27.                     var data = JSON.parse(res);  
    28. 
  
  
  
  28.                     // 暴露给 UI 层的统一的错误码  
    29. 
  
  
  
  29.                     if (data.error_code !== undefined && data.error_code !== 0) {  
    30. 
  
  
  
  30.                         var errorData = {  
    31. 
  
  
  
  31.                             error: 1,  
    32. 
  
  
  
  32.                             title: '错误 ' + data.error_code,  
    33. 
  
  
  
  33.                             content: 'error message'  
    34. 
  
  
  
  34.                         };  
    35. 
  
  
  
  35.                         callBack(errorData);  
    36. 
  
  
  
  36.                     } else {  
    37. 
  
  
  
  37.                         callBack(data);  
    38. 
  
  
  
  38.                     }  
    39. 
  
  
  
  39.                 }  
    40. 
  
  
  
  40.             });  
    41. 
  
  
  
  41.     };  
    42. 
  
  
  
  42. }; 
    43.

调用方式 

 
 
 
    
  
  
  
  1. var imageReader = new ImageReader();  
    2. 
  
  
  
  2. imageReader.getOcrResult('IDCARD', this.result.toString(), callback); 
    3.

使用策略模式封装 Vue Select 组件

某项目中多处用到了 element-ui 的 select 组件，其内在逻辑类似，都是初始化时获取下拉列表的数据源，然后在选中某一项时 dispatch 不同的 action。遂考虑使用策略模式封装。

Context

在本例中，组件向外部暴露一个 prop，调用方指定该 prop 从而加载不同的策略。那么定义 Context 如下: 

 
 
 
    
  
  
  
  1.   
    2. 
 
 
 
 
 
 
    
  
  
  
  1. data() {  
    2. 
  
  
  
  2.     return {  
    3. 
  
  
  
  3.       selectedValue: undefined,  
    4. 
  
  
  
  4.       options: [],  
    5. 
  
  
  
  5.       action: "",  
    6. 
  
  
  
  6.     };  
    7. 
  
  
  
  7.   },  
    8. 
  
  
  
  8.   props: {  
    9. 
  
  
  
  9.     // 暴露给外部的 select-type  
    10. 
  
  
  
  10.     selectType: {  
    11. 
  
  
  
  11.       type: String  
    12. 
  
  
  
  12.     },  
    13. 
  
  
  
  13.   },  
    14. 
  
  
  
  14.   created() {  
    15. 
  
  
  
  15.    // 获取 options  
    16. 
  
  
  
  16.    this.valuation();  
    17. 
  
  
  
  17.   },  
    18. 
  
  
  
  18.     methods: {  
    19. 
  
  
  
  19.     optionChanged() {  
    20. 
  
  
  
  20.       this.$emit(this.action, this.selectedValue);  
    21. 
  
  
  
  21.     },  
    22. 
  
  
  
  22.     setOptions(option) {  
    23. 
  
  
  
  23.       this.$store.dispatch(this.action, option);  
    24. 
  
  
  
  24.     },  
    25. 
  
  
  
  25.     valuation() {  
    26. 
  
  
  
  26.       // 获取 options 数据  
    27. 
  
  
  
  27.     }  
    28. 
  
  
  
  28.   }, 
    29.

外部通过如下方式调用组件：

 
 
 
    
  
  
  
  1.  
    2.

strategies

然后定义策略组： 

 
 
 
    
  
  
  
  1. let strategies = {  
    2. 
  
  
  
  2.     source: {  
    3. 
  
  
  
  3.         action: "sourceOption",  
    4. 
  
  
  
  4.         getOptions:  function() {  
    5. 
  
  
  
  5.             // 拉取 options  
    6. 
  
  
  
  6.         }  
    7. 
  
  
  
  7.     },  
    8. 
  
  
  
  8.     product: {  
    9. 
  
  
  
  9.         action: "productOption",  
    10. 
  
  
  
  10.         getOptions:  function() {  
    11. 
  
  
  
  11.             // 拉取 options  
    12. 
  
  
  
  12.         }  
    13. 
  
  
  
  13.     },  
    14. 
  
  
  
  14.     ...  
    15. 
  
  
  
  15. } 
    16.

异步

至此该组件的基本结构已经清晰，但还存在一个问题：组件加载时是异步拉取的 options， 而页面初始化的时候很可能 options 还没有返回，导致 select 的 options 仍为空。所以此处应该修改代码，同步获取 options： 

 
 
 
    
  
  
  
  1. // 策略组修改  
    2. 
  
  
  
  2. source: {  
    3. 
  
  
  
  3.     action: "sourceOption",  
    4. 
  
  
  
  4.     getOptions: async function() {  
    5. 
  
  
  
  5.         // await 拉取 options  
    6. 
  
  
  
  6.     }  
    7. 
  
  
  
  7.   },  
    8. 
  
  
  
  8. // 组件修改  
    9. 
  
  
  
  9. methods: {  
    10. 
  
  
  
  10.     ...  
    11. 
  
  
  
  11.     async valuation() {  
    12. 
  
  
  
  12.         ...  
    13. 
  
  
  
  13.     }  
    14. 
  
  
  
  14. } 
    15.

继续优化

但我们不是每次加载组件都需要拉取 options，如果这些 options 在其他组件或者页面也被使用到，那么可以考虑将其存入 vuex 中。

最开始的思路是高阶组件，即定义一个包装后的select模板,通过高阶组件的方式扩展其数据源与action（变化的部分）然而这个思路不是那么的vue（主要是slots不太好处理） 于是考虑策略模式改写该组件

总结

通过以上两个例子，我们可以看到：

  •  策略模式符合开放-封闭原则
  •  如果代码里需要写大量的if-else语句，那么考虑使用策略模式
  •  如果多个组件（类）之间的区别仅在于它们的行为，考虑采用策略模式 

新闻名称：5分钟即可掌握的前端高效利器：JavaScript策略模式
网站URL：http://www.shufengxianlan.com/qtweb/news32/289282.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

品牌网站建设知识

行业网站建设

广汉锦华建材　　 　电子商务商城网站　　 　微信公众号二次开发　　 　网络推广外包　　 　德阳东方电机技改服务有限公司　　 　seo优化　　 　免备案空间　　 　成都画册设计　　 　电信成都枢纽中心　　 　四川艺考培训　　 　眉山网站建设　　 　网站定制　　 　郫县门窗定制　　 　成都导视系统设计　　 　成都网站制作　　 　友益建筑机械凿　　 　眉山主机托管　　 　移动手机网站制作　　 　成都橡塑保温管　　 　网站seo优化