Jquery插件开发

Query插件的开发包括两种:

一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法

 

一添加新的全局函数

测试

$(function () {
    $.first();
    $.second('second');
    $.a();
    $.b();
    $.zjy.fxx('fusfcsdfk');
});

$.first = function () {
    alert('first');
}
//输入参数的情况
$.second = function (param) {
    alert(param);
}

//同时添加多个全局函数
$.extend({
    a: function () { alert('a'); },
    b: function () { alert('b'); }
});
//给全局函数添加命名空间的情况,避免函数名称重复
$.zjy = {
fxx : function (param) {
    alert(param);
}
}

对象级别的插件开发

参考资料

http://docs.jquery.com/Plugins/Authoring

http://www.learningjquery.com/2007/10/a-plugin-development-pattern

 

 

//a1是页面的dom元素的id

$.fn.plguName=function(){};这就是插件的开发的模式,

还有一种闭包模式,这个模式可能更好的避免冲突。

(function($){})(jQuery)

 


第一个例子

$.fn.high=function()

{

  this.html('this is jquery html');//改变调用这个插件的dom元素的html内容,在方法体里面this已经是jquery元素了不用再写$(this).

}

 

第二个例子,输入参数。这个模式基本也是jquery的模式,其中defaults是默认参数,options是调用时候传入的参数。

使用一个options对象可以避免出现多个形参,书写复杂,都包装在一个options中。

var opts = $.extend(defaults, options);这行代码,是使用defaults对象重载组合options对象,如果defaults对象中已经有某个属性,options当中也有一个同样的属性,那么会使用options属性。如果一个属性中defaults没有,options中有,也会合并到defaults。 或者说最后生成一个新对象opts


$.fn.high = function (options) {
    var defaults = {
        foreground: "red",
        background: "blue"
    };
    var opts = $.extend(defaults, options);
    alert(opts.foreground);
    alert(opts.title);
    this.html('jquery 插件 html');
}

调用代码

$(function () {
    $("#a1").high({foreground:"abc",title:"hello"});
})

会发现alert出来,abc,hello

 

第三个列子,公开插件的默认配置

 

在第二个例子中high插件有个内部的配置defaults,这个配置是已经插件内部写好的,如果要修改必须修改整个插件,而且配置是插件私有的,外部不能访问设置。第三个例子提供插件公开内部配置的方法,可以更简单快捷的修改插件的默认配置,

第二个例子中,defaults写在插件high内部,这次我们要把defaults当作high的属性写在外面。

$.fn.high = function (options) {
    var opts = $.extend({}, $.fn.high.defaults, options);//第一个参数是空对象
    alert(opts.foreground);
    alert(opts.title);
    this.html('jquery 插件 html');
}
$.fn.high.defaults = {
    foreground:'red',
    background:'blue'
};

//调用代码

$(function () {
    $.fn.high.defaults.foreground = 'yellow';
    $("#a1").high({ title: 'abc' });
});

会弹出yellow,abc

 

/*************************

这个方法也提供另外一个方式来为插件做开发,使用其他插件开发自己的插件,在自己的插件方法中可以调用其他已经写好的插件。

比如有个插件给字体颜色加黑

$.fn.high.format = function (txt) {
    return '<b>' + txt + '</b>';
}

就可以在$.fn.high插件中调用$.fun.high.format这个插件。

$.fn.high = function (options) {

    var opts = $.extend({}, $.fn.high.defaults, options);
    alert(opts.foreground);
    alert(opts.title);

    this.html('jquery 插件 html');
    var temp = $.fn.high.format(this.html());
    this.html(temp);
}


关于闭包的用途

 

(function($){})(jQuery) 这是闭包的开发代码模式

闭包的最大用途在于私有化,保护私有方法,属性等。防止本来只是让插件自己调用的方法被用户调用,如果用户调用了插件专用的方法,肯定需要做更多的处理。

代码示例

(function ($) {
    $.fn.high = function (options) {
    this.html('jquery 插件 html');
    debug();
}
    function debug()
    {
        alert('do something');
    }
})(jQuery)

这个代码中debug方法只能插件high使用,外部用户是调用不了的

 

/****************************

如果插件中dom元素要使用debug方法,必须使用jquery 绑定事件的方式来使用这个方法,不能使用html标签上添加事件的方法

 


本文使用Blog_Backup未注册版本导出,请到soft.pt42.com注册。

posted @ 2011-08-17 01:09 音乐啤酒 阅读(...) 评论(...) 编辑 收藏