无为

无为则可为,无为则至深!

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  190 Posts :: 291 Stories :: 258 Comments :: 0 Trackbacks
a、基本数据类型的包装对象。例如String Number Boolean.关于这三个包装对象这里不准备讨论。建议直接用var s=""; var i=1; var b=false;定义,包装类与java中的包装类不同。javascript中不要用包装类。
   b、javascript预定义的对象。Function Array Date   RegExp  Error等对象。这些对象使用比较简单,也不讨论了。
   c、用new Object()创建的对象。等同与var o={a:0,b:'s'};
   d、用自定义的构造函数创建的对象。function O(){};  var o=new O();
   e、dom模型定义的构造函数,浏览器为你创建的对象。用var o=document.getElementById();或其他方法获得。
   f、null也是对象。typeof(null)= object.undefined我理解为变量预编译的初始化值,而null是特殊的对象。如果一个变量=null,说明这个变量是个对象,但不是我上面提到的任何来源方式的对象。 如document.getElementById(页面中不存在的id);可以产生一个null对象。

   用typeof()  方法返回的是 object 的变量都是对象。 Function除外用new定义的不一定都是对象.


<SCRIPT LANGUAGE = " JavaScript "> 
<!-- 
Object.prototype.toString 
= function ()  return  'myToString'} ;
 var  o 
= new  Object();
o.name 
= 'zkj';
o.age 
= 25 ;
o.desc 
= function ()  return  '姓名:' + this .name + ',年龄:' + this .age} ;
 
for ( var  key  in  o)  {
    alert(key 
+ ':' + o[key] + ' type:' + typeof (o[key]))
  
if ( typeof (o[key]) == ' function ')  {
        alert(
'执行方法key:' + (o[key])())
 }
 
}
 
alert(o);
alert( 
new  Date());
 
// --> 
 </SCRIPT>     

<SCRIPT LANGUAGE = "JavaScript"> 
<!-- 
 Object.prototype.toString 
= function ()  return  'myToString'} ;
 function  person()  
{

}
 
 var  o 
= new  person();
o.name 
= 'zkj';
o.age 
= 25 ;
o.desc 
= function ()  return  '姓名:' + this .name + ',年龄:' + this .age} ;
 
for ( var  key  in  o)  {
    alert(key 
+ ':' + o[key] + ' type:' + typeof (o[key]))
  
if ( typeof (o[key]) == ' function ')  {
        alert(
'执行方法key:' + (o[key])())
 }
 
}
 
alert(o);
alert( 
new  Date());
 
// --> 
 </SCRIPT> 

看以上两段代码,估计很多人对后面的代码熟悉,也这样写了。可他们执行结果是一样的。如果你改变了javascript对象的原型对象后会有些区别。
在这我想提出以下几个问题:
    a、javascript对象也是单根继承的对象.但不是所有对象都继承自Object.如例子中的Date对象。
    b、千万别乱定义Object.prototype原型对象。prototype.js中加了个extends被人说了半天。但我们自己写类库时,千万别尝试改Object的prototype。
    c、别用javacript语言模仿java来写代码。想上面的,需要一个person的“类”,并不是非需要定义一个,注意javascript对象的属性是可以随意增加或删除的。并不象java那样在类中写死。
    d、就上面两段代码有什么区别呢?可以简单的说是person继承了Object”类“。javascript中对象的继承是用prototype来实现的,后面我们讨论prototype原型对象。
    e、那我们应用的时候到底是否该自己定义自己的构造函数(如person),还是直接使用Object呢?这是个复杂的问题,我个人来说喜欢多用Object.


开始之前我先明确个问题。如下代码

<SCRIPT LANGUAGE = "JavaScript"> 
<!-- 
Person.type 
= " person " ;
Person.writeType 
= function ()  {
    document.writeln( 
this .type);
}
 
 
// var Person = function(){}//如果这样定义会报错,可以看看前面文章,函数的预编译。 
  function  Person()  {} 
Person.writeType();
alert( typeof (Person));
 
for ( var  key  in  Person)  {
    alert(key);
}
 
 var  person 
