JS 자체 실행 기능 및 jQuery 확장을 사용하는 방법

이번에는 JS 자체 실행 기능 기능과 jQuery 확장 기능 사용법을 알려드리겠습니다. JS 자체 실행 기능과 jQuery 확장 기능의 주의사항은 무엇이며, 다음은 실제 사례입니다. 살펴보겠습니다. .

저희는 보통 별도의 JS 파일에 JS 코드를 작성한 후 해당 파일을 페이지에 소개합니다. 하지만 소개 후에 가끔 변수 이름 또는 함수 이름이 다른 JS 코드와 충돌하는 문제가 발생할 수 있습니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까? 범위 격리. JS에서는 함수별로 범위를 구분합니다. JS 코드를 호출용 함수로 캡슐화하면 변수 이름/함수 이름 충돌 문제를 피할 수 있지만, 캡슐화된 함수 자체가 다른 함수와 겹칠 수 있으므로 완벽하지는 않습니다. -실행 기능.

자체 실행 함수는 한 쌍의 괄호를 사용하여 익명 함수를 래핑합니다. 괄호를 추가하면(매개변수 전달) 즉시 실행됩니다. 함수에는 이름이 없기 때문에 범위가 완전히 분리되고 함수 이름이 충돌합니다. 기본 형태는 다음과 같습니다:

(function () {
  console.log('do something');
})();

예를 들어 custome.js 파일에 일부 JS 로직을 작성하고 이를 init 함수에 캡슐화했습니다. 아래와 같이 자체 정의 함수 init를 자체 실행 함수로 래핑합니다.

rreee

html로 custome.js를 소개하면: 자체 실행 기능이 즉시 실행된 후 내부적으로 정의된 init 기능이 실행됩니다.

그러나 자체 실행 함수의 즉각적인 실행 특성으로 인해 호출이 어렵습니다. jQuery 확장 메서드를 정의하면 이 문제를 해결할 수 있고, 자체 실행 기능을 호출하고 실행하는 데 주도권을 가질 수 있습니다.

먼저 jQuery 확장 메서드를 정의하는 기본 형식을 살펴보겠습니다.

(function () {
  function init() {
    console.log('execute init...');
  }
  init();
})();

이런 식으로 위에서 정의한 메소드는 $.myMethod()나 jQuery.myMethod()를 통해 호출할 수 있다.

jQuery 확장 메서드를 정의하는 또 다른 방법이 있습니다: .fn

jQuery.extend({
  'myMethod': function () {
    console.log('do something');
  }
});

위와 같이 정의된 확장 메서드는 태그 선택기 $("button").myMethod(args)

등의 jQuery 선택기를 통해 호출해야 합니다. JS 자체 실행 기능과 jQuery 확장 방법을 이해한 후 두 가지를 결합합니다.

아래에서는 자체 실행 함수를 즉시 실행하여 jQuery 확장 메서드를 정의하는 기능을 사용합니다.

jQuery.fn.extend({
  'myMethod': function () {
    console.log('do something');;
  }
});

이 자체 실행 함수는 jQuery 개체를 매개 변수로 받은 다음 내부적으로 실제 논리 코드 init 함수를 실행하는 jQuery용 확장 메서드 myMethod를 정의합니다.

전화:

(function (jq) {
  function init() {
    console.log('do something');
  }
  jq.extend({
    'myMethod': function () {
      init();
    }
  })
})(jQuery);

설명:

jQuery 파일이 도입된 후 jQuery 객체를 전역적으로 사용할 수 있습니다.
그런 다음 자체 실행 함수가 jQuery 객체를 매개변수로 수신하고 즉시 내부적으로 실행되는 사용자 정의 JS 파일 custome.js가 도입됩니다. jQuery를 위한 확장 메소드 myMethod를 정의합니다
그런 다음 페이지가 로드된 후 $.meMethod() 또는 jQuery.myMethod()를 호출하여 init 함수를 실행할 수 있습니다. ​​​​​

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! RECEMEDRENDED 읽기 : vue2

vue-resource 인터셉터에서 ref를 사용하기위한 단계에 대한 설명 된 정보를 설정하여 헤더 정보를 설정하는 ajax 비동기 요청 메소드 전송 메소드를 보내십시오.

위 내용은 JS 자체 실행 기능 및 jQuery 확장을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!