누군가가 jQuery 플러그인 디자인 패턴이 어떻게 완성되고 어떻게 작동 하는지를 개념적으로 (그리고 잘하면 나를 이해할 수 있도록) 아주 간단한 기본 예제를 자바 스크립트에 적어 둘 수 있을까?jQuery와 같은 자바 스크립트 플러그인 디자인 패턴
jQuery 용 플러그인을 만드는 방법에 관심이 없습니다 (여기에 jQuery 코드가 전혀 표시되지 않습니다.). 간단한 설명 (아마도 약간의 자바 스크립트 코드가 있음)을 의 플러그인 개념에 대해 설명하는 데 관심이 있습니다.
Plz jQuery 코드를 읽으려면 회신하지 말고 시도해 보았습니다.하지만 너무 복잡합니다. 그렇지 않으면 여기에 질문을 게시하지 않았을 것입니다.
감사합니다.
다른 많은 js 프레임 워크와 마찬가지로 javascript 프로토 타입 오리엔테이션을 사용합니다.
예를 들어 당신은
var alertHelloWorld = function() {
alert('hello world');
}
간단한 함수를 선언 할 수 있습니다 그리고 당신이
document.doMyAlert();
을 할 경우
document.doMyAlert = alertHelloWorld;
(DOM 노드 포함) 기존의 객체에 넥타이 alertHelloWorld 함수가 실행됩니다.
당신은 here
jQuery를 프로토 타입 자바 스크립트 객체에 대한 자세한 내용을보실 수 있습니다은 fn라는 내부 객체에 포함 된 함수 라이브러리가 있습니다. 이것들은 모든 jQuery 객체에서 호출 할 수있는 것들입니다.
$("div.someClass")을 수행하면 해당 클래스의 모든 <div> 요소를 포함하는 jQuery 객체가 생성됩니다. 이제 $("div.someClass").each(someFunction)을 사용하여 각각 someFunction을 적용 할 수 있습니다. 즉, each()은 fn (이 경우 내장 된 기능)에 저장된 기능 중 하나입니다.
fn 내부 개체를 확장 (추가)하면 동일한 구문으로 사용자 지정 함수를 자동으로 사용할 수 있습니다. log()이라는 모든 요소를 콘솔에 기록하는 기능이 있다고 가정합니다. $.fn에이 함수를 추가 한 다음 $("div.someClass").log()으로 사용할 수 있습니다.
fn 객체에 추가 된 모든 기능
this 키워드가 당신이 사용했던 jQuery 오브젝트를 가리 킵니다 방식으로 호출됩니다.
일반적으로 사용자 지정 함수 끝에 this을 반환하므로 메서드 체인이 끊어지지 않습니다. $("div.someClass").log().each(someFunction).
$.fn 개체에 기능을 추가하는 방법에는 여러 가지가 있지만 다른 방법보다 안전합니다. 꽤 안전한 방법은 다음과 같습니다.
Tomalak은 이미 알아 두어야 할 모든 것을 게시했습니다.
jQuery가 키워드로 트릭을 수행하는 데 도움이되는 마지막 사항이 있습니다. 그것이 따른 방법으로 불리는
적용() 정말 직관을 알려줍니다으로 그 프레임 워크/플러그인 사용자가 단지 이을 사용하므로 추상화를 만드는 데 도움이
var somefunction=function(){
alert(this.text);
}
var anObject={text:"hello"};
somefunction.apply(anObject);
//alert "hello" will happen
,
불행하게도 귀하의 코드 내부가 어떤 당신의 예제는 프로토 타이핑을 전혀 사용하지 않습니다. 이것은 자바 스크립트에서 함수가 퍼스트 클래스 객체이며 다른 변수처럼 전달되고 할당 될 수 있기 때문에 효과가 있습니다. – adamnfish
예, 프로토 타입 객체는 이와 같이 선언 된 객체에 존재하며 비슷한 방식으로 작동합니다. 하단 링크에서 복사/붙여 넣기가 가능합니다. Object.prototype.inObj = 1; 기능 A() { this.inA = 2; } A.prototype.inAProto = 3; B.prototype = new A; // B의 프로토 타입 체인에 A를 연결하십시오. B.prototype.constructor = B; 기능 B() { this.inB = 4; } B.prototype.inBProto = 5; x = 새 B; document.write (x.inObj + ','+ x.inA + ','+ x.inAProto + ','+ x.inB + ','+ x.inBProto); – Benoit