= new  Person();
// --> 
</SCRIPT>
在这里Person是个函数,但我们还可以定义它的属性(type)。而Person有Object实例的特性(for in、可以定义属性),但Person不是Object的实例。

见如下代码:

<SCRIPT LANGUAGE = "JavaScript"> 
<!-- 
Object.prototype.toString 
= function ()  return  'myToString'} ;
 function  Person()  
{

}
 
 Person.prototype.toString 
= function ()  return  'Person'} ;

 var  o 
= new  Person();
alert(o);
alert(Person)
Person.toString 
= function ()  return  'Person toString'} ;
alert(Person)
// --> 
</SCRIPT> 
 

我理解function返回的数据类型是和Object同等级的数据类型。它有Object实例(new Object())的一些特性,但它不是Object的实例,因为它没有继承Object.prototype.toString=function(){return 'myToString'};但我们Person.toString=function(){return 'Person toString'};改变了覆盖了方法。
在《javascript权威指南》中,作者用这个特性实现了“类方法、类变量”static方法,与java中不同,这些方法不能用new Person()来调用。

Object                   function             同等级 function可以定义属性,可以(for in)

new Object()        new function()    同等级 new function()继承了Object的prototype,                                                      也会继承 function的prototype

小例子。看了原型对象就很清楚了啊。 原型对象最好在代码最前面定义,很容易被覆盖啊!

<SCRIPT LANGUAGE = "JavaScript"> 
<!-- 
  
var  Person = function  ()  {
     
this .name = 'Person的构造函数中属性name';
     
this .getName = function ()  {
          
return   this .name;
 }
 
  
// this.toString=function(){}  //你把注释去掉看看效果 
 }
 
Person.name 
= " Person " ;
Person.toString 
= function ()  return   this .name + '的类方法'} ; // 我可以用this啊 
 alert(Person.toString()) // 类方法 
 var  o = new  Person();
alert(o.getName()); 
// 构造函数中的方法 
 alert(o); // 访问toString方法   先找  对象中 构造函数中   Person的prototype中       Object的prototype中 
  Object.prototype.toString = function ()  return  'Object的prototype中的toString'} ;
alert(o); 
// Object的prototype中 
  Person.prototype.toString = function ()  return  'Person的prototpe中的toString'} ;
alert(o);
o.toString 
= function ()  return  '我覆盖了toString方法了啊'} 
alert(o);
alert('我不能访问前面的toString了。如果有super就好了!');
 
// 其实还是可以访问到被覆盖的原型的。那样太复杂了。 
//
 --> 
</SCRIPT> 


原型对象prototype是Object或与之同等级的对象如(function,Number)的一个属性,protorype是个对象。typeof的值是object。

如果看了上一小节的最后一个例子,对自定义的“类”应该比较熟悉了。
在javascript中,可以说没有方法,因为函数和字符串一样也是种数据类型,但类中的函数可以用this关键字。下面我说的类的属性可以是方法,也可以指字段。
在一个自定义“类”中有中有几个地方可以定义属性。
   a、函数名中直接定义。  如Person.name。在这定义相当于类名的属性。静态的,访问的时候必须用Person.name来访问,不能用new Person().name访问,也访问不到。
   b、构造函数的this.中。当你用new function()时,这些属性就是你所持对象的属性。用new Person().属性  来访问。
   c、构建好对象以后,给对象增加属性。和构造函数中的属性使用类似。
   d、函数名的prototype中
   e、父类或Object 的prototype中。

(1)对象属性优先级
通过运行以下代码,我们访问对象属性优先级如下:c>b>d>e
c种属性必须在定义以后访问才有效。a种属性实例访问不到。
javascrpt语言预定义的属性不能用for in 得到。如toString

<SCRIPT LANGUAGE = "JavaScript"> 
<!-- 
 Object.prototype.toString 
= function ()  {} ;
Object.prototype.name 
= " Object " ;
Object.prototype.porotype_name 
= " oObject " ;
Object.prototype.parent_name 
= " pObject " ;

Person.prototype.name 
= " Person " ;
Person.prototype.porotype_name 
= " oPerson " ;
 function  Person()  
{
     
this .name = 'Person实例';
}
 
 var  o 
= new  Person();
 
