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!”的提示框来说明这一点。 这就定义了一个名为helloworld的jQuery实用函数,通过$.helloworld()就可以调用。 1、这里使用了一个javaScript的匿名函数,并把jQuery对象当作参数传递给形参$,并执行这个函数。这样做的好处是,当程序里使用了除jQuery外,还有另外的js类库,并且也使用了$,那么$就会产生冲突,jQuery提供了jQuery.noConflict()来释放对$的控制权,交由其他类库使用。这里使用匿名函数的方式就能够避免这种冲突问题,并能在函数内部使用$来操作,这时的$只是一个局部变量,不会影响到其他类库的使用。 2、$.helloworld函数才是我们要实现的jQuery实用函数,放在匿名函数的函数体里去实现,如果没有使用其他类库,放在外面也是可以的,但是为了程序后期的扩展,也许会引用其他类库,最好的方式是放在匿名函数内部去实现,这也是官方所推荐的方式。 以下为在html中调用的部分代码: 二、给jquery实用函数传递参数 先来写一个例子,求两数的最大值: 这个实用函数再调用时需要传递2个数值,使用$.maxFromTwonum(12, 28);则返回28。这个例子也很简单,在项目开发中往往会遇到一些复杂的功能,需要抽取出来封装成组件来提供给项目各处调用,这时往往需传递大量的参数,有些可能是必须的参数,有些可能是可选的,这种情况则不能使用以上方式直接在形参列表中列出参数。一种好的方式,也是推荐的方式是使用带有key-value对的散列对象,key为参数的名,value为参数的值。以下给出具体的使用方式。 三、利用jQuery扩展实用函数的方式来实现一个小例子 在通常的网页应用中,免不了要有一些提示框,警告框之类的,但是浏览器自带的弹出框并不美观,很多网页用css和js脚本实现了属于自己的提示框。以下就给出一个简易的弹出提示框效果,可以在此基础上进一步优化,实现一个通用的组件。 1、js代码:jquery.dialog_self.js 2、css代码:jquery.dialog_self.css 在html页面导入js和css 文件,就可以使用这个插件了。具体的测试代码可以参照附件! 原文http://tangyuntao-2008.iteye.com/blog/1850853 |