jQuery 플러그인 개발 구문 요약

jQuery 플러그인 개발에서 $을 자주 볼 수 있습니다.extend({....}); $.fn.extend({...}); (function($){...})(jQuery);이런 구조들은 여기서 이 문법들의 의미를 간단하게 총결해 보겠다.
1. (function($)(jQuery);표현식의 의미:
4

이 말의 뜻은 쉽게 말하면 익명 함수이다

function(arg){...}익명 함수를 정의했습니다. 인자는arg입니다.함수를 호출할 때 함수 뒤에 괄호와 실참을 써야 한다. 조작부호의 우선순위 때문에 함수 자체도 괄호를 사용해야 한다. 즉, (function(arg) {...})(param).이것은 매개 변수가arg인 익명 함수를 정의하고param을 매개 변수로 이 익명 함수를 호출하는 것과 같다.
(function($){...}) (jQuery)에서 인삼만 $를 사용하는 이유는 다른 라이브러리와 충돌하지 않기 위해서 jQuery를 실제 사용합니다.
위의 구문은 var fn = function ($) {....}과 같습니다.fn(jQuery);의 간소화, 그러나 주의해야 할 것은fn은 존재하지 않는다는 것이다.이 함수는 직접 정의한 다음 실행됩니다. 이렇게 압축됩니다. ($) {...}(jQuery)입니다.
4

대비 $(function():

$(function(){});모두 $(docunemt)로 씁니다.ready(function(){});DOM을 로드한 후 ready() 방법을 실행한다는 의미입니다.DOM 로드가 완료된 후에 실행하고 미리 정의된 함수를 실행하는 데 사용됩니다

(function($){....})(jQuery)는 미리 정의해야 할 함수를 정의하고 익명 함수()(param)를 즉시 실행하는 데 사용한다. 단지 파라미터는 jQuery 대상이 다음과 같다. var a =function(params) {....};a(jQuery);

2. $.extend({....});및 $.fn.extend({...});의 역할 및 차이점:
이것은 jQuery가 플러그인을 개발하기 위해 아치를 올리는 두 가지 방법으로 우리는 대상을 대상으로 하는 사상을 채택하여 이해하기가 비교적 쉽다.jQuery는 아주 잘 봉인된 클래스입니다. 예를 들어 문장 $("#btn") 을 사용하면 jQuery 클래스의 실례를 만들 수 있습니다.

jQuery.extend(object);jQuery 클래스에 클래스를 추가하는 방법은 정적 방법을 추가하는 것으로 이해할 수 있습니다

jQuery.extend({
	min: function(a, b) { return a < b ? a : b; },
	max: function(a, b) { return a > b ? a : b; }
});

jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5

ObjectjQuery.extend (target,object1, [objectN]) 는 한 개 이상의 다른 대상으로 한 대상을 확장하고 확장된 대상을 되돌려줍니다

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options);
settings == { validate: true, limit: 5, name: "bar" } //

jQuery.fn.extend(object); 그래, jQuery.prototype 확장은 jQuery 클래스에 '구성원 함수' 를 추가하는 것입니다.jQuery 클래스의 인스턴스는 이 구성원 함수를 사용할 수 있습니다

예를 들어 우리는 플러그인을 개발하여 특수한 편집 상자를 만들어야 한다. 이 플러그인이 눌렸을 때, 현재 편집 상자의 내용을 알 수 있다.다음을 수행할 수 있습니다.

$.fn.extend({          
     alertWhileClick:function() {            
           $(this).click(function(){                 
                  alert($(this).val());           
            });           
      }       
});       
$("#input1").alertWhileClick(); //

$("# input1") 은 jQuery 실례입니다. 구성원 방법인alertWhileClick을 호출하면 확장이 이루어집니다. 클릭할 때마다 현재 편집된 내용을 먼저 팝업합니다.
3. jQuery 플러그인 요약:
4

먼저 jQuery(function() {}를 보십시오.모두 jQuery(document)로 씁니다.ready(function(){ });DOM 로드가 완료된 후 eady () 방법이 실행되었다는 의미입니다

다시 보기(function() (jQuery);사실상 실행 () (para) 익명 방법으로 jQuery 대상을 전달했을 뿐이다.

jQuery(function(){　});작업 DOM 객체를 저장하는 데 사용되는 코드로, 코드를 실행할 때 DOM 객체가 이미 존재합니다.개발 플러그인의 코드를 저장하는 데 사용할 수 없습니다. jQuery 대상이 전달되지 않았기 때문에 외부는 jQuery를 통과합니다.method도 그 중의 방법 (함수) 을 호출할 수 없습니다.

(function(){　})(jQuery);개발 플러그인을 저장하는 데 사용되는 코드로 그 중 코드를 실행할 때 DOM이 반드시 존재하지 않기 때문에 직접 DOM 조작을 자동으로 실행하는 코드입니다

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jQuery 플러그인 개발 구문 요약

좋은 웹페이지 즐겨찾기