javascript prototype 与 constrctor 的区别

我们的设计人员爱用冗余字段, 我数了数当前正在处理的这个功能的子表的字段数:

103个

不是我反对冗余,冗余是块好钢,但是要用到刀刃上.目前这种情况让我很头疼:

1,有很多冗余字段都是必填的, 如果只是对着原型做,可以很方便的分清哪些是从界面传到后台的;哪些是要从后台关联取出来的. 但是假如这个业务公布成一个WCF接口, 用接口开发的开发人员怎么能知道哪些是必须传入的? 重新写一套逻辑?

2,手累啊!100多个字段在后台一个一个敲出来,要时间啊!

3,我趋向在后台从内存或数据库等 不可能被篡改 的地方取出这些冗余数据, 但是取这些数据也是蛋疼的事啊! 我们的设计人员说很简单:从HTML传过来就是了!可是互联网是洪水猛兽啊!怎么能相信从前台传来的值?

页面要收集数据很多,主从表,3级/4级甚至5级联动的情况都有.
没用 knockoutjs 之前,我都是写一堆模板, 然后 clone , 改 name, 改 value, js 写的一大堆.
现在用 knockoutjs ,也是一大堆,但是优雅了许多.

knockoutjs 就三个字:可观察
如果对象不是可观察的,前台的修改反映不到 js 对象上, js对象上的修改也无法反应到前台页面上.

所以,不是简单的 json 就能满足的, 特别是还要用到 observableArray. 这个 array 里存的 每个对象 的 每个属性 还 必须是可观察的!

上面说了有100多个字段,用到的有三四十个,我不可能把每个字段都在 js 给写一遍.
怎么办呢?

我的方法: 先把 表 对应的 业务实体 序例化 成一个 json, 输出到页面, 赋予一个 js 变量, 然后循环这个 json 里的每个 key , 通过 prototype 扩展 js 里的"类". 这样就省事了很多.

代始如下:

 1     _.ExtendTypeFromJson = function (json, type, propertyWrap) {
 2         for (var item in json) {
 3             var value = json[item];
 4 
 5             if (typeof (propertyWrap) == "function")
 6                 type.prototype[item] = propertyWrap(value);
 7             else
 8                 type.prototype[item] = value;
 9         }
10     }

 

使用:

1 var tplData = @Html.Raw(JsonConvert.SerializeObject(tpl)) ;
2 var Port = function(){
3     this.IsCurrent = ko.observable(false);
4 }
5 ExtendTypeFromJson(tplData, Port);

 

其实,这样写是有问题的. 很多页面中, 都没有用 propertywrap 这个参数, 导致问题没有暴露出来.

今天在使用的时候,想把每个属性都扩展成可观察的,于是我这样写:

1 ExtendTypeFromJson(tplData, Port, function(v){
2     return ko.observable(v);
3 })

 

问题出来了, 声明的所有 Port 的实例,除 IsCurrent 外, 改动 任何一个实例 的 属性 的 值 , 所有实例 的 对应属性的 值都是一样的!

纠结了一会,没想通, 只知道问题出在 prototype 上.
于是换了一种实现方式:

 1     _.ExtendConstrctorFromJson = function (json, type, propertyWrap) {
 2 
 3         var __type = type;
 4         type = function () {
 5             __type.call(this);
 6 
 7 
 8             for (var item in json) {
 9                 var value = json[item];
10 
11                 if (typeof (propertyWrap) == "function")
12                     this[item] = propertyWrap(value);
13                 else
14                     this[item] = value;
15             }
16         }
17 
18         return type;
19     }

使用,注意是有返回值的:

1     Port = ExtendConstrctorFromJson(tplData, Port, function(v){
2         return ko.observable(v);
3     });  

在运行,终于OK了!

------------------------------------------------

QNMGB!GSQ

最近有位老伙计,被GSQ阴了. 我只能对老伙计说:

仕为知己者死!鸟为食亡.

他可以没有底线, 但是我们还是要像仕一样的抬着头!会拍马屁的永远只是一群鸟!