js 动态原型方式ajax异步类

浏览数：43 / 时间：2015年06月09日

js 面向对象，挺好玩的，整好上次用jquery 实现瀑布流有兼容性问题，而且是在google 上，就重新用js 写了一个，这里使用了ajax ，就把ajax 单独封装起来了。

js 面向对象有几种实现方式：

1 原始方式：对象的属性可以在对象创建后动态定义

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
  alert(this.color);
};

2 工厂方式：开发者创造了能创建并返回特定类型的对象的工厂函数（factory function）。

function createCar() {
  var oTempCar = new Object;
  oTempCar.color = "blue";
  oTempCar.doors = 4;
  oTempCar.mpg = 25;
  oTempCar.showColor = function() {
    alert(this.color);
  };
  return oTempCar;
}

var oCar1 = createCar();
var oCar2 = createCar();

3 构造函数方式：

一步选择类名，即构造函数的名字。根据惯例，这个名字的首字母大写，以使它与首字母通常是小写的变量名分开。除了这点不同，构造函数看起来很像工厂函数。

构造函数会重复生成函数，为每个对象都创建独立的函数版本。浪费空间

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.showColor = function() {
    alert(this.color);
  };
}

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

4 原型方式：首先用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性。

function Car() {
}

Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car();
var oCar2 = new Car();

5 动态原型方式：

最为有效且节省空间的方式，下面就是一个封装

var offset = document.getElementsByName('offset')[0].value;
        var length = document.getElementsByName('length')[0].value;
        var post = new Post_xml_http("/Index/Show/more_photo","offset="+offset+"&length="+length);
        post.create_xml_obj();
        post.post();
        function Post_xml_http(url,data){
            //定义私有化数据，js 本质上不存在私有化
             this.xml_http = null;
             this.url= url;
             this.data = data;
             
             //创建xmlhttp 对象  通过动态原型方式创建对象
             if(typeof Post_xml_http._initialized == "undefined"){
                 Post_xml_http.prototype.create_xml_obj=function(){
                    if (window.XMLHttpRequest){
                        // code for IE7+, Firefox, Chrome, Opera, Safari
                        this.xml_http=new XMLHttpRequest();
                    }else{
                        // code for IE6, IE5
                         this.xml_http=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                 };
                 Post_xml_http._initialized = true;
             }
             
             //进行post 传递数据
             if(typeof Post_xml_http._post_init == "undefined"){
                Post_xml_http.prototype.post =  function(){
                       var xmlhttp = this.xml_http;
                      //建立post 异步连接
                        xmlhttp.open("POST", this.url,true);
                        //设置头部信息
                        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                        xmlhttp.send(this.data);
                        xmlhttp.onreadystatechange=function(){
                             if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                                    xmlDoc=xmlhttp.responseText;
                                    console.log(xmlDoc);                                   
                             }
                         };
                     };
                 Post_xml_http._post_init = true;
             }
             
         }

效果：

技术分享