for ( var  key  in  o)  {
    alert(key 
+ ':' + o[key]);
}
 
// --> 
</ SCRIPT > 

(2)prototype属性是只读的
看如下代码,你不要试图通过变量改变原型对象的属性。你也不可能改变,你只会通过c模式给对象增加一个属性。
另外原型对象是所有实例共享的。理论上也不可以改变。

<SCRIPT LANGUAGE ="JavaScript"> 
<!-- 
Person.prototype.name 
= " Person " ;
 function  Person()  
{
  
}
 
 var  o 
= new  Person();
 var  o1 
= new  Person();
alert(
'o.name:' + o.name + '  ' + 'o1.name:' + o1.name);
o.name 
= 'zkj';
alert(
'o.name:' + o.name + '  ' + 'o1.name:' + o1.name);
// --> 
</SCRIPT> 


<SCRIPT LANGUAGE = "JavaScript"> 
<!-- 
 Object.extend  
=   function (destination, source)   {
   
for  (property  in  source)   {
    destination[property]  
=  source[property];
  }
 
   
return  destination;
}
 
 
  function  Man()  
{
     
this .name = 'zkj';
}
 
Man.prototype.type 
= '男人';
Man.prototype.getType 
= function ()  {
     
return   this .type;
}
 
  function  Woman()  
{} 
 
Object.extend(Woman.prototype,Man.prototype);
 var  man 
= new  Man();
 var  woman 
= new  Woman();
alert(man.getType());
alert(man.name);
alert(woman.getType());
alert(woman.name);
// --> 
</SCRIPT> 
我只能说javascript的继承是模拟实现的。和java,c++中是不同的。是依靠prototype实现的。
我个人从来不用javascript的“继承”,始终认为javascript实现的继承不是真正的继承。可能是受java”毒害“够深。
在javascript中,我把继承分为两类: 类继承,对象继承。
(1)、prototype.js中的继承
prototype.js中用如下代码实现继承。我认为只是个属性拷贝过程。

Object.extend  =   function (destination, source)   {
   
for  (property  in  source)   {
    destination[property]  
=  source[property];
  }
 
   
return  destination;
}
 

//Object.prototype.extend 感觉这句话没必要,太模仿java了,想让对象实例直接继承。
    a、prototype.js中的类继承

prototype.js  1.3 . 1 
     String.prototype.extend(  
{
      stripTags:  function ()   
{
       
return   this .replace( /< \ /? [ ^> ] +>/ gi, '');
    }
 ,

    escapeHTML:  function ()   
{
       var  div  
=  document.createElement('div');
       var  text  
=  document.createTextNode( this );
      div.appendChild(text);
       
return  div.innerHTML;
    }
 ,

    unescapeHTML:  function ()   
{
       var  div  
=  document.createElement('div');
      div.innerHTML  
=   this .stripTags();
       
return  div.childNodes[ 0 ].nodeValue;
    }
 
    }
 );

    我把这类型的继承叫做类继承,直接把你自己写的对象属性拷贝到原型对象中去。

<SCRIPT LANGUAGE = "JavaScript"> 
<!-- 
 Object.extend  
=   function (destination, source)   {
   
for  (property  in  source)   {
    destination[property]  
=  source[property];
  }
 
   
return  destination;
}
 
 
  function  Man()  
{
     
this .name = 'zkj';
}
 
Man.prototype.type 
= '男人';
Man.prototype.getType 
= function ()  {
     
return   this .type;
}
 
  function  Woman()  
{} 
 
Object.extend(Woman.prototype,Man.prototype);
 var  man 
= new  Man();
 var  woman 
= new  Woman();
alert(man.getType());
alert(man.name);
alert(woman.getType());
alert(woman.name);
// --> 
</SCRIPT> 

看了以上代码,可能你会明白。直接拷贝类的原型对象确实可以实现某种概念上的继承。
但要注意:在继承体系中,Man的原型对象属性方法最好不要用Man的实例属性(name),因为可能Woman中并没有定义实例属性name;也最好不要用Man)原型对象属性字段(type),虽然type也被拷贝过来了,但值还是”男人“。
虽然有解决办法,但javascript没有很好的语法检查工具,你用prototype.js的类继承时小心处理。

