jQuery自定义插件开发基础1——jQuery实用函数的实现

最新推荐文章于 2024-09-02 11:39:24 发布

转载最新推荐文章于 2024-09-02 11:39:24 发布 · 967 阅读

[ 05 ] JS&HTML&CSS 专栏收录该内容

94 篇文章

订阅专栏

9Tech·HTML5开发交流群：53156466

jQuery中已经存在很多常用的工具函数，使用这些函数能够在开发中帮助我们解决很多常见的问题，从而提高开发效率，比如常用的有：$.ajax使用ajax调用，$.each用于遍历对象和数组，$.grep用于过滤数组，$.map对于一个数组进行一定程度转换后返回转换后的数组，等等一系列的方法；但是有时候由于业务的需要，我们可能需要在项目中多次使用一些函数，在这种情况下，可以把这些函数封装成jQuery的实用函数，以方便调用和重用。以下介绍如何通过jQuery提供的插件机制来扩展我们自己的实用函数。

-、通过jQuery提供的扩展功能来实现一个jQuery的实用函数
jQuery的实用函数相等于java中的静态方法，直接定义在jQuery上，下面以实现一个简单的弹出一个“hello world!”的提示框来说明这一点。

(function($){
$.helloworld = function(){
alert("Hello World!");
}
})(jQuery);

复制代码

这就定义了一个名为helloworld的jQuery实用函数，通过$.helloworld()就可以调用。
1、这里使用了一个javaScript的匿名函数，并把jQuery对象当作参数传递给形参$，并执行这个函数。这样做的好处是，当程序里使用了除jQuery外,还有另外的js类库，并且也使用了$,那么$就会产生冲突，jQuery提供了jQuery.noConflict()来释放对$的控制权，交由其他类库使用。这里使用匿名函数的方式就能够避免这种冲突问题，并能在函数内部使用$来操作，这时的$只是一个局部变量，不会影响到其他类库的使用。

2、$.helloworld函数才是我们要实现的jQuery实用函数，放在匿名函数的函数体里去实现，如果没有使用其他类库，放在外面也是可以的，但是为了程序后期的扩展，也许会引用其他类库，最好的方式是放在匿名函数内部去实现，这也是官方所推荐的方式。
以下为在html中调用的部分代码：

<script type="text/javascript">
// 页面加载完则弹出helloworld对话框
$(function(){
$.helloworld();
});
</script>

复制代码

二、给jquery实用函数传递参数

先来写一个例子，求两数的最大值:

(function($){
$.maxFromTwonum = function(num1, num2) {
return num1 > num2 ? num1 : num2;
}
})(jQuery);

复制代码

这个实用函数再调用时需要传递2个数值，使用$.maxFromTwonum(12, 28);则返回28。这个例子也很简单，在项目开发中往往会遇到一些复杂的功能，需要抽取出来封装成组件来提供给项目各处调用，这时往往需传递大量的参数，有些可能是必须的参数，有些可能是可选的，这种情况则不能使用以上方式直接在形参列表中列出参数。一种好的方式，也是推荐的方式是使用带有key-value对的散列对象，key为参数的名，value为参数的值。以下给出具体的使用方式。

(function(){
// n1为必须传递的参数，因此可单独放在外面
// options则为可选参数，按照需求来传递相应的参数
$.complexParam = function(n1, options){
// 可为参数设定一些初始值
var settings = {
p1 : value1,
p2 : value2,
p3 : value3,
p4 : value4,
…………
};
//通过$.extend来合并传递的参数到settings上,并覆盖相应的初始值
settings = $.extend(settings, options);
// 在这里实现相应的业务逻辑代码……
}
})(jQuery);

复制代码

三、利用jQuery扩展实用函数的方式来实现一个小例子
在通常的网页应用中，免不了要有一些提示框，警告框之类的，但是浏览器自带的弹出框并不美观，很多网页用css和js脚本实现了属于自己的提示框。以下就给出一个简易的弹出提示框效果，可以在此基础上进一步优化，实现一个通用的组件。

1、js代码：jquery.dialog_self.js