jQuery 两种扩展功能 $.fn.extend、$.extend

(function ($) { $.fn.extend({ itpow: function () {
alert(“www.itpow.com”); } }); })(jQuery); $(“*”).itpow(); (function ($)
{ $.extend({ cftea: function () { alert(“www.itpow.com”); } });
})(jQuery); $.cftea();

jquery插件开辟分为类品级开垦和目的品级开拓

jQuery插件的付出包括三种:

能够见见 $.fn.extend 扩充的效果与利益,是要用 $(“”卡塔尔 包装的目的,而 $.extend 是
$ 直接采取。

类级别($.extend)

jQuery.extend(object)类品级正是用来在jQuery类/命名空间上增添新函数,可以知晓为开展jquery类,最分明的例子是$.ajax(...),ajax方法都是用jQuery.ajax()这么调用的,有一点像
“类名.方法名”
静态方法的调用方式。开辟扩展其格局时使用$.extend方法,即jQuery.extend(object);

意气风发种是类级其他插件开辟,即给jQuery增添新的全局函数,相当于给jQuery类自个儿增加方法。jQuery的全局函数正是归属jQuery命名空间的函数,另风姿洒脱种是目的等第的插件开荒,即给jQuery对象增添方法。上面就三种函数的支付做详细的辨证。

上述都并未参数,要使用参数,能够私下钦赐个数、类型,如若要利用 JSON
对象作为参数字传送入,平常接受上面包车型大巴不二等秘书籍:

jQuery.extend(卡塔尔国 方法有一个重载

上面大家也来写个jQuery.extend(object卡塔尔的事例:

jQuery.extend({
    "minValue": function (a, b) {
        return a < b ? a : b;
    },
    "maxValue": function (a, b) {
        return a > b ? a : b;
    }
});

调用:

var i = 100; j = 101;
var min_v = $.minValue(i, j); // min_v 等于 100
var max_v = $.maxValue(i, j); // max_v 等于 101

重载版本:jQuery.extend([deep], target, object1, [objectN])

用四个或八个别的对象来增加二个对象,重回被扩展的靶子

意气风发旦不钦定target,则给jQuery命名空间本人进行扩充。这有扶助插件我为jQuery扩展新情势

假诺第叁个参数设置为true,则jQuery再次来到一个深档次的别本,递归地复制找到的别的对象。不然的话,别本会与原对象共享布局

未定义的性质将不会被复制,可是从目的的原型世襲的习性将会被复制

参数:

deep: 可选。假设设为true,则递归合併。

target: 待修正对象。

object1: 待归并到第1个指标的对象。

objectN: 可选。待合併到第二个对象的目的

示例1:

//合并 settings 和 options,修改并返回 settings。
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
//结果:
settings == { validate: true, limit: 5, name: "bar" }

示例2:

//合并 defaults 和 options, 不修改 defaults。
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
//结果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

本条重载的不二诀窍,我们平日用来在编辑插件时用自定义插件参数去覆盖插件的暗许参数

1、类等级的插件开采

(function ($) { $.fn.extend({ itpow: function (options) { var defaults =
{ color: “red”, size: 1 }; var opt = $.extend({}, defaults, options);
alert(opt.color + “rn” + opt.size); } }); })(jQuery);
$(“*”).itpow({ size: 2 });

对象等第

对象等第则能够了然为凭借对象的实行,如$("#table").changeColor(...); 这里那么些changeColor呢,正是依附对象的扩充了。
开拓扩大其艺术时利用$.fn.extend方法,即jQuery.fn.extend(object);

## 首先准备好一个架子

;(function($){})(jQuery);

这个架子是你编写插件代码要写入的空间,下面简单解释一下这个架子

1.自执行的匿名函数:是指形如这样的函数: 

(function {// code})();

在jQuery环境下封装自己的插件,首先为避免与其他库的冲突,需要在插件的后面传一个jQuery参数进去,对应的函数里面的参数写入$

2 为避免出现问题,需在插件的前后加入分号(分号的增加并不会影响程序的运行)

3.为什么```(function{// code})();```可以被执行, 而```function{// code}();```却会报错?

首先, 要清楚两者的区别:``` (function {// code})```是表达式, ```function {// code}```是函数声明.    

其次, js"预编译"的特点: js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.    

当js执行到```function(){//code}();```时, 由于```function() {//code}```在"预编译"阶段已经被解释过, js会跳过```function(){//code}```, 试图去执行```();```, 故会报错; 

当js执行到```(function {// code})();```时, 由于```(function{// code})```是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到```();```时, 便会被执行.

另外, 函数转换为表达式的方法并不一定要靠分组操作符(),我们还可以用void操作符,~操作符,!操作符……
例如:

//bootstrap 框架中的插件写法:
!function($){
  //do something;
}(jQuery);

(function($){
  //do something;
})(jQuery); 
是三回事

匿名函数最大的用途是创建闭包(这是JavaScript语言的特性之一),并且还可以构建命名空间,以减少全局变量的使用

例如:

var a=1;
(function(){
var a=100;
})();
alert(a); //弹出 1

## 再上一个架子

;(function($){
$.fn.tab = function(options){
var defaults = {
//种种参数,各类品质
}
var options = $.extend(defaults,options);
this.each(function(卡塔尔国{ //未有必要再作 $(this卡塔尔(قطر‎ ,因为”this”已然是 jQuery
对象了.$(thisState of Qatar 与 $($(‘.tab’卡塔尔国卡塔尔(قطر‎ 是如出一辙的
//种种功效
});
return this; //直接写成return this.each(卡塔尔国这里能够简简单单
}
})(jQuery);

这个架子就是jQuery官方提供的一个标准化的开发模式

fn是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {…..};
};

原来 ```jQuery.fn = jQuery.prototype```,也就是jQuery对象的原型。那```jQuery.fn.extend()```方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法,就相当于为对象添加"成员方法",类的"成员方法"要类的对象才能调用,所以使用 jQuery.fn.extend(object)扩展的方法, jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一 定要区分开来



$.fn.tab  tab是这个功能插件的名字,可任意改变名字

var options = $.extend(defaults,options);  这个是利用extend方法把 defaults对象的方法属性全部整合到 options里,也就是options继承了defaults对象的方法以及属性。这个defaults和options名字是可以随意更改的,只要是满足js的命名规范

this.each(function(){});是实现功能代码的地方

## tab选项卡实例

1.先备好html

  

  •     
  • html     
  • css     
  • js   

  

    

html

    

css

    

js

  

2.现在来写插件代码

;(function($){
$.fn.tab = function(options){
var defaults = {
//各类参数,种种品质
}
var options = $.extend(defaults,options);
this.each(function(){
//各个成效 //能够驾驭成作用代码
var _this = $(this);
_this.find(‘.tab_nav>li’).click(function(){
$(this).addClass(‘current’).siblings().removeClass(‘current’);
var index = $(this).index();
_this.find(‘.tab_content>div’).eq(index).show().siblings().hide();
});
});
return this;
}
})(jQuery);

3.在html代码里我们只需要:

1) 找到外部容器,并调用你所写的tab方法(就是你所写的插件名字):

$.fn.tab = function(options){}

2) 作为可扩展性的插件代码里面的class元素以及事件是不可以写死的;解决这个问题就要在```var defaults = {}```中配置它

$.fn.tab = function(options){
var defaults = {
currentClass:’current’,
tabNav:’.tab_nav>li’,
tabContent:’.tab_content>div’
}
var options = $.fn.extend(defaults,options);
this.each(function(){
var _this = $(this);
_this.find(options.tabNav).click(function(){
$(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);
var index = $(this).index();
_this.find(options.tabContent).eq(index).show().siblings().hide();
});
});
return this;
}

因为extends将default对象的属性以及方法都整合到了options里,这时候只需要用options调用就可以了

4.同样的如果需求是把click事件改为mouseover事件,此时我们需要用到on() or bind() ,这样就方便我们改事件参数啦,如下:

$.fn.tab = function(options){
var defaults = {
currentClass:’current’,
tabNav:’.tab_nav>li’,
tabContent:’.tab_content>div’,
eventType:’click’
}
var options = $.fn.extend(defaults,options);
this.each(function(){
var _this = $(this);
_this.find(options.tabNav).on(options.eventType,function(){
$(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);
var index = $(this).index();
_this.find(options.tabContent).eq(index).show().siblings().hide();
});
});
return this;
}

因为需求是mouseover,这里就不需要改插件源码啦,直接在html里的js代码进行相应的变化就ok啦

5:jQuery最强大的特性之一莫过于链式操作,此时如果你在$('.tab').tab()后面追加操作,你会发现无法实现,如下:

$(‘.tab’).tab().find(‘.tab_nav>li’).css(‘background’,’red’);

但是当你return this把对象返回出去的时候你会发现又重新实现了

## 总结

jQuery 插件使库把最有用的功能抽象成可重用代码,这将进一步提高开发效率。下面是你开发jQuery 插件时的注意事项:

总是把插件包装在闭包中 { /* plugin goes here */ })( jQuery );

不在插件函数的立即作用域中额外包装 this 关键字

总是让插件函数返回 this 关键字以保持 chainability ,除非插件有真正的返回值

不要传给插件大量参数,应该传一个可以覆盖插件默认选项的设置对象

在单个插件中,不要让一个以上的名称空间搞乱了 jQuery.fn 对象;总是为方法、事件和数据定义名称空间

据说90%以上的插件就是用$.fn.extend()方式实现的,因为jquery的特色就是先选择dom节点,然后链式处理这些节点。还有不常见的$.extend()插件编写方式,该方式编写的插件是在jquery命名空间内添加方法,也就是说在使用时不需要先选择dom节点,使用时直接$.method()即可

接下来我们一起来写个高亮的jqury插件

### 定一个闭包区域,防止插件"污染"

(function ($) {})(window.jQuery); //window.jQuery = window.$ = jQuery;

### jQuery.fn.extend(object)扩展jquery 方法,制作插件

(function ($State of Qatar { //闭包约束命名空间
$.fn.extend({
“highLight”:function(options){
//do something
}
});
})(window.jQuery);

### 给插件默认参数,实现 插件的功能

//闭包限制命名空间
(function ($) {
$.fn.extend({
“highLight”: function (options) {
var opts = $.extend({}, defaluts, options卡塔尔; //使用jQuery.extend
覆盖插件私下认可参数
this.each(function () { //这里的this 就是 jQuery对象
//遍历全体的要高亮的dom,当调用 highLight(卡塔尔国插件的是一个集结的时候
var $this = $(this卡塔尔(قطر‎;
//获取当前dom的jQuery对象,这里this是时下循环的dom 
$this.css({ //依据参数来安装 dom的样式
backgroundColor: opts.background,
color: opts.foreground
});
});
}
});
var defaluts = { //暗中认可参数
foreground: ‘red’,
background: ‘yellow’
};
})(window.jQuery);

到这一步,高亮插件基本功能已经具备了。调用代码如下:

$(function () {
$(“p”State of Qatar.highLight(State of Qatar; //调用自定义 高亮插件
});

这里只能直接调用,不能链式调用。我们知道jQuey是可以链式调用的,就是可以在一个jQuery对象上调用多个方法,如:

$(‘#id’).css({marginTop:’100px’}).addAttr(“title”,”测试“);

但是我们上面的插件,就不能这样链式调用了。比如:

$(“p”卡塔尔(قطر‎.highLight(卡塔尔国.css({marginTop:’100px’}卡塔尔(قطر‎;
//将会报找不到css方法,原因在于笔者的自定义插件在成就功效后,未有将
jQuery对象给重返出来

接下来,return jQuery对象,让我们的插件也支持链式调用。(其实很简单,就是执行完我们插件代码的时候将jQuery对像return 出来,和上面的代码没啥区别)

//闭包限制命名空间
(function ($) {
$.fn.extend({
“highLight”: function (options) {
var opts = $.extend({}, defaluts, options卡塔尔国; //使用jQuery.extend
覆盖插件私下认可参数
return this.each(function (卡塔尔国 { /这里的this 就是 jQuery对象。这里return
为了支持链式调用
//遍历全体的要高亮的dom,当调用 highLight(卡塔尔(قطر‎插件的是一个相会的时候
var $this = $(this卡塔尔国;
//获取当前dom的jQuery对象,这里this是时下巡回的dom 
$this.css({ //根据参数来安装 dom的体制
backgroundColor: opts.background,
color: opts.foreground
});
});
}
});
var defaluts = { //暗中同意参数
foreground: ‘red’,
background: ‘yellow’
};
})(window.jQuery);

### 暴露公共方法给别人来扩展你的插件(如果有需求的话)
比如的高亮插件有一个format方法来格式话高亮文本,则我们可将它写成公共的,暴露给插件使用者,不同的使用者根据自己的需求来重写该format方法,从而是高亮文本可以呈现不同的格式

//公共的格式化方法.
默许是加粗,客户能够通过覆盖该方法达到不一样的格式化效果
$.fn.highLight.format = function (str) {
return “” + str + “”;
}

### 插件私有方法

有些时候,我们的插件需要一些私有方法,不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范    

### 其他的一些设置,如:为你的插件加入元数据插件的支持将使其变得更强大。

完整的高亮插件代码如下:

//闭包约束命名空间
(function ($) {
$.fn.extend({
“highLight”: function (options) {
if (!isValid(options))
return this;
var opts = $.extend({}, defaluts, options卡塔尔国; //使用jQuery.extend
覆盖插件暗中认可参数
return this.each(function (State of Qatar { //这里的this 正是 jQuery对象。这里return
为了援助链式调用
//遍历全部的要高亮的dom,当调用 highLight(卡塔尔(قطر‎插件的是三个集结的时候
var $this = $(this卡塔尔(قطر‎; //获取当前dom 的
jQuery对象,这里的this是时下循环的dom
//依据参数来安装 dom的体裁
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
//格式化高亮文本
var markup = $this.html();
markup = $.fn.highLight.format(markup);
$this.html(markup);
});
}
});

//默认参数
var defaluts = {
    foreground: 'red',
    background: 'yellow'
};
//公共的格式化 方法. 默认是加粗,用户可以通过覆盖该方法达到不同的格式化效果
$.fn.highLight.format = function (str) {
    return "<strong>" + str + "</strong>";
}
//私有方法,检测参数是否合法
function isValid(options) {
    return !options || (options && typeof options === "object") ? true : false;
}

})(window.jQuery);

调用:

//调用:调用者覆盖 插件揭示的共公方法
$.fn.highLight.format = function (txt) {
return “” + txt + “
}
$(function () {
$(“p”).highLight({foreground: ‘orange’, background: ‘#ccc’ }卡塔尔;
//调用自定义高亮插件
});

类级其余插件开拓最间接的明亮正是给jQuery类加多类方法,能够了然为增多静态方法。标准的例证正是$.AJAX(卡塔尔国这些函数,将函数定义于jQuery的命名空间中。关于类级其他插件开辟能够利用如下二种方式张开扩充:

$.extend 是用于统生机勃勃参数,若是某风流浪漫性质未有在 options 中钦定,那么就采用defaults 的。

1.1 增加一个新的全局函数

丰盛叁个大局函数,大家只需如下概念: 

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.’);};

 

 

1.2 扩张多个全局函数

增加多少个全局函数,可选取如下概念: 

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 + ‘”.’卡塔尔国;  };   调
用时和多个函数的同样的:jQuery.foo(卡塔尔;jQuery.bar(卡塔尔;或许$.foo(State of Qatar;$.bar(‘bar’卡塔尔(قطر‎;  jQuery.foo = function(State of Qatar { 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 + ‘”.’卡塔尔;};
调用时和一个函数的同等的:jQuery.foo(卡塔尔;jQuery.bar(卡塔尔;或许$.foo(卡塔尔(قطر‎;$.bar(‘bar’卡塔尔国;

1.3 使用jQuery.extend(object); 

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 +'”.’); } });

 

1.4 使用命名空间

纵然在jQuery命名空间中,大家严令禁止利用了汪洋的javaScript函数名和变量名。但是照旧不可防止某个函数或变量老马于其余jQuery插件冲突,因而大家习于旧贯将部分主意封装到另叁个自定义的命名空间。

Java 代码
jQuery.myPlugin = {          foo:function(卡塔尔 {          alert(‘This is a test. This is only a test.’卡塔尔国;          },          bar:function(paramState of Qatar {          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.’卡塔尔; },
bar:function(param卡塔尔国 { alert(‘This function takes a parameter, which is
“‘ + param + ‘”.’卡塔尔; }
};选拔命名空间的函数仍然为全局函数,调用时使用的秘籍:$.myPlugin.foo(State of Qatar;
$.myPlugin.bar(‘baz’卡塔尔;

 

透过那一个本事(使用独立的插件名),我们得以制止命名空间内函数的冲突。

2、对象级其余插件开荒

指标品级的插件开辟必要如下的三种样式:、

形式1:  

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);

形式2: 

Java 代码
(function($卡塔尔(قطر‎ {       $.fn.pluginName = function(卡塔尔国 {          // Our plugin implementation code goes here.     };     }卡塔尔(jQuery卡塔尔国;      (function($){ $.fn.pluginName = function(State of Qatar { // Our plugin implementation code goes
here. }; }卡塔尔(jQuery卡塔尔国;       
上面定义了一个jQuery函数,形参是$,函数定义完结以往,把jQuery这几个实参传递进去.立刻调用施行。那样的实惠是,大家在写jQuery插件
时,也足以使用$那个外号,而不会与prototype引起矛盾.

2.1 在JQuery名称空间下申圣元(Synutra卡塔尔国个名字

这是三个单纯插件的剧本。如若你的台本中隐含多少个插件,可能互逆的插件(举个例子:
$.fn.doSomething(卡塔尔(قطر‎ 和
$.fn.undoSomething(卡塔尔国),那么您须求注明几个函数名字。可是,平常当我们编辑三个插件时,力求仅使用一个名字来含有它的保有内容。我们的以身作则插件命名字为“highlight“    

 

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

 

不过如果咱们必要表明我们的贯彻代码为七个函数该
怎么做?有成都百货上千原因:设计上的急需;那样做更便于或更易读的兑现;何况那样更符合面向对象。 那真是三个小事,把效果与利益完成分解成多少个函数而不增扩展余的
命名空间。出于意识到和行使函数是javascript中最基本的类对象,大家能够那样做。犹如此外对象雷同,函数能够被内定为属性。因而我们已经宣称
“hilight”为jQuery的性子对象,任何其它的天性只怕函数大家须求暴流露来的,都得以在”hilight” 函数中被声称属性。稍后继续。
2.2 经受options参数以调节插件的行为

让大家为大家的插件加多效果钦定前途色和背景象的机能。大家也许会让选项像多少个options对象传递给插件函数。举例:   

Java 代码
// plugin definition    $.fn.hilight = function(optionsState of Qatar {      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’    }卡塔尔国;     //
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’ });

 

2.3 拆穿插件的暗中同意设置

小编们相应对上面代码的大器晚成种修正是揭露插件的暗中同意设置。那对于让插件的使用者更易于用比较少的代码覆盖和改造插件。接下来大家最初接收函数对象。     

 

Java 代码
// plugin definition    $.fn.hilight = function(optionsState of Qatar {      // 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, optionsState 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(State of Qatar;        // 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卡塔尔国 { // iterate and
reformat each matched element return this.each(function(State of Qatar { 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>’; };      
大家超级轻易的支撑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(卡塔尔(قطر‎;     <!– 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(State of Qatar;

 

2.7 整合
上边使大家的事例达成后的代码:

    

Java 代码 // 创设一个闭包    (function($卡塔尔 {      // 插件的定
义      $.fn.hilight = function(options卡塔尔(قطر‎ {        debug(thisState of Qatar;        // build main options before element iteration        var opts = $.extend({}, $.fn.hilight.defaults, options卡塔尔国;        // iterate and reformat each matched element        return this.each(function(卡塔尔(قطر‎ {          $this = $(thisState of Qatar;          // 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          markup = $.fn.hilight.format(markupState of Qatar;          $this.html(markup);        }卡塔尔(قطر‎;      };      // 私
有函
数:debugging      function debug($objState of Qatar {        if (window.console && window.console.logState of Qatar          window.console.log(‘hilight selection count: ‘ + $obj.size(卡塔尔国State of Qatar;      };      // 定
义揭露format函数      $.fn.hilight.format = function(txtState of Qatar {        return ‘&
lt;strong>’ + txt + ‘</strong>’;      };      // 插件的
defaults      $.fn.hilight.defaults = {        foreground: ‘red’,        background: ‘yellow’      };    // 闭
包截至    }卡塔尔国(jQueryState of Qatar;     // 成立一个闭包 (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 = $(thisState of Qatar; // build element specific
options var o = $.meta ? $.extend({}, opts, $this.data(卡塔尔国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(markupState 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 ‘<strong>’ + txt + ‘</strong>’; }; //
插件的defaults $.fn.hilight.defaults = { foreground: ‘red’, background:
‘yellow’ }; // 闭包截止 }卡塔尔(قطر‎(jQueryState of Qatar;

 

这段布置已经让自家创造了强有力相符规范的插件。笔者希望它能让您也能幸不辱命。

3、总结

jQuery为开辟插件提拱了三个办法,分别是:

jQuery.fn.extend(object卡塔尔国;  给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卡塔尔; 对jQuery.prototype进得扩展,就是为jQuery类增添“成员函数”。jQuery类的实例基本上能用这几个“成员函数”。

举例大家要支付叁个插件,做三个非同小可的编辑框,当它被点击时,便alert 当前编辑框里的内容。能够这么做:

$.fn.extend({         

     alertWhileClick:function(){        

         $(this).click(function(){       

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

          });        

      }        

});    

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

$(“#input1″State of Qatar 为八个jQuery实例,当它调用成员方法
alertWhileClick后,便实现了扩张,每趟被点击时它会先弹出脚下编写制定里的源委。

3.2 jQuery.extend(object); 

为jQuery类增加增多类方法,能够领略为拉长静态方法。如:

$.extend({   

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

});   

便为 jQuery 增添二个为 add 的 “静态方法”,之后便得以在引入jQuery 的地点,使用这几个措施了,$.add(3,4卡塔尔(قطر‎; //return 7

 

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图