最近接手了一个新的产品,在原有的基础上进行改造。
刚拿到这个产品的代码时,我也是一头雾水,动就上千行的逻辑代码,看的让人很费劲,完全没有任何套路可言,一撸到底的代码,拿到后,我就先把代码拆开,一块一块的看
最初只有createorder.js,拆开后变成了4个,createordervalidate.js,createorderutils.js,createorderinit.js,拆过之后,代码分工就比较清晰了,初始化的时候,会加载很多控件,会定义很多全局变量,utils里是一些工具函数,获取表单数据,set表单数据,cookies的获取,url里参数的获取,validate就是表单的校验了,我把表单的提交也放在了这一块。
重构过之后,编辑,新增订单可以公用一套代码,直接调用对应的方法就行了,即使增加一个查看框,也用不了太久就能搞定,之前的方式就是代码copy,没有抽出业务公共的逻辑。
jquery系列的老的产品代码,最好的重构方法就是插件化,现代三大框架,vue,react,angular,就是组件化,加上,数据状态管理器搞定。