me_jquery로 JQuery 플러그인 개발 알아보기

codeproject 웹사이트를 탐색하던 중 갑자기 Jquery에서 플러그인 작성 방법
E-writing을 잘하시는 분이라면 위의 링크를 읽어보시면 됩니다.
이제 위의 웹사이트와 내 생각을 결합하여 이 글을 작성하게 되었습니다. 큰 분들의 지지와 이해를 바랍니다. . . 큰 새들이 날아다닙니다. . . 사진 촬영을 환영합니다.
출처:

【1】Jquery에서 플러그인 작성하는 방법

【2】Sharp JQuery 책

【3】RascallySnake
의 JQuery.extend()에 대한 자세한 설명
플러그 작성 목적- in은 기존에 가치를 추가하는 것입니다. 일련의 메서드나 기능을 캡슐화하여 다른 장소에서 재사용하고 나중에 유지 관리를 용이하게 할 수 있습니다.
JQuery는 요소와 스크립트를 관리하는 간단하고 효과적인 방법을 제공할 뿐만 아니라 자체 메서드와 추가 기능을 핵심 모듈에 추가하는 뛰어난 메커니즘도 제공합니다. 이 메커니즘을 통해 Jquery를 사용하면 자체 플러그인을 만들고 개발 프로세스의 효율성을 높일 수 있습니다.

1.1JQuery 플러그인은 3가지 유형으로 구분됩니다.
(1) 객체 메소드를 캡슐화하는 플러그인(즉, 객체 수준 개발)
이러한 유형의 플러그인은 오늘 이야기해야 할 플러그인입니다.
(2) 전역 함수를 캡슐화하는 플러그인(클래스 수준 개발)
은 JQuery 네임스페이스에 독립적인 함수를 추가할 수 있다는 의미입니다.
전역 함수를 추가하려면 다음과 같이 정의하면 됩니다.
jQuery.foo = function() {
alert('이것은 테스트입니다. 이것은 단지 테스트입니다.')
}
물론 여러 전역 함수를 추가할 수도 있습니다.

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

jQuery.foo = function() {
alert('이것은 테스트일 뿐입니다.')
}; param) {
alert('이 함수는 "' param '"이라는 매개변수를 사용합니다.');
}

호출되면 함수와 동일합니다. : jQuery.foo();jQuery.bar(); 또는 $.foo();$.bar('bar');
(3) 선택기 플러그인
1.2 JQuery 플러그 작성 시 주의사항 -ins:
(1) 플러그인 권장 사항 명명 방법은 다음과 같습니다: jquery.[플러그인 이름].js
(2) 모든 개체 메서드는 JQuery.fn 개체에 연결되어야 하며 모든 전역 함수는 다음과 같습니다. JQuery 개체 자체에 연결됩니다.
(3) 플러그인 내부에서 this는 내부 this가 DOM 요소를 가리키는 일반적인 방법과 달리 선택기를 통해 현재 얻은 JQuery 객체를 가리킵니다.
(4) this.each를 통해 모든 요소를 ​​탐색할 수 있습니다.
(5) 모든 메소드나 함수 플러그인은 세미콜론으로 끝나야 합니다. 그렇지 않으면 압축 중에 문제가 발생할 수 있습니다. 보다 안전한 작성을 위해서는 플러그인 헤더에 세미콜론(;)을 추가하여 비표준 코드가 플러그인에 영향을 미치는 것을 방지할 수 있습니다.
(6) 플러그인은 플러그인의 연결 가능한 작업을 보장하기 위해 JQuery 개체를 반환해야 합니다.
(7) 플러그인 내부에서 JQuery 객체의 별칭으로 $를 사용하지 말고 완전한 JQuery를 사용하여 이를 표현하세요. 이렇게 하면 충돌을 피할 수 있습니다.
1.3 JQuery 플러그인의 메커니즘
JQuery는 JQuery 기능을 확장하는 두 가지 방법을 제공합니다. 즉,
①jQuery.fn.extend()
②jQuery.extend()
첫 번째는 앞서 언급한 플러그인 형태의 첫 번째 경우이고, 두 번째는 다음 두 가지를 가리킨다. 사례.
플러그인에서 jQuery.extend()의 매우 중요한 기능은 기존 객체의 객체를 확장하는 것입니다.
예:
var newSrc=$.extend(dest,src1,src2,src3...)
src1, src2, src3...을 dest로 병합한다는 의미이며 반환 값은 다음과 같습니다. 병합된 대상에서 메서드가 병합되었음을 확인할 수 있습니다.
예:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
얻은 결과
result={name:"Jerry",age:21,sex:"Boy"}
자세한 내용은 다음을 참조하세요.
jQuery.extend 함수 세부 설명 내부에 이 방법에 대한 설명이 잘 나와 있습니다.
공식 웹사이트:
JQuery.extend() 및 JQuery.fn.extend()
네임스페이스 사용
jQuery 네임스페이스에 있지만 다수의 JavaScript 함수 이름과 변수 이름을 사용하는 것은 금지되어 있습니다. 그러나 일부 함수 또는 변수 이름이 다른 jQuery 플러그인과 충돌하는 것은 여전히 ​​불가피하므로 일부 메소드를 다른 사용자 정의 네임스페이스로 캡슐화하는 데 익숙합니다.

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

