第18讲:商品模型 织梦网站系统 dedecms 教学课件,网站建设最贵多少钱,西域数码网站建设,上海快速建站提供商DEEPEXI 大前端常人道#xff0c;一入开发深似海#xff0c;技术学习无止境。在新技术层出不穷的前端开发领域#xff0c;有一群身怀绝技的开发#xff0c;他们在钻研前沿技术的同时#xff0c;也不忘分享他们的成果#xff0c;回馈社区。下面#xff0c;就由小水滴带大…DEEPEXI 大前端常人道一入开发深似海技术学习无止境。在新技术层出不穷的前端开发领域有一群身怀绝技的开发他们在钻研前沿技术的同时也不忘分享他们的成果回馈社区。下面就由小水滴带大家看一下滴普大前端对新版 el-form-renderer 表单渲染器的硬核解析吧~DEEPEXI 官方产品介绍与技术分享https://www.zhihu.com/org/deepexiDEEPEXI 大前端前端技术成果的分享https://zhuanlan.zhihu.com/deepexi-frontend开源地址欢迎点击github来贡献你的star哦 ✨https://github.com/deepexihttps://github.com/FEMessageel-form-renderer与表单表单面临的难题表单本质上是什么表单用来承载业务需求的交互逻辑表单的最终目的是提交一些特定格式的数据。但在日常工作中公司的业务不会停下需求必然要跟着业务而不断演化一个看似简单的页面表单也会变得越来越臃肿。表单变得难以维护拿项目交接举例子。项目交接了N手各人都按各自的风格写代码产品也交接了好几手各按各的套路提需求。根本原因是代码的维护成本与业务不断变化之间的矛盾。当表单中出现联动的需求或者跨行之间发生制约关系时表单代码的复杂度就会上升。随着业务需求的演变如果代码处理的不好会变得越来越难维护。为什么要用el-form-renderer el-form-renderer是基于 element-ui 封装的表单渲染器但不局限于 element-ui 组件。在完整继承了 element 的form表单属性的基础上进行了简单扩展一些非表单组件或者封装的自定义组件如图片上传、富文本等也可进行整合从而用户能够通过使用一段预设的数据渲染出一个完整的表单。用一句话来概括el-form-renderer 让表单的构建与维护变得更简单了。el-form-renderer表单渲染组件issues:el-form-renderer 1.14.0 重磅发布el-form-renderer 1.14.0 : 支持 v-model版本更新主要带来了 v-model 功能并加入了 cypress 做 e2e 测试来护航。下面一起来看看开发小哥此时版本迭代的心路历程吧~功能v-model这次 feature 版本更新主要是为了 v-model 功能开展的。其可以解决以下问题不再需要对 ref 操作 updateForm、getFormValue 来与数据交互。可以直接观察当前的表单数据变更来进行特定操作。后续对 valid 状态也通过 prop sync 的形式管理基本就可以脱离对 ref 的依赖。提升代码质量由于 el-form-renderer 已经是历时两年多的开源项目许多代码经多人转手已经存在以下问题不合适的写法。比如大量使用 render 函数大量使用 mixin 和字符串拼接来调用功能开发者难以定位调用链条。比如在生成 option 数组时废弃的功能。比如不太好用的 enableWhen 等等没有注释的 hack。比如尝试兼容 select, radio checkbox 用法的代码在1.14.1版本修复。所以提高维护性也是本次迭代的重中之重。开发从此开始。测试第一步加入自动化测试。先前项目中已经引入了 jest 做单元测试。单元测试可以保证一些核心逻辑的稳定性比如一些数据处理、转换函数的输入输出意图。但是其没有办法测试真实示例使用起来时的稳定性比如用户真正在表单中输入值、点击重置按钮的行为。此前行为的稳定性只能依赖开发者和 review 人员手动对示例进行测试。现在项目使用 cypress 来对每个示例的行为进行自动化测试。这样开发者可以放心重构和添加功能同时轻松维护过往表现的一致性。如何写行为测试重点应当关注用户行为层面而不是代码输出层面。比如应当测试用户输入文本。确认文本框中有该内容。用户点击提交按钮。确认窗口内显示成功信息。而不是用户点击按钮。等待某个接口有返回内容测试按钮有没绑定到函数和接口是否正常。重构重构的主要成果是用 template 重构了所以 render 函数。代码更符合 vue 规范写法。移除了 mixin。将相关功能转化成纯函数并补充单元测试用例。层级调整。vue 组件移到 components 目录下js 文件移到 util 目录下。优化函数命名。比如使用具体的 removeDollarInKey 替代 transformItem。梳理了关键复杂点的逻辑并提取成纯函数补充单元测试。补全了所有关键示例的端测试。其中补充的单元测试包括transformInputFormat(用 inputFormat 处理初始和 updateForm 的值)transformOutputFormat (用 outputFormat 处理 getFormValue 的值)collect 从 content 中搜集 options 和初始 value。inputFormat outputFormat这次重构的最大难点就是处理 inputFormat、 outputFormat、group 与表单值 value 的逻辑。直接给出定义的话每个表单项的 inputFormat 接受当前 这一层group 的值返回 当前项的值。每个表单项的 outputFormat 接受 当前项的值 返回的值先判断是不是对象如果不是返回值视作 当前项的值。如果是返回值将整体覆盖到 这一层group 的值。具体看如下示例。使用到的同学请务必注意其用法。inputFormat重构前/ content 配置
{id: a,inputFormat: v v 1 // 接受传入值返回新值
}
//
this.$refs.form.updateForm({a: 1})
this.$refs.form.getFormValue() // {a: 2}重构后// content 配置
{id: a,inputFormat: formValue formValue.notA // 接受整个 formValue 来处理
}
//
this.$refs.form.updateForm({notA: 1})
this.$refs.form.getFormValue() // {a: 1}outputFormat重构前// content 配置
[{id: a,default: 1,outputFormat: a a 1 // 接受内部值返回处理过的值},{id: b,default: {c: 2},outputFormat: b (b.c 1, b)},
]
//
this.$refs.form.getFormValue() // {a: 2, b: {c: 3}}重构后// content 配置
[{id: a,default: 1,outputFormat: a a 1 // 这个的理解是对的},{id: b,default: {c: 2},outputFormat: b (b.c 1, b) // 当返回值是对象时会整体覆盖到上一层},
]
//
this.$refs.form.getFormValue() // {a: 2, c: 3}开发功能v-model开发过程新增属性 form作为对外 v-model 的属性。在 watch 里对接数据流水线监听 form、content 的变更 - 搜集初始值 --inputFormat-- value监听 value 的变更 --outputFormat-- form写新的示例 v-model.md 和测试 v-model.spec.js参考 basic 即可。测试流程输入各种 input、select、radio。检查输入后 v-model 的状态。点击 reset 按钮v-model 回到初始状态。发现问题在模拟点击 reset 按钮时当 cypress 测试里点击重置按钮 reset 未生效。手动在 cypress 的调试浏览器中点击按钮reset 生效。在普通浏览器中点击按钮reset 生效 。在 reset 函数里打点此时 reset 函数在以上情况中 都有被正常调用。尝试在 cypress 代码中先等待1秒再点击按钮reset 未生效。尝试在 cypress 代码中连续写两次 click 按钮操作reset 生效。发现有可能是 cypress 的问题标明注释说明手动测试成功连点两次是 hack 写法。解决问题review 了下原本的 resetFields 逻辑发现了如下问题reset 后 el-select 报错的 bug。reset 后value 监听器监听不到改变因为 el-form 的实现机制中改了 value 后没有 emit input 事件。如果在监听器上加 deep: true则会发现新值和旧值相同。原因暂时不明。在发现以上问题基础上对代码进行如下修改在 form、value 监听器中用 lodash 的 isequal 判断前后的值有变更时才 emit input 事件。参考 el-form 机制在内部实现了 resetFields用的是 mounted 时传入的值然后清除校验错误信息。解决了用例异常的问题有如下总结仍没有弄清楚为什么 cypress 的模拟操作代码调用的 resetFields 没有正常运作。疑似 cypress 的问题导致 resetFields 的其他问题被发现。重视测试的心以一种特别的方式让组件得到了回报。关于初始状态值得一提的是目前 resetFields 所认定的 初始状态是在组件 mounted 阶段时 v-model 的值。这点与 element 一致因为一些 element 表单组件会在 created 阶段在传入的 value 值不合法时会重新 emit 一个正确的初始值给到 v-model。比如开启了 multiple 的 el-select会修正初始值为 [] 。el-checkbox会修正初始值为 [] 由 el-form-renderer 实现原生是没有的。更新文档此次更新顺带修复了一些老示例的错误用法。可能不少 el-form-renderer 的用户还不了解el-form-renderer 的 disabled 属性统一在配置最上层级设置// content 定义
[{disabled: true, // 在这里设置el: {disabled: true // 无效}}
]意外之喜文档https://femessage.github.io/el-form-renderer/#/Demo/content在写 v-model 数据流水线时因为把 content 也融入在其中所以现在可以在运行时修改 content并观测表单变化。快速咨询登陆下方链接申请售前咨询联系人姓名中加上推荐码 deepexizhihu 将有专人联系开通。全场景数据智能引擎cloud.deepexi.com往期推荐全渠道数字化营销平台 DEEPEXI DMmp.weixin.qq.com企业级研发效能利器 DEEPEXI DevOpsmp.weixin.qq.com企业级前端全链路开发服务平台DEEPEXI ServerlessA20mp.weixin.qq.com周期购自动派单率不高可能是你不知道这个解决方案mp.weixin.qq.com更多内容全场景数据智能引擎cloud.deepexi.comDEEPEXI是滴普科技公司面向企业数字化领域打造的云原生智能平台定位于企业数字化引擎为企业提供数字化全栈解决方案。滴普科技致力于互联网/大数据/人工智能/物联网领先技术产品解决方案的研发和实施是领先的全场景数据智能服务商。