b、prototype.js中的对象继承

prototype.js 1.3.1
this.options = {
      method:       'post',
      asynchronous: true,
      parameters:   ''
    }.extend(options || {});

这个应用比较简单,典型的对象之间属性拷贝覆盖。
总结:关于prototype.js中继承的实现,我们当成javascript对象的属性拷贝可能在应用中更好理解。建议大家仔细读读prototype.js代码可能体会更深。模仿prototype.js中extend的应用。感觉var Insertion = new Object(); 的实现比较经典。

(2)、dojo-0.2.0-ajax中的继承

dojo.inherits  =   function (subclass, superclass)  {
  
if ( typeof  superclass  !=  ' function ')  
  dojo.raise( 
" superclass:  " + superclass + "  borken " );
 }
 
 subclass.prototype  
=   new  superclass();
 subclass.prototype.constructor  
=  subclass;
 subclass.superclass  
=  superclass.prototype;
  
//  DEPRICATED: super is a reserved word, use 'superclass' 
  subclass['super']  =  superclass.prototype;
     }
 

dojo的继承实现比较正统,也是《javascript权威指南》中的实现方法。注意最后一句代码可以实现子类访问父类原型对象的方法。

<SCRIPT LANGUAGE = "JavaScript"> 
 
<!-- 
 
  function  Man()  
{
     
this .name = 'zkj';
}
 
Man.prototype.type 
= '男人';
Man.prototype.getType 
= function ()  {
     
return   this .type;
}
 
  function  Woman()  
{} 
 
Woman.prototype  
=   new  Man();
Woman.prototype.constructor  
=  Woman;
Woman.superclass  
=  Man.prototype;
 
//  DEPRICATED: super is a reserved word, use 'superclass' 
 Woman['super']  =  Man.prototype;
Woman.prototype.type 
= '女人';

 var  man 
= new  Man();
 var  woman 
= new  Woman();
alert(man.getType());
alert(man.name);
alert(woman.getType());
alert(Woman.superclass.getType());
alert(woman.name);

// --> 
</SCRIPT> 

看看代码,感觉混乱。
dojo一直没时间仔细读读代码。这部分详细讨论待续。
(3)、总结
关于javascript的继承实现,建议一般不要使用,感觉很乱,代码可读性较差。一般也没有使用必要。详细在《9、javascript对象使用指南》中讨论。


javascript所有对象都继承自Object类。以下是Object类的一些属性。原型对象

的一些属性。

1、constructor属性
从javascript1.1开始,每个对象都有这个属性,它指向用来初始化改对象的构造

函数

 

<SCRIPT LANGUAGE="JavaScript">
<!--
function Person(){}
var o=new Person();

alert(
typeof(Person.constructor));
alert(o.constructor);
alert(Person.constructor);
alert(Function.constructor);
alert(Object.constructor)

alert(
new Date().constructor);
alert(Date.constructor);


function Man(){

}

Man.prototype
=new Person();
alert(Man.constructor);
o
=new Man();
alert(o.constructor)
Man.prototype.constructor
=Man;
alert(o.constructor)
//-->
</SCRIPT>

 

如以上代码,可以知道
a、constructor的类型是函数;
b、javascript内部实现了很多函数,如Object,Date都是函数由Function得到的


c、用原型对象实现的继承中,也要设置子类的constructor。如果你的程序中用

到了constructor,可能会出错。
2、toString()方法
相当于java Object类中toString方法。你alert()  + 等操作中就会调用这个方

法。 var s='1'+'2',会自动把'1'  '2'  转化成String对象在执行。

但数组定义自己的toString方法。alert(Array.prototype.toString)

如果对象或子类要调用父类的方法可以

 

<SCRIPT LANGUAGE="JavaScript">
<!--
alert([
1,2,3].toLocalString())
alert(Object.prototype.toString.apply([
1,2,3]));
//-->
</SCRIPT>

 

3、toLocalString()方法
ECMAScript v3 javascript1.5中定义了这个方法。返回局部化的值。偶还不知道

