重构设计API的扩展机制

1.前言

上篇文章&＃xff0c;主要介绍了重构的一些概念和一些简单的实例。这一次&＃xff0c;详细的说下项目中的一个重构场景--给API设计扩展机制。目的就是为了方便以后能灵活应对需求的改变。当然了&＃xff0c;是否需要设计扩展性这个要看API的需求。如果大家有什么建议&＃xff0c;欢迎评论留言。

2.扩展性表现形式

2-1.prototype

这个可以说是JS里面最原的一个扩展。比如原生JS没有提供打乱数组顺序的API&＃xff0c;但是开发者又想方便使用&＃xff0c;这样的话&＃xff0c;就只能扩展数组的prototype。代码如下

//扩展Array.prototype&＃xff0c;增加打乱数组的方法。
Array.prototype.upset&＃61;function(){return this.sort((n1,n2)&＃61;>Math.random() - 0.5);
}let arr&＃61;[1,2,3,4,5];
//调用
arr.upset();
//显示结果
console.log(arr);

运行结果

功能是实现了。但是上面的代码&＃xff0c;只想借用例子讲解扩展性&＃xff0c;大家看下就好。不要模仿&＃xff0c;也不要在项目这样写。现在基本都禁止这样开发了。理由也很简单&＃xff0c;之前的文章也有提到过。这里重复一下。

这样就污染了原生对象Array&＃xff0c;别人创建的Array也会被污染&＃xff0c;造成不必要的开销。最可怕的是&＃xff0c;万一自己命名的跟原生的方法重名了&＃xff0c;就被覆盖原来的方法了。

Array.prototype.push&＃61;function(){console.log(&＃39;守候&＃39;)}
let arrTest&＃61;[123]
arrTest.push()
//result:守候
//push方法有什么作用&＃xff0c;大家应该知道&＃xff0c;不知道的可以去w3c看下

2-2.jQuery

关于 jQuery 的扩展性&＃xff0c;分别提供了三个API:$.extend()、$.fn和$.fn.extend()。分别对jQuery的本身&＃xff0c;静态方法&＃xff0c;原型对象进行扩展&＃xff0c;基于jQuery写插件的时候&＃xff0c;最离不开的应该就是$.fn.extend()。

参考链接&＃xff1a;

理解jquery的$.extend()、$.fn和$.fn.extend()
Jquery自定义插件之$.extend()、$.fn和$.fn.extend()

2-3.VUE

对VUE进行扩展&＃xff0c;引用官网&＃xff08;插件&＃xff09;的说法&＃xff0c;扩展的方式一般有以下几种&＃xff1a;

1.添加全局方法或者属性&＃xff0c;如: vue-custom-element

2.添加全局资源&＃xff1a;指令/过滤器/过渡等&＃xff0c;如 vue-touch

3.通过全局 mixin 方法添加一些组件选项&＃xff0c;如: vue-router

4.添加 Vue 实例方法&＃xff0c;通过把它们添加到 Vue.prototype 上实现。

5.一个库&＃xff0c;提供自己的 API&＃xff0c;同时提供上面提到的一个或多个功能&＃xff0c;如 vue-router

基于VUE的扩展。在组件&＃xff0c;插件的内容提供一个install方法。如下

使用组件

上面几个扩展性的实例分别是原生对象&＃xff0c;库&＃xff0c;框架的扩展&＃xff0c;大家可能觉得有点夸夸而谈&＃xff0c;那下面就分享一个日常开发常用的一个实例。

3.实例-表单验证

看了上面那些扩展性的实例&＃xff0c;下面看下一个在日常开发使用得也很多的一个实例&＃xff1a;表单验证。这块可以说很简单&＃xff0c;但是做好&＃xff0c;做通用不简单。看了《Javascript设计模式与开发实践》&＃xff0c;用策略模式对以前的表单验证函数进行了一个重构。下面进行一个简单的分析。