jQuery.myPlugin = {
foo:function() {
alert('이것은 테스트입니다. 이것은 단지 테스트일 뿐입니다.')
},
bar: function(param) {
alert('이 함수는 "' param '"인 매개변수를 사용합니다.');
}
}

사용하는 네임스페이스 함수 은 여전히 ​​전역 함수이며 호출 시 사용되는 방법은 다음과 같습니다.

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

$.myPlugin.foo();
$.myPlugin.bar('baz')

2. 🎜> JQuery 플러그인을 작성해야 하는 경우 $.fn 객체 뒤에 속성 이름을 추가해야 합니다. 이 속성 이름은 실제로 플러그인 이름입니다. 일반적인 프레임워크는 다음과 같습니다.

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

(function ( $ ) {
$.fn.myPlugin = function() {
// 여기에 기능적 요구사항 작성을 시작하세요
}
})( jQuery ); >이제 작성해야 합니다. 플러그인의 기능은 매우 간단합니다. 개체를 천천히 숨기는 것입니다. fadeOut() 메서드를 사용하면 됩니다.
자, VS 2012를 엽니다. 새 jscript 파일을 만들고 이름을 MyPlugin.js로 지정하고 다음 코드를 추가합니다.

코드 복사

코드는 다음과 같습니다. (function ($) { $.fn.myPlugin = function () {

this.fadeOut('normal ');

};
})(jQuery)



사용 방법 매우 간단합니다.

새 HTML 페이지를 만들고 jquery 파일과 MyPlugin.js 파일을 지금 이 페이지로 가져옵니다.


코드 복사

코드는 다음과 같습니다. > ;

js 코드:

코드 복사

코드는 다음과 같습니다.

맙소사

자, 이제 웹페이지에서 버튼을 클릭하면 div가 천천히 숨겨집니다. . . 우리가 설정한 것이 정상이므로 그 안에 일부 값을 설정할 수도 있습니다.
이 앱에 아래와 같이 스마트 프롬프트가 있다는 점이 매우 기쁩니다.

가자!

3. 플러그인은 여러 요소 제어에 사용됩니다.

3.1 다중 요소 컨트롤에서 사용

위에서 JQuery 플러그인을 작성할 때 주의해야 할 네 번째 사항에는 순회를 원할 경우 이것을 사용하면 된다고 적혀 있습니다. 각 방법. $("ID").each는 jquery 객체, 배열 및 컬렉션을 탐색할 수 있습니다.
알겠습니다. 이를 알고 새 코드는 다음과 같습니다.


코드 복사

코드는 다음과 같습니다. (함수 ($) { $.fn.hoverElement = 함수 () { this.each(함수 () {

$(this).hover(

함수 () {
$(this).addClass("추가");
},
function () {
$(this).removeClass("제거")
}
); 🎜>})
}
})(jQuery)


위에서는 주로 .each() 메서드를 사용하여 탐색합니다. 코드는 매우 간단합니다. 현재 개체의 배경색 CSS 스타일을 "추가"와 "제거" 사이에서 직접 전환합니다.

HTML 코드는

코드 복사

코드는 다음과 같습니다. < ;div class="hoverText"> 첫 번째 버튼..

두 번째 버튼..

세 번째 버튼..

JS 코드:

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