什么用法。
4、valueof()
当javascript与要将一个对象转化成字符串之外的原始类型时调用它。

5、hasOwnProperty()方法
《javascript权威指南》说如果是非继承的属性返回true.但下列代码反映,它检

验对象的实例属性。对原型属性不会返回。

 

<SCRIPT LANGUAGE="JavaScript">
<!--
function Person(name){
    
this.name=name;
}

Person.prototype.setAge
=function(age){
    
this.age=age;
}

Person.prototype.toString
=function(){
    
return 'name:'+this.name+' age:'+this.age;
}

var o=new Person('zkj');
o.setAge(
25);
alert(o)
alert(o.hasOwnProperty(
"name"));
alert(o.hasOwnProperty(
"age"));
alert(o.hasOwnProperty(
"setAge"));
alert(o.hasOwnProperty(
"toString"));

alert(Person.prototype.hasOwnProperty(
"setAge"));
//-->
</SCRIPT>



6、propertyIsEnumerable
《javascript权威指南》如果用能 for( in )枚举的属性,这个方法返回true;
以下代码说明《javascript权威指南》是错的。自己定义的原型对象属性可以枚

举,但返回false

 

<SCRIPT LANGUAGE="JavaScript">
<!--
function Person(name){
    
this.name=name;
}

Person.prototype.setAge
=function(age){
    
this.age=age;
}

Person.prototype.toString
=function(){
    
return 'name:'+this.name+' age:'+this.age;
}

var o=new Person('zkj');
o.setAge(
25);
alert(o.propertyIsEnumerable('setAge'));
var desc='';
for(var key in o){
    desc
+=key+'  ';
    
if(o.hasOwnProperty(key)){
        desc
+=' 是实例对象 ';
 }
else{
        desc
+=' 不是实例对象 ';
 }

 
if(o.propertyIsEnumerable(key)){
        desc
+=' 能被枚举 ';
 }
else{
        desc
+=' 不能被枚举 ';
 }


 desc
+='\r\n';
}

alert(desc);

//-->
</SCRIPT>



7、isPrototypeOf方法
《javascript权威指南》如果调用对象是实际参数指定的对象的原型对象返回

true. 看代码吧。
居然alert(Object.prototype.isPrototypeOf(Person));//true也是true.搞不懂

 

<SCRIPT LANGUAGE="JavaScript">
<!--
function Person(name){
    
this.name=name;
}

Person.prototype.setAge
=function(age){
    
this.age=age;
}

Person.prototype.toString
=function(){
    
return 'name:'+this.name+' age:'+this.age;
}

var o=new Person('zkj');
o.setAge(
25);
alert(Person.prototype.isPrototypeOf(o));
//true
alert(Person.isPrototypeOf(o));//false
alert(o.isPrototypeOf(Person.prototype));//false
alert(Function.prototype.isPrototypeOf(Person));//true
alert(Object.prototype.isPrototypeOf(Person));//true
//
-->
</SCRIPT>


 

8、总结
看《javascript权威指南》前,就知道toString方法。现在知道了些其他的方法

,但让我更加混乱,《javascript权威指南》讲的也有错误。开发中建议大家除

了toString,其他属性方法不要覆盖也不要使用了。除了对这些方法十分清楚。就

我知道的javascript开源框架中好象没用到这些。


1、废话
   这部分将要描述浏览器为我们创建的对象。就是大家熟悉的window,document

等。一般书上都叫对象层次和文档对象模型。用dom标准来说,一般浏览器都实现

了0级DOM,关于DOM标准我感觉知道0级就可以了。对于DOM标准W3C早已定义了1级

,2级,三级也在标准化,问题是各个浏览器不完全实现,尤其是IE的事件模型,

完全不和DOM一致。(不过prototype.js已经做了很好的封装)
    我这里不会讲dom接口,更不会讲各个浏览器的如何实现这些接口及区别。(

我也没这能力)。而是要猜测一下浏览器是怎么用javascript定义这些接口或类

的。(注意是猜测,个人理解)

2、引子