下面的内容&＃xff0c;代码会偏多&＃xff0c;虽然代码不难&＃xff0c;但还是强烈建议大家不要只看&＃xff0c;要边看&＃xff0c;边写&＃xff0c;边调试&＃xff0c;不然作为读者&＃xff0c;很可能不知道我的代码是什么意思&＃xff0c;很容易懵。下面的代码回涉两个知识&＃xff1a;开放-封闭原则和策略模式&＃xff0c;大家可以自行了解。

3-1.原来方案

/*** &＃64;description 字段检验* &＃64;param checkArr* &＃64;returns {boolean}*/
function validateForm(checkArr){let _reg &＃61; null, ruleMsg, nullMsg, lenMsg;for (let i &＃61; 0, len &＃61; checkArr.length; i checkArr[i].maxLength) {return lenMsg;}}}return false;
}

函数调用方式

let testData&＃61;{phone:&＃39;18819323632&＃39;,pwd:&＃39;112&＃39;}let _tips &＃61; validateForm([{el: testData.phone, noNull: true, nullMsg: &＃39;电话号码不能为空&＃39;,rule: "mobile", msg: &＃39;电话号码格式错误&＃39;},{el: testData.pwd, noNull: true, nullMsg: &＃39;密码不能为空&＃39;,lenMsg:&＃39;密码长度不正确&＃39;,minLength:6,maxLength:18}]);//字段验证如果返回错误信息if (_tips) {alert(_tips);}

3-2.存在问题

这样方法&＃xff0c;相信大家看的也难受&＃xff0c;因为问题确实是比较多。

1.一个字段进入&＃xff0c;可能要经过三种判断&＃xff08;空值&＃xff0c;规则&＃xff0c;长度&＃xff09;。如果只是一个简单的电话号码规则校验&＃xff0c;就要经过其他两种没必要的校验&＃xff0c;造成不必要的开销。运行的流程就如同下面。

2.规则校验里面&＃xff0c;只有这几种校验&＃xff0c;如果要增加其他校验&＃xff0c;比如增加一个日期的规则&＃xff0c;无法完成。如果一直修改源码&＃xff0c;可能会导致函数巨大。

3.写法不优雅&＃xff0c;调用也不方便。

3-3.代替方案

针对上面2-2的三个问题&＃xff0c;逐个进行改善。

因为调用方式就不方便&＃xff0c;很难在不改变validateForm调用方式的同时&＃xff0c;优化重构内部的代码&＃xff0c;又增加扩展性。重写这个方法又不可能&＃xff0c;因为有个别的地方已经使用了这个API&＃xff0c;自己一个一个的改不现实&＃xff0c;所以就不修改这个validateForm&＃xff0c;新建一个新的API:validate。在以后的项目上&＃xff0c;也尽量引导同事放弃validateForm&＃xff0c;使用新的API。

上面第一个&＃xff0c;优化校验规则&＃xff0c;每次校验&＃xff08;比如空值&＃xff0c;长度&＃xff0c;规则&＃xff09;&＃xff0c;都是一个简单的校验&＃xff0c;不再执行其他没必要的校验。运行流程如同下面。

