分类归档: Javascript

【原创】一个简单数据存取的对象

最近刚好要做个有联动的分类选择,就写了下面这个东西,令人郁闷的javascript

cat = {
data : function (code,name,price,discount){
    this.code = code;
    this.name = name;
    this.price = price;
    this.discount = discount;
},
get : function(code){
    if (!code || code.length % 3 != 0 || code.length < 3)
    {
      return false;
    }
    if(cat.getlevel(code.length / 3)[code]){
      return cat.getlevel(code.length / 3)[code];
    } else {
      return false;
    }
},

add : function (code,name,price,discount){
    if(!cat["lv_" + code.length / 3 ]){
      cat["lv_" + code.length / 3 ]     = new Object();
      cat["lv_" + code.length / 3 ].len = 0;
    }
    cat["lv_" + code.length / 3 ][code] = new cat.data(code,name,price,discount );
    cat["lv_" + code.length / 3 ].len++;
},

getlevel : function (level){
    if(cat["lv_" + level]){
      return cat["lv_" + level]
    } else {
      return false;
    }
},

getsub : function( code ){
    code = new String(code);
    datas = new Object();
    level = code.length / 3 + 1;
    sub   = cat.getlevel(level);
    count = 0;
    for(var item in sub){
      if(sub[item].code){
        if(sub[item].code.substr(0,code.length) == code ){
          datas[sub[item].code] = sub[item];
          count++;
        }
      }
    }
    datas.len = count;
    if(count == 0){return false;}
    return datas;
}
}

附部份测试数据

cat.add(‘001′,’魔兽世界’);
cat.add(‘001001′,’一区’);
cat.add(‘001001001′,’伊瑟拉’);
cat.add(‘001001001001′,’联盟’,’0.2617′,’1.00′);
cat.add(‘001001001002′,’部落’,’0.6229′,’1.00′);
cat.add(‘001001002′,’卡德罗斯’);
cat.add(‘001001002001′,’联盟’,’0.3297′,’1.00′);
cat.add(‘001001002002′,’部落’,’0.7794′,’1.00′);
cat.add(‘001001003′,’卡扎克’);
cat.add(‘001001003001′,’联盟’,’0.9082′,’1.00′);
cat.add(‘001001003002′,’部落’,’0.2026′,’1.00′);
cat.add(‘001001004′,’回音山’);
cat.add(‘001001004001′,’联盟’,’0.2884′,’1.00′);
cat.add(‘001001004002′,’部落’,’0.8341′,’1.00′);
cat.add(‘001001005′,’国王之谷’);

还是感觉好麻烦 做联动的时候还是很郁闷啊····没有什么好办法

我太笨了

Read: 819

[转][MS]使用JS读取XML文件

我的xml文件Login.xml如下.

<?xml version="1.0" encoding="utf-8" ?>
<Login>
    
<Character>
        
<C Text="热血" Value="0"></C>
        
<C Text="弱气" Value="1"></C>
        
<C Text="激情" Value="2"></C>
        
<C Text="冷静" Value="3"></C>
        
<C Text="冷酷" Value="4"></C>
    
</Character>
    
<Weapon>
        
<W Text="光束剑" Value="0"></W>
        
<W Text="光束配刀" Value="1"></W>
    
</Weapon>
    
<EconomyProperty>
        
<P Text="平均型" Value="0"></P>
        
<P Text="重视攻击" Value="1"></P>
        
<P Text="重视敏捷" Value="2"></P>
        
<P Text="重视防御" Value="3"></P>
        
<P Text="重视命中" Value="4"></P>
    
</EconomyProperty>
</Login>

现在我需要对这个xml文件的内容进行操作.
首先,我们需要加载这个xml文件,js中加载xml文件,是通过XMLDOM来进行的.

// 加载xml文档
loadXML    = function(xmlFile)
{
    
var xmlDoc;
    
if(window.ActiveXObject)
     {
         xmlDoc    
= new ActiveXObject(‘Microsoft.XMLDOM’);
         xmlDoc.async    
= false;
         xmlDoc.load(xmlFile);
     }
    
else if (document.implementation&&document.implementation.createDocument)
     {
         xmlDoc    
= document.implementation.createDocument(”, ”, null);
         xmlDoc.load(xmlFile);
     }
    
else
     {
        
return null;
     }
    
    
return xmlDoc;
}