<SCRIPT LANGUAGE="JavaScript">
<!--
alert(document);
alert(typeof(document));
//alert(Document);//出错
function desc(obj){
  var ret='';
  for(var key in obj){
    ret+=key+':'+obj[key]+'</br>';
  }
  return ret;
}
document.writeln(desc(document));
//-->
</SCRIPT>

以上简单的javascript代码,不知大家提出过疑问没有。
首先,document是个javascript对象,谁创建了它。;document的类是什么

(function Document(){....} 可能是new Document()创建了它);document有些

什么属性或方法。这些对象与html关系是什么。这些对象与dom标准有什么关系。

接下来将试着回答这些问题。我会侧重讲述我的理解思路,而不是具体哪个方法

,接口。

3、一个简单的例子的深入理解

<SCRIPT LANGUAGE="JavaScript">
<!--
    alert(document);//存在
    alert(this.document==window.document);//true
//-->
</SCRIPT>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
    alert(document.getElementById('xm'));//null
</SCRIPT>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
    alert(document.getElementById('xm'));//null
</SCRIPT>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
    alert(document.getElementById('xm'));//null
</SCRIPT>
<input type="text" id="xm">
<SCRIPT LANGUAGE="JavaScript">
    alert(document.getElementById('xm'));//存在
</SCRIPT>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
    alert(document.getElementById('xm'));//存在
</SCRIPT>
</HTML>

上面代码说明几个问题:
a、window\this就是我在变量篇里面提到过的窗体的全局对象,document是它的

一个属性,也叫全局属性。
b、window,document在html最前面已经存在了。我们可以随处使用document对象


c、对于输入框按钮这类html标记的javascript对象只有在解释过以后才能访问到

。当然我们编码用到这些对象时,都在body.onload或鼠标触发,一般不会出错。
d、例子中的document.getElementById('xm')javascript对象和我们自己创建的

javascript对象有什么区别呢?从应用角度看没有区别,只是自己定义的对象由

自己new来初始化,而document.getElementById('xm')有浏览器为我们初始化对

象,我们直接用方法得到句柄就可以了(有多种方法)。
e、我们怎么知道这些对象的用法呢?查看w3c DOM参考吗?我认为不用。

4、浏览器为我们创建的对象与我们自己定义的对象的区别。

<input type="text" id="xm" value="aaa">
<INPUT TYPE="button" value='click me' onclick="alert

(document.getElementById('xm').value);
alert(document.getElementById('myxm').value);">
<br>
<SCRIPT LANGUAGE="JavaScript">
<!--
function desc(obj){
  var ret='';
  for(var key in obj){
    ret+=key+':'+obj[key]+'</br>';
  }
  return ret;
}
function MyText(id,value){
    this.id=id;
 this.outHtml='<input type=text id='+id+' value='+value+'>';
 this.toString=function(){
        return this.outHtml;
 }
 //...
 //...
 //...
}
//document.writeln(desc(document.getElementById('xm')));
var myText=new MyText('myxm','zkj');
document.writeln(myText);
//-->
</SCRIPT>

希望你仔细的看看上面代码的执行结果。可能你会得到更震撼的想法来。暂时我

有以下几个感想:
a、我们自己也可以写一个界面控件,如果把属性建立全的话,完全可以复原浏览

器的内建类。
b、反过来,对于浏览器为我们创建的对象,我们可以当成自己的对象一样使用。

看看prototype.js中,使用了内建对象的方法。

escapeHTML: function() {
    var div = document.createElement('div');
    var text = document.createTextNode(this);
    div.appendChild(text);
    return div.innerHTML;
  },
  unescapeHTML: function() {
    var div = document.createElement('div');
    div.innerHTML = this.stripTags();
    return div.childNodes[0] ? div.childNodes[0].nodeValue : '';
  },
c、大家可以打开描述注释,看看<input >到底包含哪些属性和方法。注意

outerHTML属性的值是什么,在网页上表示什么。可以看出javascript对象的

outerHTML属性就是html(xhtml)规范中的标签。这样给了我们写javascriptUI控

件的新思路,一个控件就是一个javascript对象(其实很多人都这样做了,但好

象都是innerHtml等等)。可以象asp.net或jsf那样编写组合控件。
大家可以看一下ActiveWidgets代码(与我的思路有些差别),我认为这种基于

