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 ,添加单击事件,让鼠标单击时恢复默认值;