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注册。