3jQuery面向对象

Posted 2020-08-04 香港胖仔

1、首先介绍callback.js对ajax进行了封装

function ajaxFunction(){
　　var xmlHttp;
　　try{ // Firefox, Opera 8.0+, Safari
　　　　xmlHttp=new XMLHttpRequest();
　　}
　　catch (e){
　　　　try{// Internet Explorer
　　　　　　xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
　　　　}
　　　　catch (e){
　　　　　　　　try{
　　　　　　　　　　xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
　　　　　　　　}
　　　　　　　　catch (e){}
　　　　}
　　}

　　return xmlHttp;
}

window.onload=function(){
　　//    ajax("../AjaxServlet","post",null,function(data){//data为回调函数的形参
　　//    alert(data);
　　//    });
　　ajax2({
　　　　url:‘../AjaxServlet‘,
　　　　method:‘post‘,
　　　　data:null,
　　　　callback:function(data){
　　　　/**
　　　　* ajaxJSON.callback(xmlHttp.responseText);//xmlHttp.responseText为回调函数的实参
　　　　* 这里的this代表this所在的json对象
　　　　* ajaxJSON.callback.call(window,xmlHttp.responseText);//xmlHttp.responseText为回调函数的实参
　　　　* 这里的this代表window
　　　　*/
　　　　alert(this);
　　　　}
　　});
}

function ajax(url,method,data,callback){
　　//获取xmphttpRquest对象
　　var xmlHttp=ajaxFunction();
　　//事件处理程序
　　xmlHttp.onreadystatechange=function(){
　　　　//alert(xmlHttp.readyState);
　　　　//alert(xmlHttp.status)
　　　　if(xmlHttp.readyState==4){
　　　　　　if(xmlHttp.status==200||xmlHttp.status==304){
　　　　　　　　callback(xmlHttp.responseText);//xmlHttp.responseText为回调函数的实参
　　　　　　}
　　　　}
　　}    
　　//打开连接
　　xmlHttp.open(method,url,true);
　　//设置响应头
　　xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
　　//发送请求
　　xmlHttp.send("data="+data);
}

function ajax2(ajaxJSON){
　　　　//获取xmphttpRquest对象
　　　　var xmlHttp=ajaxFunction();
　　　　//事件处理程序
　　　　xmlHttp.onreadystatechange=function(){
　　　　//alert(xmlHttp.readyState);
　　　　//alert(xmlHttp.status)
　　　　if(xmlHttp.readyState==4){
　　　　　　if(xmlHttp.status==200||xmlHttp.status==304){
　　　　　　　　ajaxJSON.callback.call(window,xmlHttp.responseText);//xmlHttp.responseText为回调函数的实参
　　　　　　}
　　　　}
}    
//打开连接
xmlHttp.open(ajaxJSON.method,ajaxJSON.url,true);
//设置响应头
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
xmlHttp.send("data="+ajaxJSON.data);
}

 

 

2、jquery面向对象，get,set

/**
* 在函数内部定义的函数，在外部要使用
* 闭包的一个使用场景：
* 继承的封装
* 匿名函数
* 写4个函数setName,getName,aaa,bbb,让setName和getName成为公开的函数，让aaa,bbb成为私有的函数
*/
(function(window){
　　function Person(){
　　　　return {
　　　　　　setName:setName,
　　　　　　getName:getName
　　　　};
　　}
　　/**
　　* 公开的函数
　　* @param {Object} name
　　*/
　　function setName(name){
　　　　this.name = name;
　　}
　　function getName(){
　　　　return this.name;
　　}
　　/**
　　* 私有函数
　　*/
　　function aaa(){

　　}
　　function bbb(){

　　}
　　//给window对象动态的添加了一个属性Person
　　window.Person = Person;
})(window);
　　var Person = window.Person();
　　Person.setName("aaa");
　　alert(Person.getName());

 

 

3、jQuery面向对像，event添加

　　$().ready(function(){


　　/**
　　* 给指定的区域中的指定的元素添加指定的事件
　　* 能给未来的元素添加指定的事件
　　* @param {Object} "input[type=‘button‘]"
　　*/
　　$("body").delegate("div","click",function(){
　　　　alert("aaaa");
　　});

　　$("input[type=‘button‘]").unbind("click");
　　$("input[type=‘button‘]").bind("click",function(){
　　　　$("body").append($("<div/>").text("aaaaa"));
　　});
　　for(var i=0;i<3;i++){
　　/**
　　* 用click的方法声明事件，事件是可以叠加的
　　* 该方法不能给未来的元素添加事件
　　*/
　　//    $("div").click(function(){
　　　　//    alert("aaa");
　　//    });

　　/**
　　* 也不能给未来的元素添加事件
　　*/
　　//    $("div").unbind("click");//使该属性从该对象上移除
　　//    $("div").bind("click",function(){
　　　　//    alert("aaa");
　　//    });
　　}
});

 

 

4、jQuery面向对象3(自定义事件) event定义

