(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>