周五啦，大家该放松放松下啦，求教JS面向对象编程

最近想详细学学JS的面向对象编程，不知道该找什么资料，看了些组件的源码也没啥感觉，就自己写了个Ajax封装玩玩。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ajax测试</title>
<script type="text/javascript">
var Extend = function(destination, source) { 
for (var property in source) { 
destination[property] = source[property]; 
} } 
var Bind = function(object, fun,args) { 
return function() { 
return fun.apply(object,args||[]); 
} } 
var xmlHttp=null;
var getXmlHttpRequest=function(){
if(xmlHttp!=undefined)return xmlHttp;
var _xmlHttp;
try{_xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){
try{_xmlHttp=new XMLHttpRequest(); }catch(e){
try{_xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){
alert("您的浏览器不支持Ajax!");_xmlHttp=null;
}
}
}
xmlHttp=_xmlHttp;
return _xmlHttp;
}
/*******************************************************************************************/
var Ajax={
url : '',
       parameters : '',
       onSucc : '',
       onFail : '',
       xmlHttp : null,
       request : function(options){
       Extend(this,options || {});
       this.xmlHttp=getXmlHttpRequest();
       this.xmlHttp.open("GET", this.url, true);
       this.xmlHttp.onreadystatechange = Bind(this,this.onStateChange,[this]);
       this.xmlHttp.send(null); 
       },
       onStateChange : function(){
       if(this.xmlHttp.readyState==4){
       if(this.xmlHttp.status>=200 && this.xmlHttp.status<300)
       this.onSucc(this.xmlHttp.responseText);
       else this.onFail(this.xmlHttp.status,this.xmlHttp.statusText);
       }
       }
}
/*******************************************************************************************/
var succ=function(data){alert(data);}
var fail=function(errType,errText){alert(errText);}
var showAjax=function(){
Ajax.request({url:'json.txt',onSucc:succ,onFail:fail});
}
</script>
</head>
<body>
<input type="button" value="Test" onclick="showAjax()" />
</body>
</html>
有用过一段时间的ext，一写就成这风格了，也不知道这算什么。
看了些组件如：prototype源码解说看操作好像很多都用new对象的方式来执行，大量的继承，都有点晕了。
在不考虑功能完善性的前提下不知道我这样写有哪些缺点？
求高手指点指点啊，顺便最好能推荐下JS面向对象的学习资料，不吝感激。

解决方案 »

  1.   

    var Extend = function(destination, source) { 
            for (var property in source) { 
            destination[property] = source[property]; 
        } } //如果楼主看过Ext 这个和Ext.apply方法类似 都是复制对象 var Bind = function(object, fun,args) { 
            return function() { 
            return fun.apply(object,args||[]); 
            }
     }  //一个闭包 主要作用应该在于作用域的控制 但楼主下边ajax的onreadystate时 没有必要那样写this.xmlHttp.onreadystatechange = Bind(this,this.onStateChange,[this]); //直接换成this.onStateChange 就是了
      

  2.   

    终于有人来看下了啊，感谢啊。
    extend和bind两个方法也是学来了，感觉是挺好用的。
    Bind(this,this.onStateChange,[this]); 这句的话不用bind方法这样操作的话火狐下面onStateChange方法里的this就会是readyState，在ie下则是ajax对象。
      

  3.   

    我想问一下,我的这段拖动div的代码什么地方有问题啊，在ie里面正常,在ff下就是停下再拖就不行了,但如果在div中加入文本就可以了，为什么会这样啊?请各位高手指教.<html><head>
    <script language="JavaScript" type="text/javascript" src="jquery-1.6.4.js"></script>
    <style></style>
    </head>
    <body><div id="rect" style="width:200px;height:200px;position:absolute;background-color:pink;"></div><div id="display" style="position:absolute;top:300px;"></div>
    </body>
    </html><script>$(init);function init(){
    rectEvent();
    }function rectEvent(){
    var slider = $("#rect");
    var downFlag = false;var offX;slider.mousedown(function(e){
    downFlag = true;
    var event = getEvent(e);
    offX = getOffsetX(event);});slider.mouseup(function(){
    downFlag = false;
    });slider.mouseout(function(){
    downFlag = false;
    });slider.mousemove(function(e){
    var event = getEvent(e);if(!downFlag){
    return false;
    }var left = event.clientX - offX;
    $("#display").text(left);
    slider.css("left",left);
    });}
    function getEvent(event){
    var event = event ? event : window.event;
    return event;
    }function getOffsetX(event){
    var off_X = event.offsetX ? event.offsetX : event.layerX;
    return off_X;
    }</script>如果我在rect div随便加入文本如：11,这样就可以了，我一直不太明白为什么会这样？
      

  4.   

    fanchuanzhidu
    好人哪！我都感动了。