4、jQuery面向對象之簡單的插件開發

1、alert例子

(function($){
    $.alert = function(msg){
        window.alert(msg);
    }
    
    $.fn.alert = function(msg){
        window.alert(msg);
    }
})($);

$().ready(function(){
    $.alert("aaaaa");
    $("body").alert("bbbb");
});

2、繼承

(function(jQuery){
    jQuery.fn.myextend = function(json){
        for(var i in json){
            jQuery.fn[i] = json[i];
        }
    }
    
    jQuery.myextend = function(json){
        for(var i in json){
            jQuery[i] = json[i];
        }
    }
})(jQuery);

$().ready(function(){
    $("body").myextend({
        aa:function(){
            alert("aa");
        }
    });
    $("body").aa();
});

3、myeach

(function(jQuery){
    jQuery.fn.myeach = function(callback){
        var array = $(this);
        for(var i=0;i<array.length;i++){
            //this代表當前正在遍歷的對象
            callback.call($(array[i]),$(array[i]));
        }
    }
    /**
     * @param {Object} obj  可以來自於利用jquery的選擇器創建的jquery對象，也可以來自於一個數組(來源於后台)
     * @param {Object} callback
     */
    jQuery.myeach = function(obj,callback){
        var array = obj;
        for(var i=0;i<array.length;i++){
            //this代表當前正在遍歷的對象
            callback.call($(array[i]),$(array[i]));
        }
    }
})(jQuery);

$().ready(function(){
    $("div").myeach(function(){
        //this代表當前正在遍歷的div對象
        alert($(this).text());
    });
    
    $.myeach($("div"),function(e){
        alert($(e).text());
    });
});

4、jquery開發的querytable

1、首先封裝一個命名空間的組件
(function($){
    $.nameSapce = function(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(".") + "={}");
        }
    }
})($);

2、封裝對table的增刪改查

