JavaScript 框架开发笔记 [三] 自定义HTML对像的扩展与继承

微软要封盗版了....都用Linux 吧....

即然要写自己的框架,自定义的组件,则是必然要存在的,问题是,如何在标准HTML对像的.Firefox 有Element 可以做相应的扩展.IE下则没有类似的东西, 用constructor,prototype 这类的东西也没什么门路..

最终用到了 javascript 的 构造函数返回值, JavaScript 在使用new 运算符构造一个对像的时候,若构造函数没有返回值,则返回一个由构造函数做为源型的对像,或有函数有返回值,那么new 运算符的返回结果则是函数的返回值;

如此,我们试一个没什么用处的例子,实现一个简单的对字符串进行加密和解密的文本框, 创建一个自己的文本框,当鼠标移入时,把里面的内容显示为Unicode值,当移出时,显示回原值;

function myInput(str){
var rv = document.createElement("input");
rv.type = "text";
rv.onmouseover = function(){
var v = this.value , n = "";
for(var i=0;i< v.length;i++){
n += v.charCodeAt(i)+",";
}
this.value = n;
this.onmouseout = function(){
var v = this.value.split(",") , n = "";
for(var i=0;i< v.length;i++){
n += String.fromCharCode(v[i]);
}
this.value = n;
}
}
rv.value = str;
return rv;
}

function myInput1(str){
var rv = new myInput(str);
rv.type = "text";
rv.def = str;
rv.onclick = function(){
this.value = this.def;
this.onmouseout = "";
}
rv.value = str;
return rv;
}
var r = new myInput("五a四b三c二d一e");
document.body.appendChild(r);
var r1 = new myInput1("一,二,三,四,五");
document.body.appendChild(r1);

嗯,就是这样,在脚本里添加了鼠标移入和鼠标移出两个事件的处理,并且直接进行了初值的设置; 一个简单的扩展;

在此后,我们仍可以继续在这个对像的基础上再次进行扩展,即实现了自定义HTML对像的继续;myInput1即继续扩展上面的myInput ,添加单击事件,让鼠标单击时恢复默认值;