类级别插件的开发（如何调用jQuery插件学习第十七天）

（1）功能描述：

       新增两个两类别的全局函数，分别用于计算两数之和与两数之差，并将结果返回调用的页面中。

（2）搭建框架：

/*
    功能：计算第二个相加或相减的结果
    参数：数字p1,p2
    返回：两数相加后的结果
    示例：$.AddNum(1,2)
*/
;(function($){
    $.extend({
        "yourPluginName":function(pram_value){
            //插件实现的代码
        }
    });
})(jquery);

（3）代码编写：

       根据功能描述，编写一个用于计算两数之和的全局函数，该函数先对用户传来的两个参数进行检测，判断其是否为undefined类型，以获取其最终用于计算的值，然后通过return语句返回其最终的计算结果，其实现代码如下：

"addNum":function(p1,p2){
    //如果传入的数字不为空，使用传入的数字，否则为0
    p1 = (p1 == undefined) ? 0 : p1;
    p2 = (p2 == undefined) ? 0 : p2;
    var intResult = parseInt(p1) + parseInt(p2);
    return intResult;
}

       使用同样的方式，增加一个用户计算两数之差的全局函数，由于最后返回值是一个两数相减的结果，因此，在进行基本检测后，判断第一个参数是否大于第二个参数，如果大于，则返回前者减去后者的结果，其实现代码如下：

"subNum":function(p1,p2){
    //如果传入的数字不为空，使用传入的数字，否则为0
    var intResult = 0;
    p1 = (p1 == undefined) ? 0 : p1;
    p2 = (p2 == undefined) ? 0 : p2;
    if (p1>p2){//如果传入的参数前者大于后者
        intResult = parseInt(p1) - parseInt(p2);
    }
    return intResult;
}

       使用jQuery.extend()方法直接对jQuery对象进行拓展，以扩充其全局函数，其最终实现的代码如下：

;(function(){
    $.extend({
        "addNum":function(p1,p2){
            //如果传入的数字不为空，使用传入的数字，否则为0
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            var intResult = parseInt(p1) + parseInt(p2);
            return intResult;
        },
        "subNum":function(p1,p2){
            //如果传入的数字不为空，使用传入的数字，否则为0
            var intResult = 0;
            p1 = (p1 == undefined) ? 0 : p1;
            p2 = (p2 == undefined) ? 0 : p2;
            if (p1>p2){//如果传入的参数前者大于后者
                intResult = parseInt(p1) - parseInt(p2);
            }
            return intResult;
        }
    });
})(jQuery);

（4）引用插件：

       与引用对象对象级别插件一样，类级别的插件也是先在<title>标记中导入插件的JS文件，然后编写JS代码，调用插件中的公用方法或函数。

       为检测插件的功能，新建一个HTML文件pl_TwoCalculate.html。在该页面中，单击上下两个"等于"按钮后，分别调用插件中的全局函数addNum与subNum，计算文本框中的两数之和与两数之和与两数之差，其实现代码如下：

<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Plugin/jquery.twoaddresult.js"></script>
 
<style type="text/css">
    省略部分代码...
</style>
 
<script type="text/javascript">
    $(function() {
        $("#Button1").click(function(){
            $("Text3").val(
            $.addNum($("#Text1").val(),$("#Text2").val()));
        });//调用自定义的插件计算两数之和
        $("#Button2").click(function(){
            $("Text6").val(
            $.addNum($("#Text4").val(),$("#Text5").val()));
        });//调用自定义的插件计算两数之差
    })
</script>

<div class="divFrame">
    <div class="divTitle">
        类级别的插件
    </div>
    <div class="divContent">两数相加：
        <input id="Text1" type="text" class="txt" />
        +
        <input id="Text2" type="text" class="txt" />
        =
        <input id="Text3" type="text" class="txt" />
        <input id="Button1" type="button" value="等于" class="btn" />
        <hr />两数相减：
        <input id="Text4" type="text" class="txt" />
        -
        <input id="Text5" type="text" class="txt" />
        =
        <input id="Text6" type="text" class="txt" />
        <input id="Button2" type="button" value="等于" class="btn" />        
    </div>
</div>