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

2014-02-19 10:14 7人阅读 评论(0) 收藏 举报

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 (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 文件，就可以使用这个插件了。具体的测试代码可以参照附件！ 原文http://tangyuntao-2008.iteye.com/blog/1850853