jquery插件代码怎么写( 四 )


这真是一个麻烦事,把功能实现分解成多个函数而不增加多余的命名空间 。出于认识到和利用函数是javascript中最基本的类对象,我们可以这样做 。
就像其他对象一样,函数可以被指定为属性 。因此我们已经声明“hilight”为jQuery的属性对象,任何其他的属性或者函数我们需要暴露出来的,都可以在"hilight" 函数中被声明属性 。
稍后继续 。2.2 接受options参数以控制插件的行为让我们为我们的插件添加功能指定前景色和背景色的功能 。
我们也许会让选项像一个options对象传递给插件函数 。例如: // 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 暴露插件的默认设置我们应该对上面代码的一种改进是暴露插件的默认设置 。
这对于让插件的使用者更容易用较少的代码覆盖和修改插件 。接下来我们开始利用函数对象 。
// 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(); 如你所见,我们允许使用 。
5.jQuery怎么编写插件呢jQuery插件的开发包括两种:一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法 。
jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法 。下面就两种函数的开发做详细的说明 。
1、类级别的插件开发类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法 。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中 。
关于类级别的插件开发可以采用如下几种形式进行扩展:1.1 添加一个新的全局函数添加一个全局函数,我们只需如下定义:Java代码 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.'); }; 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 +'".'); } }); 1.4 使用命名空间虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名 。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间 。
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'); 通过这个技巧(使用独立的插件名),我们可以避免命名空间内函数的冲突 。2、对象级别的插件开发对象级别的插件开发需要如下的两种形式:、形式1: Java代码 (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); 上面定义了一个jQuery函数,形参是$,函数定义完成之后,把jQuery这个实参传递进去.立即调用执行 。