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로 지정하고 다음 코드를 추가합니다.
코드 복사
this.fadeOut('normal ');
};
})(jQuery)
사용 방법 매우 간단합니다.
새 HTML 페이지를 만들고 jquery 파일과 MyPlugin.js 파일을 지금 이 페이지로 가져옵니다.
코드 복사
코드는 다음과 같습니다.
저자별 최신 기사
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
