正文转自:

JQuery
Plugin插件,假设我们不明了怎么样是JQuery插件或都不明了怎么样编写能够查阅其官方的网址:jQuery
Authoring Guidelines
好了,下边有部分自家觉着想做一个好的插件必需相应的必要:
1、在JQuery命名空间下申明只声澳优(Ausnutria Hyproca卡塔尔个独自的称谓
2、接收options参数,以便调控插件的表现
3、暴露插件的默认设置 ,以便外面能够访谈
4、适本地将子函数提必要外界访谈调用
5、保持个人函数
6、援助元数据插件
上边将依次地过二回:
只声贝因美(Beingmate卡塔尔国个独门的名称
那注解是一个独门的插件脚本。假设你的剧本蕴含多少个插件恐怕是添补的插件(像$.fn.doSomething(卡塔尔(英语:State of Qatar)和$.undoSomething(卡塔尔),那么你能够依据必要注解五个称呼。但日常景况下,力争用单生机勃勃的称呼来保持插件现实的享有细节。
在本例中,大家将宣示二个叫“hilight”的称号

jQuery插件的支付包含二种:

 

复制代码 代码如下:

后生可畏种是类等级的插件开采,即给jQuery增添新的大局函数,也正是给jQuery类本人增添方法。jQuery的大局函数就是归属jQuery命名空间的函数,另风华正茂种是目的等第的插件开拓,即给jQuery对象增多方法。上边就二种函数的费用做详细的评释。

前几日在玩jquery,明天就把前段时间的求学做一个总计。

// 插件的概念
$.fn.hilight = function( options ){
// 这里正是插件的兑今世码了…
};
下一场大家可以像那样调用它:
$(“divTest”).hilight();

1、类级其他插件开垦

第生龙活虎jquery开荒自定义的控件分两大类(小编自个儿这么分的),第风流浪漫正是不带参数的插件,还应该有意气风发类正是带参数的jquery插件了。

选取七个options参数,以便控件插件的作为

类级其他插件开荒最直白的明亮正是给jQuery类增加类方法,可以精通为加多静态方法。规范的例子便是$.AJAX(卡塔尔(قطر‎这一个函数,将函数定义于jQuery的命名空间中。关于类品级的插件开拓可以利用如下三种样式开展扩展:

先从轻松的开始。首先大家要打听一下哪些叫jquery,jquery是对js的意气风发层层的分装,说白了他正是js的分装将来的产品。不过我们用jquery来促成会更加的有利。使用jquery的插件也很简短。只须求jquery的官方网址下载最新版本的jquery,然后再我们的网页的head下边援用一下就好了。比方:

复制代码 代码如下:

1.1 加多二个新的大局函数

图片 1😉

$.fn.hilight = function(options){
var defaults = {
foreground : ‘red’,
background : ‘yellow’
};
//Extends out defaults options with those privided 扩张大家暗中认可的装置
$.extend(defaults,options);
};

增添一个大局函数,大家只需如下概念: 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery引用放的位子</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
      <!--这里写自己插件的地方-->
</script>
</head>

而我辈得以这样使用它:

Java 代码
jQuery.foo = function() {   alert(‘This is a test. This is only a test.’);  };    jQuery.foo
= function() { alert(‘This is a test. This is only a test.’);};

图片 2😉

复制代码 代码如下:

 

此间有几许亟待规定,便是jquery的援用之处一定在您自身插件之处前边,因为浏览器在深入分析你的html的时候,是从上到下的,约等于说即使您先写插件后援用jquery,那么浏览器根本就不认知您的插件中的标示符。
无参jquery插件的沙盘:

$(‘#myDiv’).hilight({
foreground: ‘blue’
});

 

图片 3😉

露马脚插件的暗中同意设置 ,以便外面能够访问
作为插件的升级换代和优化,大家应有将地点的代码暴透露来作为插件的暗中认可设置。
那足够重大,那样做让动用插件的顾客能够非常轻便地用起码的代码重写或自定义该插件。不过这几个大家得以依据JavaScript
function对象的优势:

1.2 扩展多少个全局函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>不带参数的jquery插件开发</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        (function($){
            $.fn.extend({
                myPlugName:function(){
                    $(this).click(function(){
                        alert($(this).val());    
                    });    
                }
            });    
        })(jQuery);
    </script>
</head>

<body>
    <input type="button" value="点击我" id="btn" /> </body>

    <script type="text/javascript">
          $("#btn").myPlugName();
    </script>
</html

复制代码 代码如下:

增加两个全局函数,可使用如下概念: 

图片 4😉

$.fn.hilight = function(options){
//Extend our default options with those provided
//Note that the first arg to extend is an empty object
//this is to keep from overriding our “defaults” object
var opts = $.extend({},$.fn.hilight.defaults,options);
}
$.fn.hilight.defaults = {
foreground : ‘red’,
background : ‘yellow’
};

Java 代码
jQuery.foo = function(卡塔尔 {   alert(‘This is a test. This is only a test.’卡塔尔(英语:State of Qatar);  };  jQuery.bar = function(param卡塔尔 {   alert(‘This function takes a parameter, which is “‘ + param + ‘”.’卡塔尔(英语:State of Qatar);  };   调
用时和一个函数的同样的:jQuery.foo(卡塔尔(英语:State of Qatar);jQuery.bar(卡塔尔;或然$.foo(卡塔尔(英语:State of Qatar);$.bar(‘bar’卡塔尔(英语:State of Qatar);  jQuery.foo = function(卡塔尔 { alert(‘This is a
test. This is only a test.’卡塔尔(قطر‎;};jQuery.bar = function(param卡塔尔(قطر‎ {
alert(‘This function takes a parameter, which is “‘ + param + ‘”.’卡塔尔;};
调用时和叁个函数的同等的:jQuery.foo(卡塔尔;jQuery.bar(卡塔尔国;只怕$.foo(卡塔尔;$.bar(‘bar’卡塔尔(英语:State of Qatar);

无参的格式为:

此地值得注意的是$.extend(卡塔尔首个参数是二个空的目的,那样能够让大家重写插件的暗中同意设置
客商能够像那样使用插件:

1.3 使用jQuery.extend(object); 

图片 5😉

复制代码 代码如下:

Java 代码
jQuery.extend({      foo: function() {      alert(‘This is a test. This is only a test.’);      },      bar: function(param) {      alert(‘This function takes a parameter, which is “‘ + param +'”.’);      }     });  jQuery.extend({
foo: function() { alert(‘This is a test. This is only a test.’); }, bar:
function(param) { alert(‘This function takes a parameter, which is “‘ +
param +'”.’); } });

(function($){
     $.fn.extend({
         myPlugName:function(){<!--myPlugName你的插件的名字,根据自己的情况来命名-->
             //dosomethings
         });    
     }
     });    
})(jQuery);

// override plugin default foreground color
$.fn.hilight.defaults.foreground = ‘blue’;
// …
// invoke plugin using new defaults
$(‘.hilightDiv’).hilight();
// …
// override default by passing options to plugin method
$(‘#green’).hilight({
foreground: ‘green’
});

 

图片 6😉

确切地将子函数提需求外界访谈调用
以这件事例三回九转后边的事例,你会开采成多少个神乎其神的方法能够增添你的插件(然后还能让别的人扩张你的插件
:卡塔尔)。比如,大家在插件里声称了叁个函数叫“format”用来高那显得文本,大家的插件实今世码大概是那样子的:

1.4 使用命名空间

此地质大学致的解释一下,$.fn.extend是多少个实例的恢弘,可是$.extend是类的恢宏,若是不了然多看一下疏解,恐怕是去api.jquery.com看一下jquery的合法手册。jQuery和$是等价的,你可以感觉是小名。myPlugName这一个是插件的名字,依据自个儿的情事来定名自身的拆建吧!接着便是写一些你想要做的事情了!极粗略吗!哈哈

复制代码 代码如下:

虽说在jQuery命名空间中,大家严令禁止行使了汪洋的javaScript函数名和变量名。不过照旧不可防止有些函数或变量老将于此外jQuery插件冲突,由此我们习贯将部分情势封装到另三个自定义的命名空间。

带参数的jquery插件 首先看一下代码:

$.fn.hight = function(options){
//iterate and reformat each mached element
return this.each(function(){
var $this = $(this);
//…
var markup = $this.html();
//call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
//define our format function
$.fn.hilight.format = function(txt){
return ‘<strong>’ + txt + ‘</strong>’;
};

Java 代码
jQuery.myPlugin = {          foo:function(卡塔尔国 {          alert(‘This is a test. This is only a test.’卡塔尔;          },          bar:function(param卡塔尔(قطر‎ {          alert(‘This function takes a parameter, which is “‘ + param + ‘”.’卡塔尔;    }         };  选用命名空间的函数仍然为大局函数,调用时利用的方
法:  $.myPlugin.foo(卡塔尔(قطر‎;         $.myPlugin.bar(‘baz’卡塔尔(英语:State of Qatar);  jQuery.myPlugin
= { foo:function(卡塔尔 { alert(‘This is a test. This is only a test.’卡塔尔(英语:State of Qatar); },
bar:function(param卡塔尔(英语:State of Qatar) { alert(‘This function takes a parameter, which is
“‘ + param + ‘”.’卡塔尔(英语:State of Qatar); }
};接纳命名空间的函数仍是大局函数,调用时利用的点子:$.myPlugin.foo(卡塔尔国;
$.myPlugin.bar(‘baz’卡塔尔(قطر‎;

按 Ctrl+C 复制代码

保持个人函数 揭发插件有后生可畏对剧情提供重写看上去就像极其强大,但是你必须认真地思忖你的插件哪风度翩翩部分是索要暴表露来的。后生可畏旦暴表露来,你就要求思量那一个变化点,经常境况下,倘让你未曾把握哪生龙活虎部分供给暴暴光来,那么您能够不那样做。
那什么样手艺够定义越来越多的函数而不将其暴表露来吗?这一个职分就付出闭包吧。为了印证,大家在插件中增加二个函数叫“debug”,那debug函数将会记录已采撷的元素数量到FireBug调控新北。为了创造闭包,大家将插件定义的整部分都卷入起来:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“; <html
xmlns=”; <head> <meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文书档案</title> <script
src=”;
<script type=”text/javascript”> (function($){
$.fn.hilight=function(options){ var defaults={ foreground:’red’,
background:’yellow’ }; var opts = $.extend(defaults,options);
$(this).css(“background-color”,opts.background);
$(this).css(“color”,opts.foreground); }; })(jQuery); </script>
</head> <body> <div id=”myDiv”>This is a Params
JQuery!</div> </body> <script type=”text/javascript”>
$(“#myDiv”).hilight({foreground:’blue’}); </script> </html>

复制代码 代码如下:

经过这些技巧(使用独立的插件名),我们能够幸免命名空间内函数的冲突。

按 Ctrl+C 复制代码

//create closure
(function($){
//plugin definition
$.fn.hilight = function(options){
debug(this);
//…
};
//private function for debuggin
function debug($obj){
if(window.console && window.console.log){
window.console.log(‘hilight selection count :’ + $obj.size());
}
}
//…
//end of closure
})(jQuery);

2、对象品级的插件开采

此处和不带参数的jquery插件大概,但是还应该有多少的两样,最后$(“#myDiv”卡塔尔国.hilight({foreground:’blue’}卡塔尔;来给jquery传递参数!尽管不写的话,那就用jquery自带的私下认可的值。jquery插件此中的贰个规范模板为:

像这种类型“debug”方法就不可能被闭包那向外调拨运输用了
帮助元数据插件
依附于于所写的插件类型,并帮忙元数据插件会使得其自个儿更是强盛。个人来说,作者欢跃成分据插件,因为它能令你分手标签中重写插件的配置(那在写demo和示范时特别实用)。最重大的是,想切实它特别的轻便!

目的等级的插件开拓需求如下的三种样式:、

图片 7😉

复制代码 代码如下:

形式1:  

(function($){
            $.fn.hilight=function(options){
                var defaults={
                    foreground:'red',
                    background:'yellow'    
                };
                var opts = $.extend(defaults,options);
                //dosomethings
            };
        })(jQuery);

$.fn.hilight = function(options){
//build main options before element interation
var opts = $.extend({},$.fn.hilight.defaults,options);
return this.each(function(){
var $this = $(this);
//build element specific options
var o = $.meta ? $.extend({},opts,$this.data()) : opts;
//日常句话,化解支撑元数据 功用
});
}

Java 代码
(function($){     $.fn.extend({     pluginName:function(opt,callback){               // Our plugin implementation code goes here.       }     })     })(jQuery);     (function($){
$.fn.extend({ pluginName:function(opt,callback){ // Our plugin
implementation code goes here. } }) })(jQuery);

图片 8😉

几行的改变达成了以下几件事:
1、检测元数据是不是早就安顿
2、假使已安插,将配备属性与额外的元数据实行扩展

形式2: 

此地须求潜心一句话,var opts =
$.extend(defaults,options卡塔尔(英语:State of Qatar);那句话的情致是吧defaults的质量和options的性质合併并保留到opts中。不懂的话仿照效法:

复制代码 代码如下:

Java 代码
(function($卡塔尔(英语:State of Qatar) {       $.fn.pluginName = function(卡塔尔 {          // Our plugin implementation code goes here.     };     }卡塔尔(قطر‎(jQuery卡塔尔(英语:State of Qatar);      (function($卡塔尔(英语:State of Qatar){ $.fn.pluginName = function(卡塔尔(英语:State of Qatar) { // Our plugin implementation code goes
here. }; }卡塔尔(قطر‎(jQuery卡塔尔;       
上面定义了二个jQuery函数,形参是$,函数定义完毕之后,把jQuery那个实参传递进去.即刻调用实施。那样的益处是,大家在写jQuery插件
时,也足以动用$这几个小名,而不会与prototype引起冲突.

此地当然标准的模版不是独有上边这么意气风发种还会有许三种,小编只是收拾了黄金年代种为初读书人学习!

<!– markup –>
<div class=”hilight { background: ‘red’, foreground: ‘white’ }”>
Have a nice day!那是元数据
</div>
<div class=”hilight { foreground: ‘orange’ }”>
Have a nice day!在标签中计划
</div>
<div class=”hilight { background: ‘green’ }”>
Have a nice day!
</div>

2.1 在JQuery名称空间下申美素佳儿(Friso卡塔尔(英语:State of Qatar)(Nutrilon卡塔尔(英语:State of Qatar)个名字

终极请允许笔者拷贝后生可畏段话,希望对你有效:

下一场大家由此一句脚本就能够依据元数据配置分开地高亮呈现那几个div标签:

那是多少个单黄金年代插件的本子。若是您的本子中包蕴多个插件,或者互逆的插件(举个例子:
$.fn.doSomething(卡塔尔 和
$.fn.undoSomething(卡塔尔(قطر‎),那么你必要注脚多少个函数名字。不过,平时当大家编辑三个插件时,力求仅使用一个名字来含有它的享有剧情。我们的亲自过问插件命名字为“highlight“    

jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JS库插件混淆。
所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身。可以通过this.each 来遍历所有的元素在插件头部加上一个分号,以免他人的不规范代码给插件带来影响。
所有的方法或函数插件,都应当以分号结尾,以免压缩时出现问题除非插件需要返回的是一些需要获取的变量,插件应该返回一个jQuery对象,以保证插件的可链式操作。
利于jQuery.extend()方法设置插件方法的默认参数,增加插件的可用性。在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。

复制代码 代码如下:

 

Stallman 先生以为最大的高兴是让本身发展的软件让我们来行使了!

$(‘.hilight’).hilight();

Java代码
$.fn.hilight = function(卡塔尔(قطر‎ {      // Our plugin implementation code goes here.    };    我们的插件通过如此被调用:  $(‘#myDiv’卡塔尔(英语:State of Qatar).hilight(卡塔尔国;     $.fn.hilight =
function(卡塔尔 { // Our plugin implementation code goes here. };
咱们的插件通过那样被调用:$(‘#myDiv’).hilight();

最后,将全体代码放在一块儿:

 

复制代码 代码如下:

可是若是我们要求解释大家的实今世码为八个函数该
怎么做?有多数原因:设计上的供给;那样做更便于或更易读的落到实处;並且这么更符合面向对象。 那真是叁个小事,把职能实现降解成八个函数而不增加多余的
命名空间。出于意识到和利用函数是javascript中最基本的类对象,大家得以如此做。就像是其余对象相像,函数能够被钦命为属性。因而大家曾经宣示
“hilight”为jQuery的性子对象,任何此外的属性可能函数大家要求暴表露来的,都得以在”hilight” 函数中被声称属性。稍后继续。
2.2 收受options参数以调控插件的一颦一笑

//
//create closure
//
(function($){
//
// plugin definition
//
$.fn.hilight = function(options){
debug(this);
//build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
//iterate and reformat each matched element
return this.each(function(){
$this = $(this);
//build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
//update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
//call our format function
});
}
//
// private function for debugging
//
function debug($obj){
if(window.console && window.console.log){
window.console.log(‘hilight selection count: ‘ + $obj.size());
}
};
//
// define and expose our format function
//
$.fn.hilight.format = function(txt){
return ‘<strong>’ + txt + ‘</strong>’;
};
//
// plugin defaults
//
$.fn.hilight.defaults = {
foreground : ‘red’,
background : ‘yellow’
};
//
// end of clousure
//
})(jQuery);

让我们为大家的插件增添效果钦点前途色和背景观的职能。咱们只怕会让选项像叁个options对象传递给插件函数。比方:   

转发请表明出处
比较期望大家付出jquery plugin的时候能够在终极把艺术开放出来
return {
method1: funcion() {},
method2: funcion() {}
}

Java 代码
// plugin definition    $.fn.hilight = function(options卡塔尔(قطر‎ {      var defaults = {        foreground: ‘red’,        background: ‘yellow’      };      // Extend our default options with those provided.      var opts = $.extend(defaults, options卡塔尔(英语:State of Qatar);      // Our plugin implementation code goes here.    };    大家的插件能够如此被调
用:  $(‘#myDiv’卡塔尔(英语:State of Qatar).hilight({      foreground: ‘blue’    }卡塔尔(قطر‎;     //
plugin definition $.fn.hilight = function(options卡塔尔 { var defaults = {
foreground: ‘red’, background: ‘yellow’ }; // Extend our default options
with those provided. var opts = $.extend(defaults, options卡塔尔(قطر‎; // Our
plugin implementation code goes here. };
大家的插件能够那样被调用:$(‘#myDiv’).hilight({ foreground: ‘blue’ });

如此那般咱们在利用的时候就能够用如下格局调用
var plugin = $(“<div/>”).plugin();
plugin.mehtod1();
plugin.method2();

 

Plugin插件,假如大家不清楚怎么是JQuery插件或都不清楚怎么编写能够查阅其法定的网址:jQuery
Authoring Guidelines 好了,上边有生机勃勃对小编感觉…

2.3 暴露插件的暗许设置

大家应该对地方代码的生龙活虎种校订是暴露插件的暗中同意设置。那对于让插件的使用者更便于用超级少的代码覆盖和改换插件。接下来大家初阶运用函数对象。     

 

Java 代码
// plugin definition    $.fn.hilight = function(options卡塔尔(قطر‎ {      // Extend our default options with those provided.      // Note that the first arg to extend is an empty object –      // this is to keep from overriding our “defaults” object.      var opts = $.extend({}, $.fn.hilight.defaults, options卡塔尔国;      // Our plugin implementation code goes here.    };    // plugin defaults – added as a property on our plugin function    $.fn.hilight.defaults = {      foreground: ‘red’,      background: ‘yellow’    };     现在使用者能够包涵像那样的风流潇洒行在她们的本子里:  //这一个只须要调用一回,且不鲜明要在ready块中调
用  $.fn.hilight.defaults.foreground = ‘blue’;    接下去大家得以像那样使用插件的不二等秘书籍,结果它设置
白色的前程色:  $(‘#myDiv’).hilight();   // plugin definition
$.fn.hilight = function(options) { // Extend our default options with
those provided. // Note that the first arg to extend is an empty object

  • // this is to keep from overriding our “defaults” object. var opts =
    $.extend({}, $.fn.hilight.defaults, options卡塔尔(英语:State of Qatar); // Our plugin
    implementation code goes here. }; // plugin defaults – added as a
    property on our plugin function $.fn.hilight.defaults = { foreground:
    ‘red’, background: ‘yellow’ };
    以后使用者能够富含像这么的生龙活虎行在他们的剧本里://这几个只需求调用叁次,且不自然要在ready块中调
    用$.fn.hilight.defaults.foreground = ‘blue’;
    接下来我们得以像这么使用插件的主意,结果它设置黑褐的前程色:$(‘#myDiv’).hilight();

 

如你所见,我们允许使用者写黄金年代行代码在插件的默许前途色。何况使用者依旧在急需的时候能够有选拔的掩没那个新的默许值:

// 覆盖插件缺省的背景颜色  

$.fn.hilight.defaults.foreground = ‘blue’;  

// …  

// 使用一个新的缺省设置调用插件  

$(‘.hilightDiv’).hilight();  

// …  

// 通过传递配置参数给插件方法来蒙蔽缺省设置  

$(‘#green’).hilight({  

  foreground: ‘green’  

});   

2.4 适当的揭破一些函数

这段将会一步一步对前边那段代码通过风趣的格局扩大你的插件(同一时候让其余人扩张你的插件)。举例,大家插件的兑现里面能够定义一个称作”format”的函数来格式化高亮文本。大家的插件今后看起来像这么,暗中认可的format方法的达成部分在hiligth函数下边。

Java 代码
// plugin definition    $.fn.hilight = function(options卡塔尔国 {      // iterate and reformat each matched element      return this.each(function(卡塔尔(قطر‎ {        var $this = $(this卡塔尔国;        // …        var markup = $this.html(卡塔尔;        // call our format function        markup = $.fn.hilight.format(markup卡塔尔国;        $this.html(markup卡塔尔(قطر‎;      }卡塔尔国;    };    // define our format function    $.fn.hilight.format = function(txt卡塔尔 {    return ‘<strong>’ + txt + ‘</strong>’;    };     //
plugin definition $.fn.hilight = function(options卡塔尔(英语:State of Qatar) { // iterate and
reformat each matched element return this.each(function(卡塔尔(قطر‎ { var $this =
$(this卡塔尔国; // … var markup = $this.html(卡塔尔(قطر‎; // call our format function
markup = $.fn.hilight.format(markup卡塔尔; $this.html(markup卡塔尔(قطر‎; }卡塔尔(英语:State of Qatar); }; //
define our format function $.fn.hilight.format = function(txt卡塔尔国 { return
‘<strong>’ + txt + ‘</strong>’; };      
大家十分轻松的补助options对象中的别的的品质通过同意二个回调函数来覆盖默许的装置。那是别的二个绝妙的方法来更改你的插件。这里呈现的工夫是进一步有效的揭穿format函数进而让他能被重复定义。通过那手艺,是别的人能够传递他们和谐设置来覆盖你的插件,换句话说,那样其余人也可感觉你的插件写
插件。
     
考虑到那么些篇小说中大家树立的不算的插件,你只怕想通晓究竟怎么时候这一个会有用。一个诚恳的例证是Cycle插件.那么些Cycle插件是多个滑动彰显插
件,他能支撑广大里面调换作用到滚动,滑动,渐变消失等。可是实际,未有主意定义恐怕会使用到滑动变化上每一种类型的法力。这是这种增加性有用之处。
Cycle插件对使用者揭露”transitions”对象,使他们增添本身调换定义。插件中定义就疑似这么:

$.fn.cycle.transitions = {  

// …  

};  

本条手艺使别的人能定义和传递转变设置到Cycle插件。

 

2.5 保持个人函数的私有性

这种技巧揭发你插件生龙活虎部分来被遮住是那多少个强大的。可是你需要细心思谋你兑现中东窗事发的大器晚成都部队分。生龙活虎但被暴光,你要求在脑子中维系任何对于参数只怕语义的纠正大概会毁掉向后的包容性。二个通理是,若是您不能自然是不是揭发特定的函数,那么你或然无需那么做。


么大家怎么定义越来越多的函数而不搅乱命名空间也不揭露完毕啊?那便是闭包的功用。为了演示,大家将会加上其余叁个“debug”函数到我们的插件中。那个debug函数将为出口被选中的因素格式到firebug调节台。为了成立多个闭包,大家将包装整个插件定义在二个函数中。 

Java代码
 (function($) {      // plugin definition      $.fn.hilight = function(options) {        debug(this);        // …      };      // private function for debugging      function debug($obj) {        if (window.console && window.console.log)          window.console.log(‘hilight selection count: ‘ + $obj.size());      };    //  …    })(jQuery);    
(function($) { // plugin definition $.fn.hilight = function(options) {
debug(this); // … }; // private function for debugging function
debug($obj) { if (window.console && window.console.log)
window.console.log(‘hilight selection count: ‘ + $obj.size()); }; // …
})(jQuery);

 

咱俩的“debug”方法不可能从外表闭包踏向,由此对于大家的完成是私有的。

2.6 支持Metadata插件

在你正在写的插件的根基上,增多对Metadata插件的扶助能使她更加强有力。个人来讲,笔者喜爱得舍不得放手那几个Metadata插件,因为它令你使用十分的少的”markup”覆盖插件的接纳(那丰盛有效当成立例未时)。并且支持它特别轻松。更新:注释中有几许优化提议。

Java 代码
$.fn.hilight = function(options) {      // …      // build main options before element iteration      var opts = $.extend({}, $.fn.hilight.defaults, options);      return this.each(function() {        var $this = $(this);        // build element specific options        var o = $.meta ? $.extend({}, opts, $this.data()) : opts;        //…      $.fn.hilight
= function(options) { // … // build main options before element
iteration var opts = $.extend({}, $.fn.hilight.defaults, options);
return this.each(function() { var $this = $(this); // build element
specific options var o = $.meta ? $.extend({}, opts, $this.data()) :
opts; //…  

 这个更正行做了有的政工:它是测验Metadata插件是还是不是被安装固然它被装置了,它能扩张大家的options对象通过抽出元数据那行作为最终一个参数增多到JQuery.extend,那么它将会覆盖任何其余选项设
置。今后大家能从”markup”处驱动行为,假如大家选择了“markup”:

 调用的时候能够如此写: jQuery.foo(卡塔尔(قطر‎; 或 $.foo(卡塔尔国; 

 

Java 代码
<!–  markup  –>    <div class=”hilight { background: ‘red’, foreground: ‘white’ }”&
gt;      Have a nice day!    </div>    <div class=”hilight { foreground: ‘orange’ }”&
gt;      Have a nice day!    </div>    <div class=”hilight { background: ‘green’ }”&
gt;      Have a nice day!    </div>    未来我们能高亮哪些div仅使用黄金时代行脚
本:  $(‘.hilight’卡塔尔国.hilight(卡塔尔(英语:State of Qatar);     <!– markup –> <div
class=”hilight { background: ‘red’, foreground: ‘white’ }”> Have a
nice day! </div> <div class=”hilight { foreground: ‘orange’
}”> Have a nice day! </div> <div class=”hilight {
background: ‘green’ }”> Have a nice day! </div>
未来咱们能高亮哪些div仅使用大器晚成行脚本:$(‘.hilight’卡塔尔(قطر‎.hilight(卡塔尔;

 

2.7 整合
上边使大家的例证完毕后的代码:

    

Java 代码 // 创制叁个闭包    (function($卡塔尔(英语:State of Qatar) {      // 插件的定
义      $.fn.hilight = function(options卡塔尔(قطر‎ {        debug(this卡塔尔;        // build main options before element iteration        var opts = $.extend({}, $.fn.hilight.defaults, options卡塔尔国;        // iterate and reformat each matched element        return this.each(function(卡塔尔(قطر‎ {          $this = $(this卡塔尔(قطر‎;          // build element specific options          var o = $.meta ? $.extend({}, opts, $this.data(卡塔尔(英语:State of Qatar)卡塔尔(英语:State of Qatar) : opts;          // update element styles          $this.css({            backgroundColor: o.background,            color: o.foreground          }卡塔尔国;          var markup = $this.html(卡塔尔(قطر‎;          // call our format function          markup = $.fn.hilight.format(markup卡塔尔国;          $this.html(markup卡塔尔(英语:State of Qatar);        }卡塔尔(قطر‎;      };      // 私
有函
数:debugging      function debug($obj卡塔尔 {        if (window.console && window.console.log卡塔尔          window.console.log(‘hilight selection count: ‘ + $obj.size(卡塔尔(قطر‎卡塔尔(قطر‎;      };      // 定
义揭示format函数      $.fn.hilight.format = function(txt卡塔尔(قطر‎ {        return ‘&
lt;strong>’ + txt + ‘</strong>’;      };      // 插件的
defaults      $.fn.hilight.defaults = {        foreground: ‘red’,        background: ‘yellow’      };    // 闭
包甘休    }卡塔尔(قطر‎(jQuery卡塔尔;     // 成立三个闭包 (function($卡塔尔 { // 插件的定义
$.fn.hilight = function(options卡塔尔(英语:State of Qatar) { debug(this卡塔尔国; // build main options
before element iteration var opts = $.extend({}, $.fn.hilight.defaults,
options卡塔尔国; // iterate and reformat each matched element return
this.each(function(卡塔尔国 { $this = $(this卡塔尔; // build element specific
options var o = $.meta ? $.extend({}, opts, $this.data(卡塔尔卡塔尔 : opts; //
update element styles $this.css({ backgroundColor: o.background, color:
o.foreground }卡塔尔(英语:State of Qatar); var markup = $this.html(卡塔尔(英语:State of Qatar); // call our format function
markup = $.fn.hilight.format(markup卡塔尔(قطر‎; $this.html(markup卡塔尔; }卡塔尔(قطر‎; }; //
私有函数:debugging function debug($obj卡塔尔(英语:State of Qatar) { if (window.console &&
window.console.log卡塔尔(英语:State of Qatar) window.console.log(‘hilight selection count: ‘ +
$obj.size(卡塔尔(قطر‎卡塔尔(英语:State of Qatar); }; // 定义暴露format函数 $.fn.hilight.format =
function(txt卡塔尔(قطر‎ { return ‘<strong>’ + txt + ‘</strong>’; }; //
插件的defaults $.fn.hilight.defaults = { foreground: ‘red’, background:
‘yellow’ }; // 闭包甘休 }卡塔尔(jQuery卡塔尔(英语:State of Qatar);

 

这段布署已经让本身创制了强硬切合标准的插件。笔者期望它能令你也能幸不辱命。

3、总结

jQuery为开采插件提拱了四个点子,分别是:

jQuery.fn.extend(object卡塔尔(英语:State of Qatar);  给jQuery对象增添方法。
jQuery.extend(object卡塔尔(قطر‎;  为扩张jQuery类本人.为类增加新的点子。

3.1 jQuery.fn.extend(object); 

fn 是什么东西呢。查看jQuery代码,就轻便察觉。

jQuery.fn = jQuery.prototype = {   

init: function( selector, context ) {//….    

//……   

};    

原 来 jQuery.fn = jQuery.prototype.对prototype确定不会目生啦。虽然javascript 未有领会的类的概念,可是用类来驾驭它,会更有益。jQuery就是三个包装得极度好的类,譬如我们用 语句
 $(“#btn1″卡塔尔(قطر‎ 会生成三个 jQuery类的实例。 

jQuery.fn.extend(object卡塔尔(英语:State of Qatar); 对jQuery.prototype进得扩大,便是为jQuery类增多“成员函数”。jQuery类的实例能够利用这么些“成员函数”。

比如大家要开采三个插件,做二个优良的编辑框,当它被点击时,便alert 当前编写框里的剧情。能够如此做:

$.fn.extend({         

     alertWhileClick:function(){        

         $(this).click(function(){       

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

          });        

      }        

});    

$(“#input1″卡塔尔.alertWhileClick(卡塔尔; //页面上为:<input id=”input1”
type=”text”/> 

$(“#input1″卡塔尔(قطر‎ 为一个jQuery实例,当它调用成员方法
alertWhileClick后,便实现了扩展,每一遍被点击时它会先弹出近年来编写里的剧情。

3.2 jQuery.extend(object); 

为jQuery类增添加多类方法,能够知晓为拉长静态方法。如:

$.extend({   

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

});   

便为 jQuery 加多一个为 add 的 “静态方法”,之后便能够在引进jQuery 的地点,使用这一个措施了,$.add(3,4卡塔尔(英语:State of Qatar); //return 7

 

相关文章