jQuery 플러그인 캡슐화 방법
- 高洛峰원래의
- 2016-12-06 15:52:011210검색
jQuery 플러그인 및 메소드 확장은 매우 강력하며 개발 시간을 많이 절약할 수 있습니다. 이 문서에서는 jQuery 플러그인 개발의 기본, 모범 사례 및 일반적인 함정에 대해 간략하게 설명합니다.
1. 시작하기
jQuery 플러그인 작성은 jQuery.fn에 새 함수 속성을 추가하는 것으로 시작됩니다. 여기에 추가된 객체 속성의 이름은 플러그인의 이름입니다. :
. 코드는 다음과 같습니다.
jQuery.fn.myPlugin = function(){
//你自己的插件代码
};
사용자들이 아주 좋아하는 기호는 어디에 있나요? 여전히 존재하지만 다른 JavaScript 라이브러리와의 충돌을 피하기 위해 jQuery를 자체 실행 폐쇄 프로그램에 전달하는 것이 좋습니다. 여기서 jQuery는 기호로 매핑되어 다른 라이브러리가 $ 기호를 덮어쓰는 것을 방지합니다.
코드는 다음과 같습니다.
(function ($) {
$.fn.myPlugin = function () {
//你自己的插件代码
};
})(jQuery);
이 폐쇄형 프로그램에서는 $ 기호를 제한 없이 사용하여 jQuery를 표현할 수 있습니다. 기능.
2. 환경
이제 실제 플러그인 코드 작성을 시작할 수 있습니다. 하지만 그 전에 플러그인이 위치한 환경에 대한 아이디어가 있어야 합니다. 플러그인 범위에서 this 키워드는 플러그인이 실행할 jQuery 객체를 나타냅니다. 콜백을 포함하는 다른 jQuery 함수에서는 this 키워드가 기본 DOM 요소를 나타내기 때문에 여기서 일반적인 오해가 발생하기 쉽습니다. . 이로 인해 개발자는 아래와 같이 실수로 jQuery에서 this 키워드를 불필요하게 래핑하는 경우가 많습니다.
코드는 다음과 같습니다.
(function ($) {
$.fn.myPlugin = function () {
//此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
//$(this)等同于 $($('#element'));
this.fadeIn('normal', function () {
//此处callback函数中this关键字代表一个DOM元素
});
};
})(jQuery);
$('#element').myPlugin();
3. 기본 지식
이제 기본을 이해했습니다. jQuery 플러그인 Knowledge 중 어떤 일을 하는 플러그인을 작성해 보겠습니다.
코드는 다음과 같습니다.
(function ($) {
$.fn.maxHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度
这是一个简单的插件，利用.height()返回页面中高度最大的div元素的高度。4. 연쇄성 유지
플러그인의 목적은 수집된 요소를 수정하는 것일 때가 많습니다. 어떤 식으로든 체인의 다음 메서드에 전달됩니다. 이것이 jQuery 디자인의 아름다움이자 jQuery가 인기를 끄는 이유 중 하나입니다. 따라서 플러그인의 연결성을 유지하려면 플러그인이 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는 .css와 같은 jQuery 메서드로 계속 제어할 수 있습니다. 따라서 플러그인이 고유 값을 반환하지 않는 경우 해당 범위 내에서 항상 this 키워드를 반환해야 합니다. 또한 플러그인에 전달된 매개변수가 플러그인 범위 내에서 전달될 것이라고 추론할 수 있습니다. 따라서 이전 예에서는 문자열 'width'가 플러그인의 유형 매개변수가 됩니다.
5. 기본값 및 옵션
사용자 정의 가능한 옵션을 많이 제공하는 보다 복잡한 플러그인의 경우 플러그인을 확장할 수 있는 기본 설정을 갖는 것이 가장 좋습니다. ($.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'
});
이 예에서는 호출 시 기본 설정의 위치 옵션이 재정의됩니다. 툴팁 플러그인. 배경색 옵션은 기본값으로 유지되므로 최종 호출되는 설정 값은
입니다. 코드는
{
'location': 'left',
'background-color': 'blue'
}이는 개발자가 사용 가능한 모든 옵션을 정의하지 않고도 고도로 구성 가능한 플러그인을 제공할 수 있는 매우 유연한 방법입니다. 6. 네임스페이스 플러그인 이름을 올바르게 지정하는 것은 플러그인 개발에 있어 매우 중요한 부분입니다. 올바른 네임스페이스를 사용하면 동일한 페이지에 있는 다른 플러그인이나 다른 코드가 플러그인을 덮어쓸 가능성이 매우 낮다는 것을 보장할 수 있습니다. 네임스페이스는 메소드, 이벤트 및 데이터를 더 잘 추적하는 데 도움이 되기 때문에 플러그인 개발자로서의 삶을 더 쉽게 만들어줍니다. 7. 플러그인 방법 어쨌든 단일 플러그인은 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!');
이러한 유형의 플러그인 아키텍처를 사용하면 상위 메소드에 모든 메소드를 캡슐화할 수 있습니다. 패키지에 메서드의 문자열 이름과 이 메서드를 호출하는 데 필요한 추가 매개 변수를 전달합니다. 이러한 유형의 캡슐화 및 아키텍처는 jQuery 플러그인 커뮤니티의 표준이며 jQuery UI의 플러그인 및 위젯을 포함한 수많은 플러그인에서 사용됩니다. 8. 이벤트 바인드 메소드의 잘 알려지지 않은 기능은 이벤트 네임스페이스 바인딩을 허용합니다. 플러그인이 이벤트를 바인딩하는 경우 이 이벤트에 네임스페이스를 지정하는 것이 좋습니다. 이렇게 하면 바인딩을 해제할 때 이미 바인딩되었을 수 있는 동일한 유형의 다른 이벤트를 방해하지 않습니다. '.'를 통해 바인딩해야 하는 이벤트에 네임스페이스를 추가하면 됩니다. (function ($) {
var methods = {
init: function (options) {
return this.each(function () {
$(window).bind('resize.tooltip', methods.reposition);
});
},
destroy: function () {
return this.each(function () {
$(window).unbind('.tooltip');
})
},
reposition: function () {
//...
},
show: function () {
//...
},
hide: function () {
//...
},
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);
$('#fun').tooltip();
//一段时间之后… …
$(‘#fun').tooltip(‘destroy');
입니다.
在这个例子中，当tooltip通过init方法初始化时，它将reposition方法绑定到resize事件并给reposition非那方法赋予命名空间通过追加.tooltip。 稍后， 当开发人员需要销毁tooltip的时候，我们可以同时解除其中reposition方法和resize事件的绑定，通过传递reposition的命名空间给插件。 这使我们能够安全地解除事件的绑定并不会影响到此插件之外的绑定。
九、数据
通常在插件开发的时候，你可能需要记录或者检查你的插件是否已经被初始化给了一个元素。 使用jQuery的data方法是一个很好的基于元素的记录变量的途径。尽管如此，相对于记录大量的不同名字的分离的data, 使用一个单独的对象保存所有变量，并通过一个单独的命名空间读取这个对象不失为一个更好的方法。
. 代码如下:
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text: $this.attr('title')
});
// If the plugin hasn't been initialized yet
if (!data) {
/*
Do more setup stuff here
*/
$(this).data('tooltip', {
target: $this,
tooltip: tooltip
});
}
});
},
destroy: function () {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip');
// Namespacing FTW
$(window).unbind('.tooltip');
data.tooltip.remove();
$this.removeData('tooltip');
})
},
reposition: function () {
// ...
},
show: function () {
// ...
},
hide: function () {
// ...
},
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);
将数据通过命名空间封装在一个对象中，可以更容易的从一个集中的位置读取所有插件的属性。
十、总结和最佳做法
编写jQuery插件允许你做出库，将最有用的功能集成到可重用的代码，可以节省开发者的时间，使开发更高效。 开发jQuery插件时，要牢记：
1.始终包裹在一个封闭的插件：
. 代码如下:
(function($) {
/* plugin goes here */
})(jQuery);
2.不要冗余包裹this关键字在插件的功能范围内
3.除非插件返回特定值，否则总是返回this关键字来维持chainability 。
4.传递一个可拓展的默认对象参数而不是大量的参数给插件。
5.不要在一个插件中多次命名不同方法。
3.始终命名空间的方法，事件和数据。
最后加一个自己写的放大镜的插件`
(function($){$.fn.Fdj=function(){
$('#smallImg').on('mouseover', function() {
$('#slider').show();
})
$('#smallImg').on('mouseout', function() {
$('#slider').hide();
})
$('#smallImg').on('mousemove', function(e) {
var x = e.clientX - $('#slider').width() / 2;
var y = e.clientY - $('#slider').height() / 2;
if(x <= 0) {
x = 0
}
if(x > $('#smallImg').width() - $('#slider').width()) {
x = $('#smallImg').width() - $('#slider').width();
}
if(y <= 0) {
y = 0
}
if(y > $('#smallImg').height() - $('#slider').height()) {
y = $('#smallImg').height() - $('#slider').height();
}
$('#slider').css({
'left': x,
'top': y
})
var X=x/$('#smallImg').width()*800
var Y=y/$('#smallImg').height()*800
$('#img').css({
left:-X,
top:-Y
})
})
}
})(jQuery)