jQuery 插件如何写

如何写一个Jquery 的Plugin插件

博客分类：

jQuery配置管理脚本FirebugJavaScript

JQuery Plugin插件，如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站：jQuery Authoring Guidelines

好了，下面有一些我觉得想做一个好的插件必须应有的要求：

1、在JQuery命名空间下声明只声明一个单独的名称

2、接受options参数，以便控制插件的行为

3、暴露插件的默认设置 ，以便外面可以访问

4、适当地将子函数提供给外部访问调用

5、保持私有函数

6、支持元数据插件

下面将逐条地过一遍：

只声明一个单独的名称

这表明是一个单独的插件脚本。如果你的脚本包含多个插件或者是互补的插件（像$.fn.doSomething()和$.undoSomething()），那么你可以根据要求声明多个名称。但一般情况下，力争用单一的名称来维持插件现实的所有细节。

在本例中，我们将声明一个叫“hilight”的名称

Js代码  

  1. // 插件的定义
  2. $.fn.hilight = function( options ){
  3. // 这里就是插件的实现代码了...
  4. };

然后我们可以像这样调用它：

Js代码  

  1. $("divTest").hilight();

接受一个options参数，以便控件插件的行为

Js代码  

  1. $.fn.hilight = function(options){
  2. var defaults = {
  3. foreground    :    ‘red‘,
  4. background    :    ‘yellow‘
  5. };
  6. //Extends out defaults options with those privided 扩展我们默认的设置
  7. $.extend(defaults,options);
  8. };

而我们可以这样使用它：

Js代码  

  1. $(‘#myDiv‘).hilight({
  2. foreground: ‘blue‘
  3. });

暴露插件的默认设置 ，以便外面可以访问

作为插件的提升和优化，我们应该将上面的代码暴露出来作为插件的默认设置。

这非常重要，这样做让使用插件的用户可以非常容易地用最少的代码重写或自定义该插件。然而这个我们可以借助JavaScript function对象的优势：

Js代码  

  1. $.fn.hilight = function(options){
  2. //Extend our default options with those provided
  3. //Note that the first arg to extend is an empty object
  4. //this is to keep from overriding our "defaults" object
  5. var opts = $.extend({},$.fn.hilight.defaults,options);
  6. }
  7. $.fn.hilight.defaults = {
  8. foreground    :    ‘red‘,
  9. background    :    ‘yellow‘
  10. };

这里值得注意的是$.extend()第一个参数是一个空的对象，这样可以让我们重写插件的默认设置

用户可以像这样使用插件：

Js代码  

  1. // override plugin default foreground color
  2. $.fn.hilight.defaults.foreground = ‘blue‘;
  3. // ...
  4. // invoke plugin using new defaults
  5. $(‘.hilightDiv‘).hilight();
  6. // ...
  7. // override default by passing options to plugin method
  8. $(‘#green‘).hilight({
  9. foreground: ‘green‘
  10. });

适当地将子函数提供给外部访问调用

这个例子延续前面的例子，你会发现有一个有趣的方法可以扩展你的插件（然后还可以让其他人扩展你的插件 :)）。例如，我们在插件里声明了一个函数叫“format”用来高这显示文本，我们的插件实现代码可能是这样子的：

Js代码  

  1. $.fn.hight = function(options){
  2. //iterate and reformat each mached element
  3. return this.each(function(){
  4. var $this = $(this);
  5. //...
  6. var markup = $this.html();
  7. //call our format function
  8. markup = $.fn.hilight.format(markup);
  9. $this.html(markup);
  10. });
  11. };
  12. //define our format function
  13. $.fn.hilight.format = function(txt){
  14. return ‘<strong>‘ + txt + ‘</strong>‘;
  15. };

保持私有函数

暴露插件有部分内容提供重写看上去似乎非常强大，但是你必须认真地考虑你的插件哪一部分是需要暴露出来的。一旦暴露出来，你就需要考虑这些变化点，一般情况下，如果你没有把握哪部分需要暴露出来，那么你可以不这样做。

那如何才能够定义更多的函数而不将其暴露出来呢？这个任务就交给闭包吧。为了证实，我们在插件中添加一个函数叫“debug”，这debug函数将会记录已选择的元素数量到FireBug控制台中。为了创建闭包，我们将插件定义的整部分都包装起来：

