JavaScript 자체 실행 기능 및 jQuery 확장 방법

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

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

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

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

(function () {

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

  init();
})();

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

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

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

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

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

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

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

위 방식으로 정의된 확장 메서드는 레이블 선택기 $("button")와 같은 jQuery 선택기를 통해 호출해야 합니다. myMethod(args)

JS 자체 실행 함수와 jQuery 확장 메서드를 이해한 후 두 가지를 결합합니다.

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

(function (jq) {

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

  jq.extend({
    'myMethod': function () {
      init();
    }
  })
})(jQuery);

설명: 이 자체 실행 함수는 jQuery 객체를 매개변수로 받은 다음 내부적으로 확장을 정의합니다. jQuery용 myMethod 메서드 이 메서드는 실제 논리 코드 초기화 함수를 실행합니다.

호출:

<script src="jquery-3.2.1.js"></script>
<script src="custome.js"></script>
<script>

 $(function () {
  $.myMethod();
 });

</script>

설명:

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


관련 추천:

js 함수의 자체 실행 함수

Javascript 자체 실행 함수의 유사 네임스페이스 캡슐화 방법_javascript 기술

에서 클로저 및 자체 실행 함수 사용 수많은 전역 변수 문제를 해결하는 javascript_javascript 기술

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