여기서 무엇을 fn
의미합니까?
jQuery.fn.jquery
답변
jQuery에서 fn
속성은 속성의 별칭 일뿐 prototype
입니다.
jQuery
식별자 (또는 $
) 단지이다 생성자 함수 , 생성자의 프로토 타입에서 상속 그것으로 생성 된 모든 인스턴스.
간단한 생성자 함수 :
function Test() {
this.a = 'a';
}
Test.prototype.b = 'b';
var test = new Test();
test.a; // "a", own property
test.b; // "b", inherited property
jQuery의 아키텍처와 유사한 간단한 구조 :
(function() {
var foo = function(arg) { // core constructor
// ensure to use the `new` operator
if (!(this instanceof foo))
return new foo(arg);
// store an argument for this example
this.myArg = arg;
//..
};
// create `fn` alias to `prototype` property
foo.fn = foo.prototype = {
init: function () {/*...*/}
//...
};
// expose the library
window.foo = foo;
})();
// Extension:
foo.fn.myPlugin = function () {
alert(this.myArg);
return this; // return `this` for chainability
};
foo("bar").myPlugin(); // alerts "bar"
답변
jQuery.fn
의 약칭으로 정의됩니다 jQuery.prototype
. 로부터 소스 코드 :
jQuery.fn = jQuery.prototype = {
// ...
}
이는 jQuery.fn.jquery
의 별칭이며 jQuery.prototype.jquery
현재 jQuery 버전을 반환합니다. 다시 소스 코드에서 :
// The current version of jQuery being used
jquery: "@VERSION",
답변
fn
말 그대로 jquery를 참조하십시오 prototype
.
이 코드 줄은 소스 코드에 있습니다.
jQuery.fn = jQuery.prototype = {
//list of functions available to the jQuery api
}
그러나 실제 도구 뒤에는 fn
고유 한 기능을 jQuery에 연결하는 기능이 있습니다. jquery는 함수의 부모 범위이므로 this
jquery 객체를 참조하십시오.
$.fn.myExtension = function(){
var currentjQueryObject = this;
//work with currentObject
return this;//you can include this if you would like to support chaining
};
여기 간단한 예가 있습니다. 파란색 테두리를 넣는 텍스트와 파란색 텍스트를 색칠하는 두 가지 확장을 만들고 싶다고 말하고 체인을 만들고 싶습니다.
jsFiddle Demo
$.fn.blueBorder = function(){
this.each(function(){
$(this).css("border","solid blue 2px");
});
return this;
};
$.fn.blueText = function(){
this.each(function(){
$(this).css("color","blue");
});
return this;
};
이제 다음과 같은 클래스에 대해 사용할 수 있습니다.
$('.blue').blueBorder().blueText();
(이것은 다른 클래스 이름을 적용하는 것과 같은 CSS로 가장 잘 수행된다는 것을 알고 있지만 개념을 보여주는 데모 일뿐입니다.)
이 답변 은 본격적인 확장의 좋은 예입니다.
답변
우리가 가지고있는 jQuery를 소스 코드에서 jQuery.fn = jQuery.prototype = {...}
부터 jQuery.prototype
객체는의 값이 jQuery.fn
단순히 같은 개체에 대한 참조가 될 것입니다 jQuery.prototype
이미 참조.
이를 확인하기 위해 jQuery.fn === jQuery.prototype
그것이 평가 true
하는지 (그것이 있는지) 확인한 다음 동일한 객체를 참조 할 수 있습니다