　　/**
　　* 自定义事件
　　* 事件必须满足三个条件：
　　* 1、事件必须有名称
　　* 2、事件必须绑定在某一个对象上
　　* 3、事件必须有触发条件
　　*/
　　/**
　　* 给div添加一个事件，该事件的名称为"itheima12很牛",当点击div的时候，触发click事件的同时触发"itheima12很牛"事件
　　*/
　　$().ready(function(){
　　　　$("div").unbind("click");
　　　　$("div").bind("click",function(){
　　　　　　　　/**
　　　　　　　　* 在点击div的时候，触发itheima12很牛事件
　　　　　　　　*/
　　　　　　　　//$(this).trigger("itheima12很牛",5);
　　　　　　　　//$(this).trigger("itheima12很牛",[5,6]);
　　　　　　　　$(this).trigger("itheima12很牛",{
　　　　　　　　　　aa:‘aa‘,
　　　　　　　　　　bb:‘bb‘
　　　　　　　　});
　　　　 });

　　　　$("div").unbind("itheima12很牛");
　　　　$("div").bind("itheima12很牛",function(event,json){
　　　　　　alert(json.aa);
　　　　　　alert(json.bb);
　　　　});
　　});

 

 

5、jQuery面向对象4（对象）

　

　/**
　　* 该函数是一个对象,该对象是由Function产生的
　　*/
　　function Person(){

　　}
　　alert(Person.constructor);

　　Person.a = 5;//给Person对象添加了一个属性为a,值为5

　　function Student(){

　　}

　　Person.b = Student;//给Person对象添加了一个属性为b,值为Student的对象

　　var json = {
　　　　aa:‘aa‘
　　};

　　Person.c = json;//给Person对象天界另一个属性为c,值为json对象

　　alert(Person.c.aa);

　　/**
　　* A.B.C.D.E.F.G.H()
　　*/
　　function A(){

　　}
　　function b(){

　　}
　　function c(){

　　}
　　function d(){

　　}
　　function e(){

　　}
　　function f(){

　　}
　　function g(){

　　}
　　function h(){
　　　　alert("hh");
　　}
　　A.B = b;
　　A.B.C = c;
　　A.B.C.D = d;
　　A.B.C.D.E = e;
　　A.B.C.D.E.F = f;
　　A.B.C.D.E.F.G = g;
　　A.B.C.D.E.F.G.H = h;
　　A.B.C.D.E.F.G.H();//A.B.C.D.E.F.G是命名空间

　　var AA = {};
　　AA.BB = b;
　　AA.BB.CC = c;
　　AA.BB.CC.DD = d;
　　AA.BB.CC.DD.EE = e;
　　AA.BB.CC.DD.EE.FF = f;
　　AA.BB.CC.DD.EE.FF.GG = g;
　　AA.BB.CC.DD.EE.FF.GG.HH = h;
　　AA.BB.CC.DD.EE.FF.GG.HH();

　　/**
　　* a.b.c.d.e.f
　　*/
　　function namespace(namespaceString){
　　　　var temp = [];//声明了一个空的数组
　　　　var array = namespaceString.split(".");
　　　　for(var i=0;i<array.length;i++){
　　　　　　temp.push(array[i]);
　　　　　　/**
　　　　　　* 把多个json对象添加了window上
　　　　　　*/
　　　　　　eval("window."+temp.join(".")+"={}");
　　　　　　//把多个function添加到了window上
　　　　　　//eval("window."+temp.join(".")+"=function(){}");
　　　　}
　　}
　　/**
　　* 把com.itheima12动态的添加到了window对象上
　　*/
　　var tempnamespace = namespace("com.itheima12");
　　alert(window);



 

6、jQuery面向对象，protype

(function(window){
    /**
      *   jQuery是一个函数
                                  是一个对象
                                  是一个构造器函数
      */
    var jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context );
    },
    
    //fn就是jQuery对象上的一个属性，该属性指向了prototype
    //jQuery的 prototype中的方法是根据jQuery的选择器获取到的jQuery对象，然后jQuery对象调用这些方法的
    //利用jQuery的选择器得到的jQuery对象就相当于利用jQuery的构造器创建出来的对象
    jQuery.fn = jQuery.prototype = {
        each: function( callback, args ) {
            return jQuery.each( this, callback, args );
        },
        ready:function(){}
    };
    //window对象动态的添加了一个属性jQuery,把匿名函数中的jQuery对象赋值给了window的jQuery对象
    //$实际上是window的一个属性，也是jQuery对象
    window.jQuery = window.$ = jQuery;
    
    jQuery.fn = jQuery.prototype = $.prototype = $.fn = window.$.fn = window.jQuery.fn = window.jQuery.prototype
    
    
    //在jquery中，可以把一个方法加入到jQuery或者$本身上, 直接利用jQuery或者$调用,这样的方法称为全局方法，也称为全局插件
    //在jquery中，可以把一个方法加入到jQuery或者$的prototype或者fn上，可以利用jquery的选择器获取到的jquery对象调用这些方法,这样的方法也称为插件方法
})(window);

7、jQuery prototype