매우 간단하고 설명이 없습니다.
3.2 체인운영
체인운영? 당신은 그것을 모두 들었습니다. . . 예를 들어 다음 문장은 다음과 같습니다.
$("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000) ;
현재 요소 뒤에 "."을 사용하면 더 많은 작업을 수행할 수 있습니다. 이번 액션은 특히 시크하다.
그렇다면 어떻게 이런 효과를 얻을 수 있을까요? 매우 간단합니다. 물건을 다시 제자리에 놓기만 하면 됩니다. 위의 여섯 번째 사항에 유의하세요. 플러그인은 플러그인의 연결 가능한 작업을 보장하기 위해 JQuery 개체를 반환해야 합니다.
지금도 예시를 살펴보겠습니다.

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

(함수 ($) {
$.fn.hoverElement = 함수 () {
return this.each(함수 () {
$(this).hover(
함수 ( ) {
$ (this).addClass("추가");
},
function () {
$(this).removeClass("제거")
} >);
})
}
})(jQuery)


코드는 동일하며 유일한 차이점은 this.each(function () { A 이 방법으로 체인 작업을 구현했습니다.

코드를 복사합니다. 코드는 다음과 같습니다. $(document).ready(function () {

$(".hoverText").hoverElement().css("color","yellow");

});


텍스트가 노란색으로 변한 것을 볼 수 있습니다.

4 나만의 플러그인을 커스터마이즈하세요

상용 플러그인의 경우, 스타일은 필수입니다.가장 일반적인 너비, 높이, URL, 색상 등 다양한 스타일을 입력하여 개발자의 기본 스타일을 변경할 수 있습니다. 이러한 사용자 정의 항목이 없으면 개발이 진행됩니다. 다음 예는 객체를 가리키면 텍스트, 배경색, 전경색의 세 가지 속성을 변경할 수 있음을 의미합니다. , 물론 사용자가 설정하지 않으면 이러한 유형의 플러그인 개발을 정의하기 위해 기본값
을 제공합니다. 프레임워크는 $.fn입니다. YouPlugin = function (options) {...}
일부 게으른 사람들을 방지하기 위해 몇 가지 기본값을 설정해야 합니다. 설정되지 않은 경우 이러한 기본값을 사용합니다.
var defaultVal = {
텍스트: '마우스가 끝났습니다',
ForeColor: 'red',
BackColor: 'gray'
}
기본값 및 값은 어떻게 전달됩니까? 사용자가 결합되었나요? 이를 위해서는 처음에 이야기했던 $.extend() 지식이 필요합니다.
var obj = $.extend(defaultVal, options);
이 경우 사용자 정의 값이 기본 사용자 값을 덮어씁니다. 사용자가 값을 정의하지 않으면 시스템 정의 값이 사용됩니다.
코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. (function ($) {

$.fn.textHover = function (options) {//options는 매개변수가 많다는 것을 나타내기 위해 자주 사용됩니다.

var defaultVal = {
Text: '귀하의 마우스는 over',
ForeColor: 'red',
BackColor: 'gray'
}
　　　 //기본값
var obj = $.extend(defaultVal, options); return this.each(function () {
var selObject = $(this);//현재 개체 가져오기
var oldText = selObject.text();//현재 개체의 텍스트 값 가져오기
var oldBgColor = selObject.css("ground- color");//현재 개체의 배경색 가져오기
var oldColor = selObject.css("color");//현재 개체의 글꼴 색상 가져오기
selObject.hover(function () {//정의 호버 메서드.
selObject.text(obj.Text);//Assignment
selObject.css("Background-color", obj.BackColor) ;//할당
selObject.css(" color", obj.ForeColor);//값 할당
},
function () {
selObject.text(oldText)
selObject; .css("배경색", oldBgColor);
selObject.css("color", oldColor)
}
}); (jQuery)


코드도 매우 간단하므로 지금은 장황하게 설명하지 않겠습니다.
어떻게 사용하나요? 매우 간단합니다.
HTML 코드:

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

여기에 마우스를 올려보세요.....

🎜>여기에 마우스를 올려주세요.....

JS 코드:

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

$(document).ready(function () {
$('#div1').textHover({
Text : '끝낼 예정입니다..',
ForeColor: 'yellow',
BackColor: 'Red'
})
$('#div2').textHover({ Text: '저는 두 번째 div입니다..' })
})

도움이 되었기를 바랍니다.
자, 지금까지는 이것이 플러그인 개발의 기본 요소였습니다. 원래는 나중에 더 복잡한 코드가 있어서 같이 올렸으니 다음 섹션을 기다려주세요!

소스코드 다운로드