笔试：如何开发一个JQuery插件

关键词： 插件 方法 笔试 开发

笔试：如何开发一个JQuery插件（精选2篇）

篇1：笔试：如何开发一个JQuery插件

笔试：如何开发一个JQuery插件

JQuery有两种开发插件的方法：

jQuery.fn.extend(object);

jQuery.extend(object);

jQuery.extend(object);方法为扩展jQuery类本身.并为类添加新的方法，

jQuery.fn.extend(object)方法是给jQuery对象添加方法。

jQuery.fn = jQuery.prototype.

虽然 javascript 没有明确的类的概念，但是用类来理解它，会更方便。

jQuery便是一个封装得非常好的类，比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法，可以理解为添加静态方法。如：

$.extend({

add:function(a,b){return a+b;}

});

便为 jQuery 添加一个为 add 的 “静态方法”，之后便可以在引入 jQuery 的地方，使用这个方法了，

$.add(3,4); //return 7

jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的.实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容，

可以这么做：

Java代码

1. $.fn.extend({

2.

3. alertWhileClick:function{

4.

5. $(this).click(function(){

6.

7. alert($(this).val());

8. });

9.

10. }

11.

12. });

13.

14. $(“#input1″).alertWhileClick(); //页面上为：

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val());

});

}

});

$(“#input1″).alertWhileClick(); //页面上为：

$(“#input1″) 为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

jQuery提拱了丰富的操作文档，事件，CSS ,Ajax、效果的方法，结合这些方法，便可以开发出更加 Niubility 的插件。

篇2：笔试：如何开发一个JQuery插件

关键词：web,jQuery插件,对象级别

0 引言

j Query是一个优秀的javascript库,在2006年1月由美国人John Resig发布。它轻巧高效,兼容CSS3,同时还还兼容各种浏览器。使用户能更方便地处理HTML documents、events、实现动画效果,并且为网站提供AJAX交互。

j Query集方便、简洁、易于拓展等优秀品质为一身,吸引了众多程序开发者的加入,如今已经成为运用最为广泛的javascript库,大批功能强大的插件也应运而生,不过虽然有很多插件供用户免费下载使用,但每个项目的要求都不尽相同,如果能掌握插件开发的方式,就能进行更加个性化的定制。同时,优秀的j Query插件不仅能提高开发的效率和质量,也能不断推进web技术的向前发展。

1 插件的种类的分析

j Query插件开发方式主要有两种:

一是类级别插件,利用$.extend(object)扩展定义静态全局函数,将函数置于j Query命名空间中。如最为常见的就是$.ajax()、$.trim()全局性函数,都是以内部插件的形式植入j Query内核中。但这种方式无法利用j Query强大的选择器带来的便利,无法将插件运用于所选择的元素身上。

二是对象级别插件,利用$.fn.extend(object)扩展j Query对象的实例方法。该类插件首先通过j Query选择器获取对象,并为对象添加方法,然后,将方法进行打包,封装成一个插件,这种类型的插件编写简单,极易调用,也很方便地使用了j Query中功能强大的选择器。本文就基于j Query的自定义弹出框为例子对这种方法展开讨论。

2 插件开发的基本方法

2.1 插件的命名规则

插件的文件命名必须严格遵循j Query.[插件名].js的规则,以便于区分其他js文件,如新插件文件j Query.newqlugin.js。如果是类级别插件,所有的方法都应依附于jquery对象;如果是对象级别插件,所有的方法都应依附于jquery.fn主体对象。

2.2 插件的基本格式

类级别插件的格式就是往$.extend()里面添加一个或者多个全局函数:

对象级别插件的格式就是往$.fn.extend()里面添加一个或者多个方法,名字就是的插件名称,插件代码在这个方法里面展开。

3 基于j Query的对象级别插件开发

功能描述:网页任意元素绑定插件方法后,点击元素,弹出confirm弹出框,根据点击确认或者取消,弹出相应的alert弹出框。并且提供可以设置长宽的接口,开发者可根据需求改变弹出框的大小。

搭建一个js文件,命名为jquery.winpop.js,这是一个扩展j Query对象的实例方法的插件,在文件中使用$.fn.extend()方法完成框架的搭建。实现如下:

3.1 面向对象的开发模式

把插件抽象为一个弹出框对象,命名为Winpop,在插件里使用这个对象来编码:

3.2 让插件接受参数

一个好的插件是可以根据用户的需求定制的,为了提供更全面的功能支持,编写插件时要尽量提供合理的参数。

需要调用插件的元素毫无疑问应该作为参数传入;每个用户在设置弹出框时,对于弹出框的尺寸需求都不尽相同,所以这里把高和宽作为参数传入,同时也给出参数的默认值,用户可灵活设置参数或使用默认值。

调用插件的元素通过j Query选择器选中,如$(‘#btn’),已经是j Query包装类型,可以直接调用j Query的其他方法。但用户传入的只是普通参数,需要使用$.extend(object)方法进行处理。将默认值和用户输入值都传入到extend方法,它会将所有参数对象合并到第一个里。如果有同名属性,合并的时候后者会覆盖前者。这样就将用户输入值拓展为j Query包装类型,并保持默认值不被改变。

3.3 创造弹出框

将需要被创造出的元素全部放在一个对象里,分为主体部分ovl、alert部分中的确定按钮和confirm部分中的确定、取消按钮。

在Winpop中添加三个方法,create Dom方法用于创造弹出框的主体部分,弹出框的大小在没有用户输入的情况下使用默认值。alert和confirm方法分别创造不同形式的按钮。

4 引用插件

要使用j Query,必须引入基本的j Query脚本库。本文使用的版本jquery-2.1.4.min,可以从官网http://www.jquery.com/下载其最新的版本。接下来引入js文件,代码如下:

然后在js代码中调用,以网页中id为btn为按钮作为调用元素为例,调用插件的方法如下:

$('#btn').my Plugin();

这样,点击此按钮之后,出现如下弹出框:

在点击确认和取消按钮之后,分别出现如下弹出框:

也可以自定义弹出框的宽和高:$('#btn').MyPlugin({'height':'200px','width':'350px'});

5 总结

随着web技术的不断发展,用户对视觉效果,交互反应等方面的要求越来越高,利用j Query脚本库技术开发插件,有效的提高了代码的可重用性,节省了开发者的时间和精力。同时,便捷的插件机制使j Query的功能得到几乎无限的拓展,形成一个良好的生态圈,给j Query技术注入活力也推动了web技术的不断发展。作为开发者,编写插件时要严格遵守开发的要素,先搭框架,后进行开发,不同的插件使用不同的拓展方法。

参考文献

[1]ZAKAS N C.Java Script高级程序设计(第3版)[M].人民邮电出版社,2012.

[2]BLANCHARD J.j Query实战开发[M].人民邮电出版社,2012.

[3]邢素萍.用j Query技术开发特色插件[J].微型电脑应用,2014,30(8):59-64.XING S P.Using j Query Technology to Develop Special Plug-Ins[J].Microcomputer Applications,2014,30(8):59-64.

[4]王晶,温向彬.利用j Query操作HTML元素[J].农业网络信息,2008(4):98-99.WANG J,WEN X B.Operate HTML elements using j Query[J].AGRICULTURE NETWORK INFORMATION,2008(4):98-99.

[5]邓佳源.j Query插件对Web应用的影响研究与讨论[J].电脑知识与技术,2016,12(3).DENG J Y.Research and Discussion on the Impact of j Query Plug-in on Web Application[J].Computer Knowledge and Technology,2016,12(3).

[6]付予.一种基于j Query的跨模块通信机制的改进方案[J].软件,2014,35(12):42-44.FU Y.An Improved Solution of multi-module Communication Based on j Query[J].SOFTWARE,2014,35(12):42-44.

[7]孙小淋.基于Java Script的消息管理机制探讨[J].软件,2013,34(5):70-71.SUN X L.Java Script-based Message Management Mechanism[J].SOFTWARE,2013,34(5):70-71

[8]荣艳冬.以岗位需求为导向的Javascript课程构建[J].软件,2015,36(6):18-20.RONG Y D.Construction of Javascript Course Based on the Guidance of Job Requirement[J].SOFTWARE,2015,36(6):18-20.