JQuery 플러그인 개발 샘플 code_jquery

JQuery 플러그인 개발:
클래스 수준 개발, 새로운 전역 기능 개발
객체 수준 개발, Jquery 개체에 대한 새로운 메서드 개발
1. - 전역 메서드 정의

코드 복사 코드는 다음과 같습니다.

jQuery. foo = function( ) {
Alert('테스트입니다.');
};

네임스페이스를 사용하면 네임스페이스 내에서 함수 충돌을 피할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

jQuery.apollo={
fun1 :function( ){
console.log('fun1');
},
fun2:function(){
console.log('fun2')
}
}

2. 객체 수준 개발 - jQuery 객체 메소드 정의

코드 복사 코드는 다음과 같습니다.

(function($) {
$.fn.pluginName = function() {

};
})( jQuery);
//플러그인은 다음과 같이 호출됩니다:
$('#myDiv').pluginName()

옵션을 수락합니다. 플러그인 동작을 제어하는 ​​매개변수

코드 복사 코드는 다음과 같습니다.

(함수($){
$.fn.fun2=함수(옵션){
var defaultOption={
param1:'param1',
param2:'param2'
}
$.extend(defaultOption,option);
console.log (defaultOption);
}
})(jQuery)
$(function(){
//호출됨 this
$("body").fun2({
param1:'new Param1'
})
})

비공개 기능 유지

코드 복사 코드는 다음과 같습니다.

(function($) {
// 플러그인 정의
$.fn.hilight = function(options) {
debug(this)
// ...
}
// 디버깅을 위한 전용 함수
/ / "debug" 메소드는 외부 클로저에서 입력될 수 없으므로 우리 구현에서는 Private입니다.
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight 선택 횟수: ' $obj.size())
};// ...
})(jQuery)