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阴了. 我只能对老伙计说:

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

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

时间: 2024-10-16 12:22:00

javascript prototype 与 constrctor 的区别的相关文章

href="javascript:void(0);"与#的区别

将<a>标签设置为空链接有两种方式,第一种是href="#",另外一种是href="javascript:void(0);".两种方式都设置了标签为空链接,但是两种方式还是有些不同的地方. href="#",当点击的时候会跳转到页面的顶部,相当于点击了一个锚点,在URL的后面也会出现一个#的标识符号. 而href="javascript:void(0);"则是要执行一个javascript的表达式.void(0)不

JavaScript prototype 使用介绍

JavaScript prototype 使用介绍 用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱 用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访

JavaScript prototype 详解(对prototype 使用的一些讲解)

对JavaScript有一定了解的你,对jquery不陌生吧,那你看jQuery源代码的时候对prototype 也一定有见过,如果对prototype有疑问或者想更深入的去了解与使用它,欢迎你继续往下阅读. 最初的用法是, 为了避免方法在构造器里随机数据被实例化时而产生重复的副本  后来被用在"继承"上面了, 注意, JS语义上是没有继承的, 这里说的是人为的实现.对于下面对JavaScript中类型名称叫做"对象"."函数"."类型

Javascript:scrollWidth,clientWidth,offsetWidth的区别(转)

网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域高:document.body.offsetWeight: 网页可见区域高:document.body.offsetHeight; 网页正文全文宽:document.body.scrollWidth; 网页正文全文高:document.body.scrollHeight; 网页被卷去的高:document.body.scrollTop; 网页被

JavaScript发展史,与JScript区别,引入方式,数据类型,命名规范,命名推荐,解决命名冲突

今天真机调试的时候莫名其妙遇到了这样的一个问题: This product type must be built using a provisioning profile, however no provisioning profile matching both the identity "iPhone Developer" and the bundle identifier..... 具体如下图所示: 十分蛋疼, 发现不管是从网上下的demo, 还是自己的过程.凡事真机测试的时候都

JavaScript和HTML DOM的区别与联系

JavaScript和HTML DOM的区别与联系 区别: javascript JavaScript 是因特网上最流行的浏览器脚本语言.很容易使用!你一定会喜欢它的! JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. HTML DOM HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HTML 的一系列标准的对象,

[原创]javascript prototype 对象 函数 &lt;精简的美丽......&gt;

精简的美丽...... javascript prototype 对象 函数 在javascript中我们都知道创建一个对象使用如下代码var x = {}对象可以拥有属性和方法var x = {    value : 0,    add : function(a,b){        return a + b;    }} 而创建一个函数时,使用var fx = function(){}    <func1>或function fx(){}            <func2>

Javascript var 和 let 的区别

Javascript var 和 let 的区别 var 是函数块的全局变量. let 是代码块的局部变量. let 变量不会提升,如果先使用后定义会 undefind. 参考: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let 原文地址:https://www.cnblogs.com/F4NNIU/p/10721718.html

JavaScript prototype原型用法

JavaScript对象原型 所有JavaScript对象都从原型继承属性和方法. <!DOCTYPE html> <html> <meta charset="utf-8"> <title>js</title> <body> <h2>JavaScript 对象</h2> <p id="demo"></p> <script> functi