jquery插件代码怎么写( 五 )


这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.2.1 在JQuery名称空间下申明一个名字这是一个单一插件的脚本 。如果你的脚本中包含多个插件,或者互逆的插件(例如: $.fn.doSomething() 和$.fn.undoSomething()),那么你需要声明多个函数名字 。
但是,通常当我们编写一个插件时,力求仅使用一个名字来包含它的所有内容 。我们的示例插件命名为“highlight“ Java代码 $.fn.hilight = function() { // Our plugin implementation code goes here. }; 我们的插件通过这样被调用: $('#myDiv').hilight(); 但是如果我们需要分解我们的实现代码为多个函数该怎么办?有很多原因:设计上的需要;这样做更容易或更易读的实现;而且这样更符合面向对象 。
这真是一个麻烦事,把功能实现分解成多个函数而不增加多余的命名空间 。出于认识到和利用函数是javascript中最基本的类对象,我们可以这样做 。
就像其他对象一样,函数可以被指定为属性 。因此我们已经声明“hilight”为jQuery的属性对象,任何其他的属性或者函数我们需要暴露出来的,都可以在"hilight" 函数中被声明属性 。
稍后继续 。2.2 接受options参数以控制插件的行为让我们为我们的插件添加功能指定前景色和背景色的功能 。
我们也许会让选项像一个options对象传递给插件函数 。例如: 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); // Our plugin implementation code goes here. }; 我们的插件可以这样被调用: $('#myDiv').hilight({ foreground: 'blue' }); 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.h 。
6.怎样编写一个jQuery插件为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法 。
1. jQuery.extend() 方法有一个重载 。jQuery.extend(object),一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法,例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的,有点像 “类名.方法名” 静态方法的调用方式 。
下面我们也来写个jQuery.extend(object)的例子://扩展jQuery对象本身 jQuery.extend({ "minValue": function (a, b) { ///《summary> /// 比较两个值,返回最小值 ///《/summary> return a 《 b ? a : b; }, "maxValue": function (a, b) { ///《summary> /// 比较两个值,返回最大值 ///《/summary> 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返回一个深层次的副本,递归地复制找到的任何对象 。