首页 > 代码库 > javascript prototype 与 constrctor 的区别
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 =http://www.mamicode.com/ 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 =http://www.mamicode.com/ @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 =http://www.mamicode.com/ json[item];10 11 if (typeof (propertyWrap) == "function")12 this[item] = propertyWrap(value);13 else14 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阴了. 我只能对老伙计说:
仕为知己者死!鸟为食亡.
他可以没有底线, 但是我们还是要像仕一样的抬着头!会拍马屁的永远只是一群鸟!
javascript prototype 与 constrctor 的区别