หน้าเว็บ

วันพฤหัสบดีที่ 1 พฤศจิกายน พ.ศ. 2555

การเขียน jQuery Plugin

1) structure
(function($){
    //code ของ plugin จะอยู่ในนี้
})(jQuery);
2) code
(function($){
    $.myPlugin1 = {
        functionName1 : function(){
            //code
        },
        functionName2 : function(){
            //code
        },
        functionName3 : function(){
            //code
        }   
    }; 

    $.myPlugin2 = {
        functionName1 : function(){
            //code
        },
        functionName2 : function(){
            //code
        },
        functionName3 : function(){
            //code
        }   
    }; 
})(jQuery);
หรือ ทำการกำหนด name space ให้กับแต่ละ plugin เพื่อป้องกันปัญหา code ชนกันจาก library jquery อื่นๆ
(function($){
    $.na5cent = {};
    $.na5cent.cookies = {
        add : function(cname, value, options){
            //code
        },
        remove : function(cname){
            //code
        },
        isHas : function(cname){
            //code
        }   
    }; 

    $.na5cent.computing = {
        addAB : function(v1, v2){
            return v1 + 2;
        },
        minuteAB : function(v1, v2){
            return v1 - v2;
        },
        multiplyAB : function(v1, v2){
            return v1 * v2;
        },
        divideAB : function(v1, v2){
            if(v2 == 0){
               return "divide error";
            }
            return v1 / v2;
        }    
    };
})(jQuery);
การใช้งาน
    $(document).ready(function(){
        var result = $.na5cent.computing.addAB(100, 200);
        alert(result);
        //result is 300
    });

ไม่มีความคิดเห็น:

แสดงความคิดเห็น