(function($) {})(jQuery);는 무엇을 의미합니까?
이제 jQuery 플러그인 작성을 시작하겠습니다.3개의 작은 플러그 인을 작성했지만, 실제로 의미를 파악하지 못한 채 모든 플러그 인에 행을 카피하고 있습니다.이거에 대해 누가 좀 더 말해줄래요?아마 언젠가 틀을 쓸 때 설명이 도움이 될 것이다:)
이것은 무엇을 하는 것입니까?(jQuery를 확장한 것은 알고 있습니다만, 이것에 대해 다른 흥미로운 것은 없습니까?)
(function($) {
})(jQuery);
다음 두 가지 플러그인 쓰기 방법의 차이점은 무엇입니까?
유형 1:
(function($) {
$.fn.jPluginName = {
},
$.fn.jPluginName.defaults = {
}
})(jQuery);
타입 2:
(function($) {
$.jPluginName = {
}
})(jQuery);
타입 3:
(function($){
//Attach this new method to jQuery
$.fn.extend({
var defaults = {
}
var options = $.extend(defaults, options);
//This is where you write your plugin's name
pluginname: function() {
//Iterate over the current set of matched elements
return this.each(function() {
//code to be inserted here
});
}
});
})(jQuery);
난 여기서 멀리 떨어져 있을 수도 있고 아마 모두 같은 걸 의미할 수도 있어.나는 혼란스럽다.타입 1로 쓰고 있던 플러그인으로 동작하지 않는 경우가 있습니다.지금으로서는 타입 3이 가장 우아한 것 같지만, 다른 타입도 알고 싶습니다.
번째 은 "" " " " " "와 같은 코드 입니다.(function(){})()
는 단순히 제 자리에서 실행되는 함수입니다.좀 분해해 봅시다.
1. (
2. function(){}
3. )
4. ()
행 2는 함수를 부모 스코프로 되돌리도록 런타임에 지시하기 위해 괄호로 둘러싸인 플레인 함수입니다.이 함수가 반환되면 해당 함수는 행 4를 사용하여 실행됩니다.이러한 스텝을 읽는 것이 도움이 될 수 있습니다.
1. function(){ .. }
2. (1)
3. 2()
1은 선언이고 2는 함수를 반환하며 3은 함수를 실행 중임을 알 수 있습니다.
사용 방법의 예.
(function(doc){
doc.location = '/';
})(document);//This is passed into the function above
플러그인에 관한 기타 질문:
유형 1: 이것은 실제 플러그인이 아니라 함수로서 전달되는 객체입니다.플러그인은 함수인 경향이 있기 때문입니다.
2:은 「」2: 「」를 하지 않기 에, 이 아닙니다.$.fn
jQuery는 jQuery를 사용합니다.이는 toArray 등의 트래버싱 기능을 추가하려는 경우입니다.
유형 3: 플러그인을 추가하는 가장 좋은 방법입니다.jQuery의 확장 프로토타입은 플러그인 이름과 함수를 가진 개체를 가져와 플러그인 라이브러리에 추가합니다.
에서는, 「아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.(function(){...})()
는 즉시 실행되는 함수 리터럴입니다., 입니다.
이 형식은 함수 내부에서 정의하는 모든 것이 해당 함수에 로컬로 남아 외부로부터 액세스할 수 없기 때문에 정보 숨김 및 캡슐화에 유용합니다(일반적으로 반환된 개체 리터럴을 통해 특별히 노출되지 않는 한).
이 기본 형식의 변형은 jQuery 플러그인(또는 일반적으로 이 모듈 패턴)에서 볼 수 있습니다.이 때문에,
(function($) {
...
})(jQuery);
그 말은 즉, 당신이 실제와 관련된 언급을 맺고 있다는 겁니다.jQuery
오브젝트, 그러나 그것은 로 알려져 있다.$
함수 리터럴의 범위 내에 있습니다.
타입 1은 플러그인이 아닙니다.단순히 오브젝트 리터럴을 할당하는 것입니다.jQuery.fn
. 보통 함수를 할당합니다.jQuery.fn
플러그인은 보통 기능일 뿐입니다.
유형 2는 유형 1과 유사합니다. 여기서 플러그인을 만드는 것은 아닙니다.단순히 오브젝트 리터럴을 추가하는 것입니다.jQuery.fn
.
타입 3은 플러그인이지만, 플러그 인을 작성하는 최선의 방법이나 쉬운 방법은 아닙니다.
이에 대한 자세한 내용은 이 유사한 질문과 답변을 참조하십시오.또한 이 페이지에서는 플러그인 작성에 대해 자세히 설명합니다.
작은 도움말:
// an anonymous function
(function () { console.log('allo') });
// a self invoked anonymous function
(function () { console.log('allo') })();
// a self invoked anonymous function with a parameter called "$"
var jQuery = 'I\'m not jQuery.';
(function ($) { console.log($) })(jQuery);
설명에 약간의 추가 사항만 있습니다.
이 구조(function() {})();
는 IIFE(Imediate Regived Function Expression)라고 불리며 인터프리터가 이 회선에 도달하면 즉시 실행됩니다.따라서 다음 행을 작성할 때:
(function($) {
// do something
})(jQuery);
즉, 인터프리터는 함수를 즉시 호출하여 통과시킵니다.jQuery
파라미터로서 기능내에서 사용됩니다.$
.
실제로 이 예를 통해 어떤 기능을 사용하는지 알 수 있었습니다.(function($) {})(jQuery);
의미하다.
다음 사항을 고려하십시오.
// Clousure declaration (aka anonymous function)
var f = function(x) { return x*x; };
// And use of it
console.log( f(2) ); // Gives: 4
// An inline version (immediately invoked)
console.log( (function(x) { return x*x; })(2) ); // Gives: 4
이제 이 점을 고려해보십시오.
jQuery
는 jQuery 객체를 유지하는 변수입니다.$
는 다른 변수 이름(a
,$b
,a$b
PHP와 같은 특별한 의미는 없습니다.
예제를 다시 살펴볼 수 있다는 것을 알고 있습니다.
var $f = function($) { return $*$; };
var jQuery = 2;
console.log( $f(jQuery) ); // Gives: 4
// An inline version (immediately invoked)
console.log( (function($) { return $*$; })(jQuery) ); // Gives: 4
타입 3은 다음과 같이 동작해야 합니다.
(function($){
//Attach this new method to jQuery
$.fn.extend({
//This is where you write your plugin's name
'pluginname': function(_options) {
// Put defaults inline, no need for another variable...
var options = $.extend({
'defaults': "go here..."
}, _options);
//Iterate over the current set of matched elements
return this.each(function() {
//code to be inserted here
});
}
});
})(jQuery);
jQuery 프로토타입에서 속성을 직접 설정하는 것만으로 확장 기능을 사용할 수 있는 이유는 알 수 없습니다.jQuery 프로토타입은 더 많은 작업 및 더 복잡한 작업에서만 동일한 작업을 수행합니다.
언급URL : https://stackoverflow.com/questions/2937227/what-does-function-jquery-mean
'programing' 카테고리의 다른 글
JavaScript에서 네임스페이스를 선언하려면 어떻게 해야 합니까? (0) | 2022.11.26 |
---|---|
Vue.js 2의 컴포넌트에서 이벤트 청취자에 액세스할 수 있습니까? (0) | 2022.11.26 |
API 호출을 통해 vuex에 새 개체를 추가하고 이미지 URL을 저장하는 방법 (0) | 2022.11.26 |
sql에서 join을 사용하여 like를 사용하는 방법 (0) | 2022.11.26 |
PHP DOMhtml5 태그 오류/경고 (0) | 2022.11.07 |