jQuery 플러그인이 무엇인가요? 일반적인 jQuery 플러그인은 주로 객체 메소드를 캡슐화하는 플러그인, 전역 기능을 캡슐화하는 플러그인, 선택기 플러그인의 세 가지 유형으로 나뉩니다. 그러면 이 세 가지 jQuery 플러그인을 기반으로 각 jQuery 플러그인을 작성하고 사용하는 방법은 무엇일까요? 다음으로 jQuery 플러그인의 사용법과 작성에 대해 이야기해보겠습니다.
jQuery 플러그인 분류:
1. 객체 메소드를 캡슐화하는 플러그인
이러한 종류의 플러그인은 선택기를 통해 얻은 jQuery 객체를 조작하는 데 사용됩니다. -안에. .
2. 전역 함수를 캡슐화하는 플러그인
jQuery 네임스페이스에 독립적인 함수를 추가할 수 있습니다. 예를 들어 jQuery.noCon conflict() 메서드, 일반적으로 사용되는 jQuery.ajax() 메서드, 첫 번째 공백을 제거하는 jQuery.trim() 메서드는 모두 jQuery 내의 전역 함수로 커널에 첨부되는 플러그인입니다.
3. 선택기 플러그인
어떤 경우에는 선택기 플러그인을 사용해야 합니다.
플러그인 기본 포인트
1. 다른 JavaScript 라이브러리 플러그인과의 혼동을 피하기 위해 jQuery 플러그인의 파일 이름은 jquery.[플러그인 이름].js로 지정하는 것이 좋습니다.
2. 모든 개체 메서드는 jQuery.fn 개체에 연결되어야 하며 모든 전역 함수는 jQuery 개체 자체에 연결되어야 합니다.
3. 내부 this가 DOM 요소를 가리키는 click() 메서드와 같은 일반적인 방법과 달리 플러그인 내부에서 this는 현재 선택기를 통해 얻은 jQuery 객체를 가리킵니다.
4. this.each를 통해 모든 요소를 탐색할 수 있습니다.
5. 모든 메소드나 함수 플러그인은 세미콜론으로 끝나야 합니다. 그렇지 않으면 압축 중에 문제가 발생할 수 있습니다. 보안을 강화하려면 플러그인 헤더에 세미콜론을 추가하여 다른 사람의 불규칙한 코드가 플러그인에 영향을 미치는 것을 방지할 수도 있습니다.
6. 플러그인은 플러그인의 연결 가능한 작업을 보장하기 위해 jQuery 개체를 반환해야 합니다. 플러그인이 문자열이나 배열 등과 같이 얻어야 하는 일부 수량을 반환해야 하는 경우가 아니면
7. 플러그인 내에서 jQuery 객체의 별칭으로 $를 사용하지 말고 대신 전체 jQuery를 사용하여 표현하세요. 물론, 이 문제를 방지하기 위해 폐쇄 기술을 사용할 수도 있습니다. 그러면 플러그인에서 $를 jQuery의 별칭으로 계속 사용할 수 있습니다. 많은 플러그인이 이를 수행합니다.
플러그인의 클로저
클로저와 관련하여 ECMAScript는 이에 대해 간단한 설명을 제공합니다. 내부 함수가 허용되며(즉, 함수 정의 및 함수 표현식이 다른 함수 본문에 위치함) 이러한 내부 함수에 액세스할 수 있습니다. 모든 지역 변수, 매개변수 및 기타 내부 함수가 위치한 외부 함수에 선언된 내부 함수 중 하나가 이를 포함하는 외부 함수 외부에서 호출되면 클로저를 형성합니다. 즉, 외부 함수가 반환된 후에 내부 함수가 실행됩니다. 이 내부 함수가 실행될 때에도 외부 함수의 지역 변수, 매개변수 및 기타 내부 함수에 액세스해야 합니다. 이러한 지역 변수, 매개변수, 함수 선언(초기)의 값은 외부 함수가 반환될 때의 값이지만 내부 함수의 영향도 받게 됩니다.
먼저 익명 함수 function()을 정의합니다.{/*여기에 코드를 배치하세요*/}, 그런 다음 괄호로 묶어 (function(){/*여기에 코드를 배치하세요*/})가 되고 마지막으로 ()를 전달합니다. 연산자가 실행됩니다. 내부 함수에서 사용하기 위해 매개변수를 전달할 수 있습니다.
jQuery는 jQuery 기능을 확장하는 두 가지 방법, 즉 jQuery.fn.extend() 메서드와 jQuery.extend() 메서드를 제공합니다. 전자는 앞에서 언급한 세 가지 플러그인 유형 중 첫 번째에 사용되며, 후자는 후자의 두 플러그인을 확장하는 데 사용됩니다. 두 메소드 모두 Object 유형의 매개변수 하나를 허용합니다. Object 개체의 "이름/값 쌍"은 각각 "함수 또는 메서드 이름/함수 본문"을 나타냅니다.
jQuery 객체를 확장할 수 있는 것 외에도 jQuery.extend() 메서드에는 기존 객체 객체를 사용하고 확장하는 강력한 기능도 있습니다.
jQuery 코드는 다음과 같습니다.
jQuery.extend(target,obj1,…….[objN])
用一个或多个其它对象来扩展一个对象，然后返回被扩展的对象。
例如合并settings对象和options对象，修改并返回settings对象。
var settings={validate:false,limit:5,name:”foo”};
var options={validate:true,name:”bar”};
var newOptions=jQuery.extend(settings,options);
로그인 후 복사
결과는 다음과 같습니다.
newOptins={valitdate:true,limit:5,name:”bar”};
로그인 후 복사
jQuery.extend() 메서드는 다음 코드에 표시된 대로 플러그인 메서드의 일련의 기본 매개변수를 설정하는 데 자주 사용됩니다.
function foo(options){
options=jQuery.extend({
name:”bar”,
limit:5,
datatype:”xml”
},options);
};
로그인 후 복사
foo() 메소드가 호출되면 전달된 매개변수 options 객체에 해당 값이 설정되면 설정된 값이 사용되고, 그렇지 않으면 기본값이 사용됩니다. 코드는 다음과 같습니다.
jQuery.extend() 메서드를 사용하면 전달된 매개변수로 기본값을 쉽게 재정의할 수 있습니다. 이 시점에서 메서드에 대한 호출은 매개변수 목록 대신 맵이 전달된다는 점을 제외하면 동일하게 유지됩니다. 이 메커니즘은 각 매개변수를 탐지하는 기존 방법보다 더 유연할 뿐만 아니라 더 간결합니다. 또한 명명된 매개변수를 사용한다는 것은 새로운 옵션을 추가해도 과거에 작성된 코드에 영향을 주지 않으므로 개발자가 더 직관적이고 명확하게 사용할 수 있다는 것을 의미합니다.
jQuery 플러그인 작성
1. jQuery 객체 메소드를 캡슐화하는 플러그인
색상을 설정하고 가져오는 플러그인 작성
먼저 color() 플러그인 작성 방법을 소개합니다. . 이 플러그인은 다음 두 가지 기능을 구현하는 데 사용됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
