[jQuery] 자체 jQuery Plugin - Part 1
7095 단어 jquery plugin
맞습니다. 바로 jQuery의 Plugin 메커니즘을 사용합니다.
근데 jQuery의 Plugin 메커니즘은 이해하기 어려울 것 같은데?사실 하나도 안 그래.다음은 제가 가장 간단한 방식으로 간단한 Plugin을 만드는 방법을 설명해 드리겠습니다.
물론 그 전에 자바스크립트의class,object,variables scope,anonymous function 등 기초를 알아야 한다. 이것들은'JavaScript 대전이라는 책을 참고할 수 있다.
Plugin 스플라인
jQuery의 Plugin을 쓰는 가장 빠른 방법은 기존의 Plugin을 가지고 고치는 것이다. 단지 그 많은 Plugin 중에서 어떻게 좋은 범례를 찾을 수 있겠는가?걱정하지 마세요. 여기는 제가 가장 간단한 샘플을 제공합니다.
jQuery.fn.mytoolbox = function() {
return this.each(function() {
});
};우선, mytoolbox는 우리의plugin 이름으로 jQuery를 사용합니다.fnjQuery의plugin으로 등록할 수 있습니다.그리고 우리 제이큐리.fn.mytoolbox는 익명 편지 (anonymous function) 를 가리키며 콜백이라고도 부른다.이 콜백의 내용은 매우 간단하다. 바로 jQuery의 each 방법을 이용하여 대응하는 동작을 일일이 집행하는 것이다.
특히 익명 편지의this 키워드는 jQuery 물건을 가리키는 것을 주의해야 한다.이 jQuery 물건은 우리가 지정해야 하는 것이니 잠시 후에 다시 한 번 설명하겠습니다.
Plugin 사용
현재 위의 견본을 mytoolbox로 저장합니다.js, 그리고 jquery.js를 같이 놓으세요.그런 다음 다음과 같은 HTML 테스트 파일을 만듭니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery TEST</title>
<style type="text/css">
.test {
border:1px solid #CCC;
cursor:pointer;
padding:3px;
}
</style>
</head>
<body>
<div id="test1" class="test">
！
</div>
<div id="test2" class="test">
！
</div>
<div id="debug"></div>
<script type="text/javascript" src="jquery/1.2.3.js"></script>
<script type="text/javascript" src="jquery/mytoolbox.js"></script>
<script type="text/javascript">
$(function () {
$('.test').mytoolbox();
});
</script>
</body>
</html>먼저 HTML에서 jQuery 편지 라이브러리와 우리가 쓴 Plugin 파일을 인용한 다음에 나는 화면에class가test인div 요소 두 개를 배치했다.다음 코드를 사용하여 Plugin을 호출합니다.
$(function () {
$('.test').mytoolbox();
});이쪽의 의도는 위의 두 개의div를 mytoolbox라는 Plugin에 끼우는 것이다. 이렇게 하면 Plugin이 움직일 수 있다. 간단하지?
동작 추가
물론 이 Plugin은 아무 일도 시작하지 않은 빈 골격일 뿐이다.이제 우리는 그것을 위해 피를 넣고 고기를 첨가해서 움직이게 해야 한다.
먼저 each의 콜백에 한 줄을 간단하게 추가합니다.
jQuery.fn.mytoolbox = function() {
return this.each(function() {
alert(this.id); //
});
};테스트용 HTML 파일을 다시 훑어보면 페이지에서 두 번의 메시지 창이 자동으로 튀어나오는데 그 내용은 각각test1과test2이다.이것은 우리의 Plugin이class가test인 두 개의 div에 확실히 사용되었다는 것을 증명한다.
그런데 지금 두 개의this가 있는데, 그것들은 같은 물건입니까?아니오, 스코프와 촉발 대상이 다르기 때문에 두 개는 다른 것입니다.바깥의this는 jQuery 물건으로 우리가 지정한 $('.test')라는 물건을 가리킨다.each callback의this는div 요소입니다. each는iterator function이기 때문에alert(this.id)는 두 번 실행됩니다.첫 번째this에서는 #test1이div를, 두 번째는 #test2이div를 가리킨다.
참고: 여기서 #test1을 사용하여 id가 test1인 요소를 나타냅니다.
지금은div원소를 누르면alert원소의 id로 바뀌기를 원합니다. 어떻게 해야 합니까?클릭 이벤트를 다음과 같이 변경합니다.
jQuery.fn.mytoolbox = function() {
return this.each(function() {
jQuery(this).click(function () {
alert(this.id);
});
});
};each callback에 있는this는DOM 요소이기 때문에 jQuery () 로this를 포장해야 이 요소의 클릭 이벤트를 쉽게 지정할 수 있습니다.이제 페이지를 다시 훑어보고 어떤div를 선택하면 대응하는 메시지 창이 튀어나올 것입니다.
덧싸다
만약에 each의 콜백에서 여러 번 jQuery를 호출한다면 jQuery라는 몇 글자를 계속 쓰는 것은 정말 힘든 일이다.그리고 jQuery는 $로 간략하게 쓸 수 있지 않나요?그냥 쓰면 안 돼요?물론입니다. 다만 이렇게 하면 다른 자바스크립트 리브라리와 충돌할 수 있습니다.그래서 우리는 다음과 같은 방식으로 우리의 Plugin을 덮어씌워야 한다.
;(function($) {
$.fn.mytoolbox = function() {
return this.each(function() {
$(this).click(function () {
alert(this.id);
});
});
};
})(jQuery);JavaScript는 하나의 작은 괄호 [()] 로 익명 서식을 덮어쓰고, 그 다음에 작은 괄호 [()] 를 받아서 이 익명 서식을 호출할 수 있다.두 번째 그룹의 작은 괄호에는 이 익명 편지식의 매개 변수를 놓을 수 있다.그래서 위의 코드에서, 우리는 Plugin의 코드를 익명 편지로 포괄하고, 매개 변수는 우리가 자주 사용하는 $기호로 포괄한다.이어서 상술한 원리를 이용하여 jQuery라는 분류를 Plugin에 가져오면 Plugin에서 우리가 익숙한 $기호를 즐겁게 사용할 수 있습니다.맨 앞의 분호(;)에 대해서는주로 이 Plugin 파일이 다른 JS 파일과 병합하여 압축될 것을 고려하여 들어왔다.
참고: $은(는) JavaScript에서 올바른 변수 이름입니다.
뒤의 설명은 내가 이 포복 동작을 생략할 것이니 실제 문서에 추가하는 것을 잊지 마세요.
옵션 설정 추가
다음에 저는 each의 콜백 서식이 사용자가 스스로 주문할 수 있도록 하기 위해서 사용자가 설정할 수 있는 옵션이 필요합니다.다른 Plugin과 마찬가지로, 우리 mytoolbox는 JSON 아이템을 받아들일 수 있습니다.
$.fn.mytoolbox = function(settings) {
var _defaultSettings = {
callback: function () {
alert(this.id);
}
};
var _settings = $.extend(_defaultSettings, settings);
return this.each(function() {
$(this).click(_settings.callback);
});
};우선 Plugin에 settings 매개 변수, 즉 일반 Plugin에서 흔히 볼 수 있는 설정 값을 추가합니다.그리고default Settings, 사용자가 settings에 설정값을 지정하지 않았을 때 설정값을 제공할 수 있습니다.
그리고 jQuery에서 제공하는 extend 방법으로 settings에 설정된 값을 덮어씁니다default Settings가 설정한 값을 에 저장합니다settings라는 변수 중;뒤에 저희가 새로운...settings 변수를 우리의 설정값으로 삼다.
지금 저희는...settings에서 콜백 항목을 지정했습니다. (미리 설정한 것은alert입니다.) 그리고div 요소의 클릭 트리거에 지정합니다.이제 이 이벤트 프로세서를 HTML 페이지에서 변경하여alert를 사용하지 않고 div#debug에 결과를 표시합니다.프로그램은 다음과 같습니다.
$(function () {
var debug = $('#debug');
$('.test').mytoolbox({
callback: function () {
debug.html(debug.html() + this.id + '<br />');
}
});
});페이지를 다시 한 번 훑어보고 우리가 상상한 대로 효과가 완성되었는지 봅시다.
트리거 이벤트 수정
지금 우리가 클릭을 사용하지 않고 마우스를 옮기고 싶으면 콜백을 터치한다면?이제 jQuery의 bind 메서드를 대여해야 합니다.
$.fn.mytoolbox = function(settings) {
var _defaultSettings = {
bind: 'click',
callback: function () {
alert(this.id);
}
};
var _settings = $.extend(_defaultSettings, settings);
return this.each(function() {
$(this).bind(_settings.bind, _settings.callback);
});
};클릭 이벤트로 터치할 수 있는bind 설정 항목을 추가합니다.HTML 페이지로 돌아가서 다음과 같이 콜백을 트리거하기 위해 mouseover를 사용합니다.
$(function () {
var debug = $('#debug');
$('.test').mytoolbox({
bind: 'mouseover',
callback: function () {
debug.html(debug.html() + this.id + '<br />');
}
});
});HTML 페이지를 다시 찾습니다. 마우스가div 요소를 옮겼을 때 대응하는 id가 나타나지 않습니까?
이제 jQuery Plugin을 어떻게 만드는지 대충 아시겠죠?다음은 실제 사례를 통해 직접 만든 jQuery Plugin이 주의해야 할 점을 더 많이 소개하겠습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JQuery-tableDnD 드래그 기본 사용 Table Drag and Drop JQuery pluginD is a jQuery plugin that allows you to drag and drop rows within a table for reordering the table data. Basic Usage: 1....
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