(function($){
    /**
     * 這里需要一些方法
     *    查詢方法
     *    修改的方法
     *    刪除的方法
     */
    $.fn.GridPanel = {
        /**
         * 初始化事件
         */
        initEvent:function(){
            /**
             * 給table中的所有的超級鏈接添加事件
             */
            $("#"+$.fn.GridPanel.defaultConfig.table_id).delegate("a","click",function(){
                if($(this).text()=="刪除"){
                    $.fn.GridPanel.method.deleteRow.call(this);
                }else if($(this).text()=="修改"){
                    
                }
            })
            
            /**
             * 當點擊一個td的時候，觸發td的click事件
             * 
             * "td:not(:has(a))"  不含有超級鏈接的td
             */
            $("#"+$.fn.GridPanel.defaultConfig.table_id).delegate("td:not(:has(a))","click",function(){
                if($(this).children("input").length==0){//td下面沒有文本框
                    var value = $(this).text();
                    $(this).empty();//把該元素下面的所有的子子元素清空
                    var $txt = $.fn.GridPanel.method.createText();
                    $(this).append($txt);
                    $txt.focus();//聚焦
                    $txt.attr("value",value);//賦值    
                }
            })
            
            /*
             * 添加td中的文本框失去焦點的事件
             */
            $("#"+$.fn.GridPanel.defaultConfig.table_id).delegate("input","blur",function(){
                $.fn.GridPanel.method.updateCell.call(this);
            })
        },
        /**
         * 默認的配置
         */
        defaultConfig:{
            table_id:'',
            url:'',
            /**
             * 特定的操作要往后台傳遞的參數
             */
            option:{
                /**
                 * 查詢操作
                 */
                query:{
                    
                },
                /**
                 * 刪除操作
                 */
                del:{
                    
                },
                /**
                 * 修改操作
                 */
                update:{
                    
                }
            },
            /**
             * <th field="name">姓名</th>
               <th field="description">描述</th>
               <th field="del">刪除</th>
               <th field="update">修改</th>
             */
            fields:'',
            filedUpdate:'',
            filedDelete:''
        },
        /**
         * 對表格操作的所有的方法全部放在method中
         */
        method:{
            /**
             * 從后台加載數據，利用ajax技術形成表格
             */
            createTable:function(config){
                /**
                 * 1、請求后台，把數據傳到客戶端
                 */
                //把客戶端傳遞過來的參數覆蓋掉默認的配置  true為深度迭代
                $.extend(true,$.fn.GridPanel.defaultConfig,config);
                
                /**
                 * 執行initEvent方法
                 */
                $.fn.GridPanel.initEvent();
                
                $.post($.fn.GridPanel.defaultConfig.url,$.fn.GridPanel.defaultConfig.option.query,function(data){
                    /**
                     * data:
                     * [
                     *     {
                     *         pid:1,
                     *         name:'aa',
                     *         description:'aa'
                     *  },
                     *  {
                     *      pid:2,
                     *      name:'bb',
                     *      description:'bb'
                     *  }
                     * ]
                     */
                     //把后台回調過來的數據轉化成json對象
                     var array = eval("("+data+")");
                     /**
                      * 遍歷array數組中的每一個元素
                      * 第二個參數為回調，在該函數中創建tr
                      */
                     $.each(array,function(){
                          /**
                           * 每遍歷一次，調用一次createTR方法
                           * 當createTR方法調用完畢以后創建了一個tr,再把tr追加到tbody上
                           */
                          $("#"+$.fn.GridPanel.defaultConfig.table_id+" tbody").append(
                             $.fn.GridPanel.method.createTR.call(this));
                     });
                });
            },
            /**
             * 修改其中的一個單元格
             */
            updateCell:function(){
                /**
                 * this為當前的文本框
                 */
                var updateObj = $(this);
                var pid = $(this).parent().parent().data("id");
                var value = $(this).val(); //文本框的值
                var $td = $(this).parent();//文本框的父節點td
                var item = $td.attr("item");//要修改的列名
                $.post($.fn.GridPanel.defaultConfig.url,{
                    id:pid,
                    item:item,
                    value:value,
                    method:'update'
                },function(data){
                    updateObj.remove();
                    $td.text(value);
                });
                
            },
            /**
             * 給table添加一行
             */
            addRow:function(){
                
            },
            /**
             * 刪除指定的行
             */
            deleteRow:function(){
                var delObj = $(this);
                if (window.confirm("您確認要刪除嗎")) {
                    /*
                     * 因為在查詢的時候把id利用該tr放入到了jQuery的緩存中，所以在這里可以提取到
                     */
                    $.fn.GridPanel.defaultConfig.option.del.pid = $(this).parent().parent().data("id");
                    $.post($.fn.GridPanel.defaultConfig.url, $.fn.GridPanel.defaultConfig.option.del, function(data){
                        delObj.parent().parent().remove();
                    });
                }
            },
            /**
             * 創建一個tr
             */
            createTR:function(){
                /**
                 * this為{
                           pid:2,
                           name:'bb',
                           description:'bb'
                       }
                 */
                var jsonObj = this;
                var $tr = $("<tr/>");
                /**
                 * 相當於把key為id,value為jsonObj.pid加在了jQuery.cache中
                 * 可以利用$tr.data("id")獲取到值
                 */
                $tr.data("id",jsonObj.pid);
                /**
                 * 因為$.fn.GridPanel.defaultConfig.fields的數組的長度就是多少列
                 */
                $.each($.fn.GridPanel.defaultConfig.fields,function(){
                    /**
                     * this代表正在遍歷的每一個元素就是fields中的每一個元素
                     */
                    $tr.append($.fn.GridPanel.method.createTD.call(this,jsonObj));
                });
                return $tr;
            },
            /**
             * 創建一個td
             * jsonObj
             *    {
                           pid:2,
                           name:'bb',
                           description:'bb'
                       }
             */
            createTD:function(jsonObj){
                /**
                 * this  <th field="name">姓名</th>
                 */
                if($(this).attr("field")==$.fn.GridPanel.defaultConfig.filedDelete){//如果是刪除
                    return $("<td/>").append($.fn.GridPanel.method.createA("刪除"));
                }else if($(this).attr("field")==$.fn.GridPanel.defaultConfig.filedUpdate){//如果是修改
                    return $("<td/>").append($.fn.GridPanel.method.createA("修改"));
                }else{//不是超級鏈接
                    return $("<td/>").attr("item",$(this).attr("field")).text(jsonObj[$(this).attr("field")]);
                }
            },
            createA:function(text){
                return $("<a/>").css("cursor","pointer").text(text);
            },
            createText:function(){
                return $("<input type='text'/>");
            }
        }
    };
})($);

3、如何使用

$().ready(function(){
    /**
     * 1、創建命名空間
     */
    $.nameSapce("com.itheima12.Person");
    /**
     * 2、把GridPanel中的內容復制給了com.itheima12.Person
     */
    $.extend(com.itheima12.Person,$.fn.GridPanel);
    /**
     * 3、調用方法
     */
    com.itheima12.Person.method.createTable({
        table_id:'usertable',
        url:'../PersonServlet',
        fields:$("#usertable *[field]"),
        option:{
            query:{
                method:'query'
            },
            del:{
                method:'deleteById',
                pid:''
            },
            update:{
                method:"update"
            }    
        },
        filedUpdate:'update',
        filedDelete:'del'
    });
});

 

5、對於this的講解

/**
 * 任何一個對象都有可能成為任何一個對象的屬性
 */
function Person(){
    alert(this);
}
Person();//window = this

function Student(){
    
}
Student.a = Person;
Student.a();//this就是Student
var json = {
    a:Person
}
json.a();//this就是json對象

//可以利用call和 apply函數改變this的指向
Person.call(json);//Person.call(json)==json.Person
Person.apply(Student);//Student.Person();