let validate &＃61; function (arr) {let ruleData &＃61; {/*** &＃64;description 不能为空* &＃64;param val* &＃64;param msg* &＃64;return {*}*/isNoNull(val, msg){if (!val) {return msg}},/*** &＃64;description 最小长度* &＃64;param val* &＃64;param length* &＃64;param msg* &＃64;return {*}*/minLength(val, length, msg){if (val.toString().length length) {return msg}},/*** &＃64;description 是否是手机号码格式* &＃64;param val* &＃64;param msg* &＃64;return {*}*/isMobile(val, msg){if (!/^1[3-9]\d{9}$/.test(val)) {return msg}}}let ruleMsg, checkRule, _rule;for (let i &＃61; 0, len &＃61; arr.length; i };
let testData &＃61; {name: &＃39;&＃39;,phone: &＃39;18819522663&＃39;,pw: &＃39;asda&＃39;
}
//校验函数调用
console.log(validate([{//校验的数据el: testData.phone,//校验的规则rules: [{rule: &＃39;isNoNull&＃39;, msg: &＃39;电话不能为空&＃39;}, {rule: &＃39;isMobile&＃39;, msg: &＃39;手机号码格式不正确&＃39;}]},{el: testData.pw,rules: [{rule: &＃39;isNoNull&＃39;, msg: &＃39;电话不能为空&＃39;},{rule:&＃39;minLength:6&＃39;,msg:&＃39;密码长度不能小于6&＃39;}]}
]));

如果又有其它的规则&＃xff0c;又得改这个&＃xff0c;这样就违反了开放-封闭原则。如果多人共用这个函数&＃xff0c;规则可能会很多&＃xff0c;ruleData会变的巨大&＃xff0c;造成不必要的开销。比如A页面有金额的校验&＃xff0c;但是只有A页面有。如果按照上面的方式改&＃xff0c;在B页面也会加载金额的校验规则&＃xff0c;但是根本不会用上&＃xff0c;造成资源浪费。

所以下面应用开放-封闭原则。给函数的校验规则增加扩展性。在实操之前&＃xff0c;大家应该会懵&＃xff0c;因为一个函数&＃xff0c;可以进行校验的操作&＃xff0c;又有增加校验规则的操作。一个函数做两件事&＃xff0c;就违反了单一原则。到时候也难维护&＃xff0c;所以推荐的做法就是分接口做。如下写法。

let validate &＃61; (function () {let ruleData &＃61; {/*** &＃64;description 不能为空* &＃64;param val* &＃64;param msg* &＃64;return {*}*/isNoNull(val, msg){if (!val) {return msg}},/*** &＃64;description 最小长度* &＃64;param val* &＃64;param length* &＃64;param msg* &＃64;return {*}*/minLength(val, length, msg){if (val.toString().length length) {return msg}},/*** &＃64;description 是否是手机号码格式* &＃64;param val* &＃64;param msg* &＃64;return {*}*/isMobile(val, msg){if (!/^1[3-9]\d{9}$/.test(val)) {return msg}}}return {/*** &＃64;description 查询接口* &＃64;param arr* &＃64;return {*}*/check: function (arr) {let ruleMsg, checkRule, _rule;for (let i &＃61; 0, len &＃61; arr.length; i })();
//校验函数调用-测试用例
console.log(validate.check([{//校验的数据el: testData.mobile,//校验的规则rules: [{rule: &＃39;isNoNull&＃39;, msg: &＃39;电话不能为空&＃39;}, {rule: &＃39;isMobile&＃39;, msg: &＃39;手机号码格式不正确&＃39;}]},{el: testData.password,rules: [{rule: &＃39;isNoNull&＃39;, msg: &＃39;电话不能为空&＃39;},{rule:&＃39;minLength:6&＃39;,msg:&＃39;密码长度不能小于6&＃39;}]}
]));
//扩展-添加日期范围校验
validate.addRule(&＃39;isDateRank&＃39;,function (val,msg) {if(new Date(val[0]).getTime()>&＃61;new Date(val[1]).getTime()){return msg;}
});
//测试新添加的规则-日期范围校验
console.log(validate.check([{el:[&＃39;2017-8-9 22:00:00&＃39;,&＃39;2017-8-8 24:00:00&＃39;],rules:[{rule:&＃39;isDateRank&＃39;,msg:&＃39;日期范围不正确&＃39;}]}]));

如上代码所示&＃xff0c;这里需要往ruleData添加日期范围的校验&＃xff0c;这里可以添加。但是不能访问和修改ruleData的东西&＃xff0c;有一个保护的作用。还有一个就是&＃xff0c;比如在A页面添加日期的校验&＃xff0c;只在A页面存在&＃xff0c;不会影响其它页面。如果日期的校验在其它地方都可能用上&＃xff0c;就可以考虑&＃xff0c;在全局里面为ruleData添加日期的校验的规则。

至于第三个问题&＃xff0c;这样的想法&＃xff0c;可能不算太优雅&＃xff0c;调用也不是太方便&＃xff0c;但是就我现在能想到的&＃xff0c;这个就是最好方案啊了。

这个看似是已经做完了&＃xff0c;但是大家可能觉得有一种情况没能应对&＃xff0c;比如下面这种&＃xff0c;做不到。

因为上面的check接口&＃xff0c;只要有一个错误了&＃xff0c;就立马跳出了&＃xff0c;不会校验下一个。如果要实现下面的功能&＃xff0c;就得实现&＃xff0c;如果有一个值校验错误&＃xff0c;就记录错误信息&＃xff0c;继续校验下一个&＃xff0c;等到所有的校验都执行完了之后&＃xff0c;如下面的流程图。

代码上面&＃xff08;大家先忽略alias这个属性&＃xff09;

let validate&＃61; (function () {let ruleData &＃61; {/*** &＃64;description 不能为空* &＃64;param val* &＃64;param msg* &＃64;return {*}*/isNoNull(val, msg){if (!val) {return msg}},/*** &＃64;description 最小长度* &＃64;param val* &＃64;param length* &＃64;param msg* &＃64;return {*}*/minLength(val, length, msg){if (val.toString().length length) {return msg}},/*** &＃64;description 是否是手机号码格式* &＃64;param val* &＃64;param msg* &＃64;return {*}*/isMobile(val, msg){if (!/^1[3-9]\d{9}$/.test(val)) {return msg}}}return {check: function (arr) {//代码不重复展示&＃xff0c;上面一部分},addRule:function (type,fn) {//代码不重复展示&＃xff0c;上面一部分},/*** &＃64;description 校验所有接口* &＃64;param arr* &＃64;return {*}*/checkAll: function (arr) {let ruleMsg, checkRule, _rule,msgArr&＃61;[];for (let i &＃61; 0, len &＃61; arr.length; i 0?msgArr:false;}}
})();
let testData &＃61; {name: &＃39;&＃39;,phone: &＃39;188&＃39;,pw: &＃39;asda&＃39;
}
//扩展-添加日期范围校验
validate.addRule(&＃39;isDateRank&＃39;,function (val,msg) {if(new Date(val[0]).getTime()>&＃61;new Date(val[1]).getTime()){return msg;}
});
//校验函数调用
console.log(validate.checkAll([{//校验的数据el: testData.phone,alias:&＃39;mobile&＃39;,//校验的规则rules: [{rule: &＃39;isNoNull&＃39;, msg: &＃39;电话不能为空&＃39;}, {rule: &＃39;isMobile&＃39;, msg: &＃39;手机号码格式不正确&＃39;},{rule:&＃39;minLength:6&＃39;,msg: &＃39;手机号码不能少于6&＃39;}]},{el: testData.pw,alias:&＃39;pwd&＃39;,rules: [{rule: &＃39;isNoNull&＃39;, msg: &＃39;电话不能为空&＃39;},{rule:&＃39;minLength:6&＃39;,msg:&＃39;密码长度不能小于6&＃39;}]},{el:[&＃39;2017-8-9 22:00:00&＃39;,&＃39;2017-8-8 24:00:00&＃39;],rules:[{rule:&＃39;isDateRank&＃39;,msg:&＃39;日期范围不正确&＃39;}]}
]));

看到结果&＃xff0c;现在所有的不合法的数据的记录都返回回来了。至于当时alias现在揭晓用处。
比如页面是vue渲染的&＃xff0c;根据alias可以这样处理。

如果是jQuery渲染的&＃xff0c;根据alias可以这样处理。

3-4.向下兼容方案

因为项目之前有使用了以前的校验API&＃xff0c;不能一道切&＃xff0c;在以前的API没废弃之前&＃xff0c;不能影响之前的使用。所以要重写以前的validateForm&＃xff0c;使之兼容现在的新API:validate。

let validateForm&＃61;function (arr) {let _param&＃61;[],_single&＃61;{};for(let i&＃61;0;i

4.小结