jQuery 插件封装的方法-白红宇

jQuery 插件封装的方法

阅读量：5057 次

发布时间：2019-06-12

本文共 2240 字，大约阅读时间需要 7 分钟。

对于比较复杂的和提供了许多选项可定制的的插件，最好有一个当插件被调用的时候可以被拓展的默认设置(通过使用$.extend)。因此，相对于调用一个有大量参数的插件，你可以调用一个对象参数，包含你了你想覆写的设置。

(function ($) {    $.fn.tooltip = function (options) {  //创建一些默认值，拓展任何被提供的选项  var settings = $.extend({  'location': 'top',  'background-color': 'blue'  }, options); return this.each(function () {  // Tooltip插件代码  }); };})(jQuery);$('div').tooltip({'location': 'left'});

很多时候，一个插件的意图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个方法。这是jQuery的设计之美，是jQuery如此受欢迎的原因之一。因此，要保持一个插件的chainability，你必须确保你的插件返回this关键字。

(function ($) {    $.fn.lockDimensions = function (type) {    return this.each(function () {    var $this = $(this);    if (!type || type == 'width') {    $this.width($this.width());    }    if (!type || type == 'height') {    $this.height($this.height());    }    });    };})(jQuery);$('div').lockDimensions('width').CSS('color', 'red');

在任何情况下，一个单独的插件不应该在jQuery.fnjQuery.fn对象里有多个命名空间。

代码如下:

(function ($) {$.fn.tooltip = function (options) {// this};$.fn.tooltipShow = function () {// is};$.fn.tooltipHide = function () {// bad};$.fn.tooltipUpdate = function (content) {// !!!};})(jQuery);

这是不被鼓励的，因为它.fn使.fn命名空间混乱。为了解决这个问题，你应该收集对象文本中的所有插件的方法，通过传递该方法的字符串名称给插件以调用它们。

代码如下:

(function ($) {var methods = {init: function (options) {// this},show: function () {// is},hide: function () {// good},update: function (content) {// !!!}};$.fn.tooltip = function (method) {// 方法调用if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));} else if (typeof method === 'object' || !method) {return methods.init.apply(this, arguments);} else {$.error('Method' + method + 'does not exist on jQuery.tooltip');}};})(jQuery);//调用init方法$('div').tooltip();//调用init方法$('div').tooltip({foo: 'bar'});// 调用hide方法 $(‘div').tooltip(‘hide');//调用Update方法 $(‘div').tooltip(‘update', ‘This is the new tooltip content!');

参考文章：http://www.jb51.net/article/97493.htm

(

function

($) {

$.fn.tooltip =

function

(options) {

//创建一些默认值，拓展任何被提供的选项

var

settings = $.extend({

'location'

:

'top'

,

'background-color'

:

'blue'

}, options);

return

this

.each(

function

() {

// Tooltip插件代码

});

};

})(jQuery);

$(

'div'

).tooltip({

'location'

:

'left'

});

转载于:https://www.cnblogs.com/tangbuluo/p/8524432.html

你可能感兴趣的文章