Js代码  

  1. //create closure
  2. (function($){
  3. //plugin definition
  4. $.fn.hilight = function(options){
  5. debug(this);
  6. //...
  7. };
  8. //private function for debuggin
  9. function debug($obj){
  10. if(window.console && window.console.log){
  11. window.console.log(‘hilight selection count :‘ + $obj.size());
  12. }
  13. }
  14. //...
  15. //end of closure
  16. })(jQuery);

这样“debug”方法就不能被闭包这外调用了

支持元数据插件

依赖于所写的插件类型，并支持元数据插件会使得其本身更加强大。个人来讲，我喜欢元素据插件，因为它能让你分离标签中重写插件的配置 （这在写demo和示例时特别有用）。最重要的是，想现实它特别的容易！

Js代码  

  1. $.fn.hilight = function(options){
  2. //build main options before element interation
  3. var opts = $.extend({},$.fn.hilight.defaults,options);
  4. return this.each(function(){
  5. var $this = $(this);
  6. //build element specific options
  7. var o = $.meta ? $.extend({},opts,$this.data()) : opts;
  8. //一般句话，搞定支持元数据 功能
  9. });
  10. }

几行的变化完成了以下几件事：

1、检测元数据是否已经配置

2、如果已配置，将配置属性与额外的元数据进行扩展

Html代码  

  1. <!--  markup  -->
  2. <div class="hilight { background: ‘red‘, foreground: ‘white‘ }">
  3. Have a nice day!这是元数据
  4. </div>
  5. <div class="hilight { foreground: ‘orange‘ }">
  6. Have a nice day!在标签中配置
  7. </div>
  8. <div class="hilight { background: ‘green‘ }">
  9. Have a nice day!
  10. </div>

然后我们通过一句脚本就可以根据元数据配置分开地高亮显示这些div标签：

Js代码  

  1. $(‘.hilight‘).hilight();

最后，将全部代码放在一起：

Js代码  

  1. //
  2. //create closure
  3. //
  4. (function($){
  5. //
  6. // plugin definition
  7. //
  8. $.fn.hilight = function(options){
  9. debug(this);
  10. //build main options before element iteration
  11. var opts = $.extend({}, $.fn.hilight.defaults, options);
  12. //iterate and reformat each matched element
  13. return this.each(function(){
  14. $this = $(this);
  15. //build element specific options
  16. var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
  17. //update element styles
  18. $this.css({
  19. backgroundColor: o.background,
  20. color: o.foreground
  21. });
  22. var markup = $this.html();
  23. //call our format function
  24. });
  25. }
  26. //
  27. // private function for debugging
  28. //
  29. function debug($obj){
  30. if(window.console && window.console.log){
  31. window.console.log(‘hilight selection count: ‘ + $obj.size());
  32. }
  33. };
  34. //
  35. // define and expose our format function
  36. //
  37. $.fn.hilight.format = function(txt){
  38. return ‘<strong>‘ + txt + ‘</strong>‘;
  39. };
  40. //
  41. // plugin defaults
  42. //
  43. $.fn.hilight.defaults = {
  44. foreground    :    ‘red‘,
  45. background    :    ‘yellow‘
  46. };
  47. //
  48. // end of clousure
  49. //
  50. })(jQuery);

2.

如何写一个Jquery 的Plugin插件

最近做项目想要一个控制会计数字输入的jquery插件,找了好久找不到, 没用办法,只有自己操刀上阵了,其实要求也不高, 就是: 
1. 默认是: 0.00 
2. 只能输入数字和小数点, 其它输入将被忽略 
3. 输入整数后继续自动保持两位小数 
4. 可以定义自己想保留几位小数

OK, 开始动手:

首先, 通过将函数封装为jquery plugin包, 可以将这个包非常容易的在各种项目和页面中使用, 而且代码管理维护起来方便. 再说, jquery的plugin实现起来超简单,为什么不这么做呢?如果你是第一次开发, 先阅读下这篇文章吧: How jQuery Works

一. Jquery Plugin 的基本框架

Js代码  

  1. (function($) {
  2. $.fn.extend({
  3. MyPlugin: function(options) {
  4. var defaults = {
  5. decimal_length: 2,
  6. };
  7. var options = $.extend(defaults, options);
  8. var len = parseInt(options[‘decimal_length‘]);
  9. return this.each(function() {
  10. alert(‘edison‘);
  11. });
  12. }
  13. });
  14. })(jQuery);

其中options就是参数, 调用方法为:

Js代码  

  1. $(‘#ddd‘).MyPlugin({decimal_length:2});

好的, 我们接着完成要的功能: 文件名为 money.js

Js代码  

  1. (function($) {
  2. var pasteEventName = ($.browser.msie ? ‘paste‘ : ‘input‘) + ".mask";
  3. $.fn.extend({
  4. money_type: function(options) {
  5. var defaults = {
  6. decimal_length: 2,
  7. };
  8. var options = $.extend(defaults, options);
  9. var len = parseInt(options[‘decimal_length‘]);
  10. return this.each(function() {
  11. var input = $(this);
  12. function caret() {
  13. var input_value = input.val();
  14. var reCat = /\d+\.?\d{0,2}/i;
  15. var_new_value = reCat.exec(input_value);
  16. input.val(var_new_value);
  17. }
  18. input.bind("click", function(e) {
  19. if (input.val() == ‘0.00‘) {
  20. input.select();
  21. }
  22. })
  23. .bind(pasteEventName, function() {
  24. setTimeout(caret, 0);
  25. });
  26. });
  27. }
  28. });
  29. })(jQuery);

OK, 插件完成, 在使用的时候要包含这个文件和jquery文件, 然后通过以下代码就可以调用了

Js代码  

  1. $(‘#ddd‘).money_type();// 默认保留两位小数
时间： 2024-08-05 02:10:48

jQuery 插件如何写的相关文章

一步一步写jQuery插件

转载自:http://www.cnblogs.com/joey0210/p/3408349.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下

锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

1.表单验证插件Validation   2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuery UI   5.jQuery Cookie   6.遮罩层插件:thickbox 7.编写jQuery插件 <1>编写插件的目的:给已经有的一些列方法或函数做一个封装,一遍在其他地方使用,方便后期维护和提高开发效率. <2>三种类型的插件 a:封装对象方法的插件 jQuery.fn.extend()

写JQuery 插件 什么？你还不会写JQuery 插件

http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下面就是一个简

10分钟学会写Jquery插件

最近很多网友说jquery插件是什么啊?怎么写的啊?我不会写啊? 一大堆的问题一时都不知道怎么回答他们,个人认为是网友们把问题复杂化了. 其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲就是把这些代码放在一个方法里面,可以达到重复使用的效果,这样就可以不需要每次要用此功能的时候都去重新写一遍. 现在Jquery里面加入了插件的概念,只要按照它特定的格式当作平时写function一样去写就可以了,不虽然搞得太复杂的.信不信由你们,反正我信了. 接下来用简单的代码来讲解一下,如果网友们看

教你写Jquery插件

最近很多网友说 jQuery插件是什么啊?怎么写的啊?我不会写啊? 一大堆的问题一时都不知道怎么回答他们,个人认为是网友们把问题复杂化了. 其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲就是把这些代码放在一个方法里面,可以达到重复使用的效果,这样就可以不需要每次要用此功能的时候都去重新写一遍. 现在Jquery里面加入了插件的概念,只要按照它特定的格式当作平时写function一样去写就可以了,不虽然搞得太复杂的.信不信由你们,反正我信了. 接下来用简单的代码来讲解一下,如果网友们

写jQuery插件

手把手教你怎么写jQuery插件 这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话,进入正题. jQuey是一个非常好用的javascript类库,提供了非常多的接口给程序员使用.但在某些具体方面,并没有完全提供解决方法,这就要求我们自己实现.jQuery官方也提供jQuery拓展的标准.编写jQuery插件时,应该注意一下几点原则: 1. 避免

自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

【jQuery】结合accordion插件分析写插件的方法及注意事项

1.jQuery插件的命名方式:jquery.[插件名].js 2.对象方法附加在jQuery.fn上,全局函数附加在jQuery对象本身上 3.插件内部this指向的是通过选择器获取的jQuery对象 4.结尾加分号,插件头部最好也加分号 5.插件应该返回一个jQuery对象,保证插件的链式操作 6.插件内部应用完整的jQuery而不是$,但可以利用闭包,将jQuery传入,使插件内部可以继续使用$符合作为jQuery别名 7.闭包另一大好处:可以避免内部变量影响全局空间 :(function

怎么写jQuery插件

jQuey是一个非常好用的javascript类库,提供了非常多的接口给程序员使用.但在某些具体方面,并没有完全提供解决方法,这就要求我们自己实现.jQuery官方也提供jQuery拓展的标准.编写jQuery插件时,应该注意一下几点原则: 1. 避免全局依赖. 2. 避免第三方破坏. 3. 兼容jQuery操作符'$'和'jQuery' 这三个原则非常重要,否则,这个插件将会失去插件的意义. jquery插件命名,一般在前面加上jquery,这样别人就知道这是jQuery插件.如:jquery