function Person(){
    
}
alert(Person.prototype); //Person是一个函数对象，有一个默认的属性为prototype={},该特点在json对象中是不存在的

Person.prototype.aa = 5;//Person.prottype[‘aa‘] = 5;

Person.prototype.bb = function(){
    alert("bb");
}
var p = new Person();
alert(p.aa);

var json = {};
alert(json.prototype);

/**
 * 模拟一个类，创建一个对象，设置属性，并进行输出
 */
function Student(){
    
}

Student.prototype.setId = function(id){
    this.id = id;
}
Student.prototype.setName = function(name){
    this.name = name;
}
Student.prototype.getId = function(){
    return this.id;
}
Student.prototype.getName = function(){
    return this.name;
}

var s = new Student();
s.setId(4);
s.setName("王二麻子");
alert(s.getId());
alert(s.getName());

s.bb = 5;
alert(s.bb);

var ss = new Student();
alert("---------"+ss.bb);

8、jQuery的继承

function Student(){
    
}
Student.prototype.setName = function(name){
    this.name = name;
}
Student.prototype.getName = function(){
    return this.name;
}

function SuperStudent(){
    
}

SuperStudent.prototype = Student.prototype;
SuperStudent.prototype = new Student();
var superStudent = new SuperStudent();

superStudent.setName("aaa");
alert(superStudent.getName());

9、jQuery继承2

/**
 * 在extend函数内部定义了一个函数，把传递进来的json对象的每一个key,value值动态的添加到了
 * 内部函数的prototype中
 * @param {Object} json
 */
namespace("com.itheima12");
com.itheima12.extend = function (json){
    /**
     * 声明了一个函数
     */
    function F(){
        
    }
    /**
     * 遍历json对象中的每一个key,value值，把每一个key,value值赋值给F.prototype
     */
    for(var i in json){
        F.prototype[i] = json[i];
    }
    return F;//F就是一个对象
}

//var Person = extend({
//    aa:‘aa‘,
//    bb:‘bb‘
//});
var Person = com.itheima12.extend({
    aa:‘aa‘,
    bb:‘bb‘
});
var p = new Person();
alert(p.aa);

10、jquery继承3

/**
 * 写一个命名空间com.itheima12,在该命名空间下有一个方法extend
 * 该方法有两个参数json,prop
 *   该方法会调用两次，第一次传递一个参数，该参数是json对象
 *                第二次传递两个参数，第一个参数是function,第二个参数是prop
 */
namespace("com.itheima12");
/**
 * 创建出来一个Person函数
 */
com.itheima12.extend = function(json,prop){
    function F(){
        
    }
    /**
     * 第一次调用extend方法
     */
    if (typeof json == "object") {//json参数是一个json对象
        for(var i in json){//把json对象中的每一个key,value赋值给F的prototype
            F.prototype[i] = json[i];
        }
    }
    
    /**
     * 第二次调用extend方法
     */
    if(typeof json == "function"){
        /**
         * 让F的prototype指向json的prototype
         */
        F.prototype = json.prototype;
        /**
         * 再把prop的每一个key,value值赋值给F的prototype
         */
        for(var j in prop){
            F.prototype[j] = prop[j];
        }
    }
    return F;
}


var Person = com.itheima12.extend({
    aa:‘aa‘,
    bb:‘bb‘
});
var p = new Person();
alert(p.aa);

var SuperPerson = com.itheima12.extend(Person,{
    cc:‘cc‘
});
var sp = new SuperPerson();
alert(sp.cc);

11、jQuery继承4

/**
 * 写一个函数，该函数的名称是extend,有两个参数：destination,source
   1、如果destination和source都是json对象，完成从source到destination的复制
   2、如果destination是一个函数，source是一个json对象，则把source中的每一个key,value对赋值给destination的prototype
   3、如果destination,source都是函数，则把source的prototype中的内容赋值给destination的prototype
 */
namespace("com.itheima12");
com.itheima12.extend = function(destination,source){
    if(typeof destination == "object"){//destination是一个json对象
        if(typeof source == "object"){//source是一个json对象
            //把source中的每一个key,value值赋值给destination
            for(var i in source){
                destination[i] = source[i];
            }
        }
    }
    
    if(typeof destination == "function"){
        if(typeof source == "object"){
            for(var i in source){
                destination.prototype[i] = source[i];
            }
        }
        if(typeof source == "function"){
            destination.prototype = source.prototype;
        }
    }
    return destination;
}

var destination = com.itheima12.extend({
    cc:‘cc‘
},{
    aa:‘aa‘,
    bb:‘bb‘
});

alert(destination.aa);

function Person(){
    
}
com.itheima12.extend(Person,{
    aa:‘aa‘
});

12、namespace.js

function namespace(namespaceString){
    var temp = [];//声明了一个空的数组
    var array = namespaceString.split(".");
    for(var i=0;i<array.length;i++){
        temp.push(array[i]);
        /**
         * 把多个json对象添加了window上
         */
        eval("window."+temp.join(".")+"={}");
        //把多个function添加到了window上
        //eval("window."+temp.join(".")+"=function(){}");
    }
}