xml文件对象出来了, 接下去我就要对这个文档进行操作了.
比如说,我们现在需要得到节点Login/Weapon/W的第一个节点的属性,那么我们可以如下进行.

// 首先对xml对象进行判断
checkXMLDocObj    = function(xmlFile)
{
    
var xmlDoc    = loadXML(xmlFile);
    
if(xmlDoc==null)
     {
         alert(‘您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题
!‘);
         window.location.href
=/Index.aspx’;
     }
    
    
return xmlDoc;
}

// 然后开始获取需要的Login/Weapon/W的第一个节点的属性值
var xmlDoc    = checkXMLDocObj(‘/EBS/XML/Login.xml’);
var v    = xmlDoc.getElementsByTagName(‘Login/Weapon/W’)[0].childNodes.getAttribute(‘Text’)

而我在我的程序中的写法是这样子的,当然我在程序中的写法是已经应用到实际中的了.一并给出来,以供查看

initializeSelect    = function(oid, xPath)
{
    
var xmlDoc    = checkXMLDocObj(‘/EBS/XML/Login.xml’);
    
var n;
    
var l;
    
var e    = $(oid);
    
if(e!=null)
     {
         n    
= xmlDoc.getElementsByTagName(xPath)[0].childNodes;
         l    
= n.length;
        
for(var i=0; i<l; i++)
         {
            
var option    = document.createElement(‘option’);
             option.value    
= n[i].getAttribute(‘Value’);
             option.innerHTML    
= n[i].getAttribute(‘Text’);
             e.appendChild(option);
         }
     }
}

上面的访问代码中,我们是通过xmlDoc.getElementsByTagName(xPath)来进行的.
还可以通过xmlDoc.documentElement.childNodes(1)..childNodes(0).getAttribute(‘Text’)进行访问.
一些常用方法:
xmlDoc.documentElement.childNodes(0).nodeName,可以得到这个节点的名称.
xmlDoc.documentElement.childNodes(0).nodeValue,可以得到这个节点的值. 这个值是来自于这样子的xml格式:<a>b</b>, 于是可以得到b这个值.
xmlDoc.documentElement.childNodes(0).hasChild,可以判断是否有子节点

根据我的经验,最好是使用getElementsByTagName(xPath)的方法对节点进行访问,因为这样子可以直接通过xPath来定位节点,这样子会有更好的性能.

Read: 859

JavaScript中类的定义[2]

4.使用prototype原型对象定义类成员

使用prototype对象来定义类成员可以避免每实例化一个对象就创建一次类成员的缺点。 

new一个function时,prototype对象的成员将自动赋给所创建的对象。

Demo2

是一个JavaScript对象,可以为prototype对象添加、修改、删除方法和属性。从而为一个类添加成员定义。   

<script language=”JavaScript” type=”text/javascript”>
<!– //定义一个只有一个属性caption的类 
function cls(){  
this.caption=1;  
}  
//使用函数的prototype属性给类定义新成员 
cls.prototype.showcaption = function(){   alert(this.caption);  }  
//创建cls的一个实例 
var obj=new cls();
//调用通过prototype原型对象定义的showcaption方法 
obj.showcaption();
//–>
</script>   

prototype

了解了函数的prototype对象,现在再来看new的执行过程。   

1>创建一个新的对象,并让this指针指向它;   

2>将函数的prototype对象的所有成员都赋给这个新对象;   

3>执行函数体,对这个对象进行初始化操作;   

4>返回(1)中创建的对象。   

prototype对象的所有成员初始化过程发生在函数体(构造器)执行之前,所以可以在函数体内部调用prototype中定义的属性和方法。

Demo3

<script language=JavaScript type=text/javascript
!– //定义一个只有一个属性caption的类
function cls(){  this.caption=1;  this.showcaption(); }
//使用函数的prototype属性给类定义新成员
cls.prototype.showcaption=function(){  alert(this.caption); }
//创建cls的一个实例
var obj1=new cls(); //–>
/script>  

 

和上一段代码相比,这里在cls的内部调用了prototype中定义的方法showcaption,从而在对象的构造过程中就弹出了对话框,显示caption属性的值为1  

需要注意,原型对象的定义必须在创建类实例的语句之前,否则它将不会起作用。

Demo4

showcaption方法,就是因为该方法的定义是在实例化一个类的语句之后。   