html标签的UI控件无论性能、开发人员使用难度上都不错。
对于dojo的widget这种做UI做法我个人不很赞同,完全用div,图片实现了一便

html的UI标签。性能不好,开发人员上手不容易,美工更不能修改,另外图片都

是定死的,界面也比较单调,也不好修改。

对于自己实现javascript控件,我认为在htmlUI基础上就可以了,毕竟自己实现

存在的UI难度不小。把html的标准UI组合成新的控件。例如,我们可以很容易的

实现一个包括  (登陆 密码 验证码 确认)  的组合javascript控件


d、dom标准与浏览器对象
打开document.writeln(desc(document.getElementById('xm')));,你可以看到<

input type="text">的所有属性。这些属性 ”dom标准“,之所以加引号,DOM标

准我们有很多误解,认为DOM标准是个什么高不可及、不可违抗的、复杂的东西。
首先:我们接触了静态HTML,xml,有了DOM对象模型(熟悉java的都知道java的实

现),但javascript语言的特点使不能象java,c++那样来实现DOM对象模型。例如

input 继承了 HTMLElement,HTMLElement定义的一堆属性。按照dom标准,所有浏

览器实现 input javascript对象时都必须把这些属性加上,这就叫符合标准。其

实说白了:DOM标准就是浏览器为我们实现的javascript代码的总和。(可以浏览

器厂商不完全实现)
看protorype.js的代码
为了支持多了浏览器,定义下面代码。说明有的浏览器网页全局变量里有Element

,Event,有些浏览器没给我们定义。所以只能这样了。

if (!window.Element) {
  var Element = new Object();
}
if (!window.Event) {
  var Event = new Object();
}

还有用AJAX技术时
'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0', 其实很简

单,就是浏览器中有没有这些javascript实现了。所有大家在DWR框架中用iframe

实现了一个javascript  XMLHTTP类。

e、与xhtml标准的矛盾
在xhtml中,<input type="button"> 双引号是必须的,但outerHTML属性中却没

双引号。还没想明白。

5、浏览器为我们创建了几类对象
a、全局对象window或this。其实javascript的全局变量、全局方法(如

Math,setTimeout())都可以由window对象访问。另外浏览器的特殊函数或属性。

(如window.status,window.alert())
b、document对象。包括图片,applet,form等属性,可能我们用的最多。也是访

问我们可见的元素的入口(document.getElementById),也提供了动态创建html

标签的方法。如var t=new Text("test");没有这样方法,只能 var

t=document.creatTextNode("test");都由document提供的工厂方法来创建。
c、页面中的html标签,当解释执行过,浏览器会为你初始化对象,放到document

对象中去。

6、对DOM标准的认识
DOM标准定义了接口,没有定义类。浏览器为我们实现了这些接口,实现这些接口

的类我们也看不见。所以这里接口的含义和java中接口的含义不同。
例如我们常用的document对象
DOM标准中定义了个Document接口,实现HTMLElemnt接口。
Document接口和HTMLElemnt接口在DOM标准中定义了很多属性和方法。
注意我们使用的document对象是浏览器为我们创建的javascript对象,到底

document对象有哪些属性和方法是有浏览器决定的,而不是由DOM标准决定的。
在这里javascript世界里没有继承概念,所以DOM标准定义的接口,对于我们开发

人员来说只能当成一个参考手册,象javadoc。

7、如何写出跨浏览器的javascript代码
   这难度大了点.但说穿了,只要我们用javascript代码把浏览器没符合DOM标准

的代码补全就好了。但DOM标准之大不是一般人能全部搞清楚的,浏览器厂商也使

坏,让这个工作更难了。   现在好象有个误区,人们写javascript都喜欢按照

DOM标准来写。如果我们按照各个浏览器实现DOM标准的交集写代码的话,可能会

更好点。




凡是有该标志的文章,都是该blog博主Caoer(草儿)原创,凡是索引、收藏
、转载请注明来处和原文作者。非常感谢。

posted on 2006-06-19 10:35 草儿 阅读(440) 评论(0)  编辑  收藏 所属分类: ajax

只有注册用户登录后才能发表评论。


网站导航: