声明:本文所有代码和截屏都来自公司官网发布的程序
今天突然想起,在中建电商离职时候,主管W主管嘲讽我的一件事:你不是给我反馈说,公司js创建对象存在问题,咋我们程序一直运行没有报错呢。
已经离职了,再去谈谁对谁错已经没有意义,这里我仅仅是分享我的技术观点。换句话说,如果让我去实现这个功能我改如何去设计。
场景还原:项目前端用knockout(简称ko),公司封装了一个通用的ko对象,用于前端table数据展示(包括查询和分页)。然后项目中如果有100个 table展示 基本后面99个都是ctrl+v第一个js代码(如下截屏)
如果是我设计不会这样做
一、不会业务代码和view放在一起。mvc项目 在view页面(*.cshtml) 放置大量Js业务实现代码。现状是很多view页面放置大量js业务代码(超过一千行的页面比比皆是),如下是线上已经发布的登录页面,其中含有大量js业务代码
二、不会用源代码文件发布js和css文件。发布后的css和js 我会尽量压缩合并,如果再进一步可以选择webpack,
三、不会在页面用了ko 还每个页面 使用Jquery 的$(funciton(){}) 以及jquery 添加事件 这些不伦不类的代码
截完图发现,截图中js逻辑都有问题:result.length 如果等于1呢,此时 return[i]是什么??
四、 我不会写没有注释的js公用方法。从截图可见不论是公用底层方法还是业务代码方法整篇没有一句注释。我会想如下编写js关键代码。
五、ViewModel以已经是数据监控对象了,我不会在重复声明一个方法传递参数为自己(如截图中参数root)),然后在root.LoadData。自己已经是数据源 那就直接this.loadData不是就少绕两个弯子了
六、也是写本文的出发点:不会乱用call 和prototype。
从如上截图可以看到,代码中先后调用了 在ViewMode定义中 GriDView.Call(this),定义完之后又使用ViewMode.prototype=new GridView()。先写个简化demo看下结果:
什么?console.log执行了两次。换言之就是GridView构造函数执行了两次。 这个只是变现,我改改代码在给看个更神奇的。
这样就一目了然了吧。如果这还不明白,可以去查查 call,apply的资料,以及__proto__ 、prototype、constructor相关资料。还是多提一句,慎用prototype 他会改变对象 原型链。建议用js extends ,或者其他js方式,比如多年前我使用的这个:
《悟透JavaScript》之 甘露模型(新)
如果是我封装这个GridView,我会这样暴露给调用者调用。