<script language=”JavaScript” type=”text/javascript”>
<!– //定义一个只有一个属性caption的类
function cls(){  
this.caption=1;  
this.showcaption();
}
//创建cls的一个实例
var obj=new cls();
//在创建实例的语句之后使用函数的prototype属性给类定义新成员,只会对后面创建的对象有效
cls.prototype.showcaption=function(){  alert(this.caption); }
//–>
</script>   

这段代码将会产生运行时错误,显示对象没有

由此可见,prototype对象专用于设计类的成员,它是和一个类紧密相关的。

除此之外,prototype还有一个重要的属性:constructor,表示对该构造函数的引用,例如:

function cls(){  
alert(1);
}
cls.prototype.constructor(); //调用类的构造函数

  

这段代码运行后将会出现对话框,在上面显示文字“1”,从而可以看出一个prototype是和一个类的定义紧密相关的。

实际上:cls.prototype.constructor===cls  

Read: 776

JavaScript中类的定义[3]

5.较好的自定义类的方式

前面已经介绍了如何定义一个类,如何初始化一个类的实例,且类可以在function定义的函数体中添加成员,又可以用prototype定义类的成员,编程的代码显得混乱。

如何以一种清晰的方式来定义类呢?下面给出了一种类的实现模式。   

JavaScript中,由于对象灵活的性质,在构造函数中也可以为类添加成员,在增加灵活性的同时,也增加了代码的复杂度。

为了提高代码的可读性和开发效率,可以采用这种定义成员的方式,而使用prototype对象来替代,这样function的定义就是类的构造函数,符合传统意义类的实现:类名和构造函数名是相同的。

例如:

cls.prototype,不仅代码体积变大,而且易读性还不够。为了进一步改进,可以使用无类型对象的构造方法来指定prototype对象,从而实现类的成员定义:

function cls(){
 //构造函数
}
//成员定义
cls.prototype.someProperty=”sample”;
cls.prototype.someMethod=function(){  //方法实现代码 }  

虽然上面的代码对于类的定义已经清晰了很多,但每定义一个属性或方法,都需要使用一次

cls,构造函数直接用类名来实现,而成员使用无类型对象来定义,以列表的方式实现了所有属性和方法,并且可以在定义的同时初始化属性的值。这也更象传统意义面向对象语言中类的实现。只是构造函数和类的成员定义被分为了两个部分,这可看成JavaScript中定义类的一种固定模式,这样在使用时会更加容易理解。   

//定义一个类cls
function cls(){  //构造函数 }
//通过指定prototype对象来实现类的成员定义
class1.prototype={  someProperty:”sample”, someMethod:function(){   //方法代码  },  
…//其他属性和方法.
}   

上面的代码用一种很清晰的方式定义了

注意:在一个类的成员之间互相引用,必须通过this指针来进行,例如在上面例子中的someMethod方法中,如果要使用属性someProperty,必须通过this.someProperty的形式,因为在JavaScript中每个属性和方法都是独立的,它们通过this指针联系在一个对象上。

Read: 877

JavaScript中类的定义

      1.类的定义机制  

1>function关键字定义

2>function内部通过this指针定义的成员。

3>function类似于其他语言中的构造函数(constructor)

demo1

function cls()
{
 
     this.txt = “111”;
 
     this.display = function(){ alert(“this is a test method”); }
}
var obj=new cls();
 

2.理解new创建对象的过程

通过new cls()获得对象obj,对象obj便自动获得了属性txt和方法display  

new 创建对象过程:  

1>当解释器遇到new操作符时便创建一个空对象;   

2>开始运行cls这个构造函数,并将其中的this指针都指向这个新建的对象;   

3>当给对象不存在的属性赋值时,解释器就会为对象创建该属性。

例如在cls中,当执行到this.txt=”111″这条语句时,就会添加一个属性txt,并把字符串“111”赋给它,这样函数执行就是初始化这个对象的过程,即实现构造函数的作用;   

4>当函数执行完后,new操作符就返回初始化后的对象。  

3.demo1中定义的缺点

JavaScript中,function的定义实际上就是实现一个对象的构造器,是通过函数来完成的。这种方式的缺点是:   

·将所有的初始化语句、成员定义都放到一起,代码逻辑不够清晰,不易实现复杂的功能。   

·每创建一个类的实例,都要执行一次构造函数。构造函数中定义的属性和方法总被重复的创建,例如: this.display=function(){  alert(“this is a test method”); }   

每创建一个cls的实例,display都会被创建一次,造成了内存的浪费。  

Read: 754