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

 

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

(function(){
   /**
    * 实现一个自定义的弹出对话框。
	* 参数：title, 对话框标题
	*       message,对话框需要显示的信息，
	*       divId,指定一个div的id标识，以此div做为对话框的内容
	*       dialogtype, 对话框的类型：提示、警告、询问等，
	*       isOper, 是否背景可操作
	*/
   $.dialogSelf = function(options){
	   // 为插件提供默认值
       var setting = {
       	   title: "对话框",
	       message : "hello world!",
		   dialogtype : "提示",
		   isOper : true
	   };
       // 调用时传入的参数将覆盖默认的值
	   setting = $.extend(setting, options);
	   
	   var $ele = $.dialogSelf.dialogPosition($.dialogSelf.creatDialog(setting));
	   $("body").append($ele);
   };
       
   // 构建对话框
   $.dialogSelf.creatDialog = function(setting){
      return $("<div/>").addClass("ui-my-dialog")
         .append($.dialogSelf.creatDialogTitle(setting))
         .append($.dialogSelf.createDialogContent(setting))
         .append($.dialogSelf.createDialogFooter(setting));
   }
   
   // 构建对话框标题栏
   $.dialogSelf.creatDialogTitle = function(setting) {
   	var close = $("<a>\xd7</a>").click(function(){
   		$.dialogSelf.dialogClose();
   	});
	 return $("<div/>").addClass("ui-my-title")
         .append("<span>"+setting.title+"</span>")
         .append(close);
   }
   
   // 构建对话框内容
   $.dialogSelf.createDialogContent = function(setting) {
   	 return $("<div/>").addClass("ui-my-content")
   	     .append("<span>"+setting.dialogtype+": </span>")
   	     .append("<span>"+setting.message+"</span>");
   }
   
   // 构建对话框的footer
   $.dialogSelf.createDialogFooter = function(setting) {
   	var comfire = $("<a>确定</a>").click(function(){
   		$.dialogSelf.dialogClose();
   	});
   	 return $("<div/>").addClass("ui-my-footer")
   	     .append(comfire);
   }
   
   // 对话框的位置窗口居中
   $.dialogSelf.dialogPosition = function($ele) {
       var winWidth = $(window).width();
	   var winHeight = $(window).height();
	
	   var width = $ele.outerWidth();
	   var height = $ele.outerHeight();
	 
	   var posH = (winHeight - height)/2 + $(document).scrollTop();
	   var posW = (winWidth - width)/2;
	   
	   $ele.css({
		   position : "absolute",
		   "z-index" : "100",
		   top : posH + "px",
	       left: posW + "px"
	   });
	   return $ele;
    }
    
    // 关闭对话框
    $.dialogSelf.dialogClose = function() {
    	$(".ui-my-dialog").remove();
    }
})(jQuery);

 

2、css代码：jquery.dialog_self.css

.ui-my-dialog {
	border:3px solid #ff32a1;
	background: #ffe;
	width:400px;
	height:250px;
}

.ui-my-title {
	height:10%;
	background: #70adcd;
	color: #FFFFEE;
	font-weight:bold;
	padding :8px;
}

.ui-my-title a {
	border:none;
	display:inline-block;
	float:right;
	cursor: pointer;
}

.ui-my-content {
	height:63%;
	padding:5px;
}

.ui-my-content span{
	display:block;
}

.ui-my-footer {
	height:10%;
	background:#c8d5e2;
	padding :8px;
}

.ui-my-footer a {
	border:none;
	display:block;
	width:50px;
	height:22px;
	color:#fdfdfd;
	float:right;
	text-align:center;
	background:#3e78fd;
	cursor: pointer;
}

 

在html页面导入js和css 文件，就可以使用这个插件了。具体的测试代码可以参照附件！