program story

jquery 문서 내부 또는 외부 함수 준비

inputbox 2020. 12. 12. 10:41
반응형

jquery 문서 내부 또는 외부 함수 준비


지금까지 $(document).ready()특정 사용자 상호 작용에 사용되는 간단한 함수를 포함하여 모든 jQuery 장점을 함수 안에 넣었습니다 .

그러나 DOM 문서를로드 할 필요가 없거나 어쨌든 나중에 호출되는 함수도 외부에 배치 할 수 있습니다 $(document).ready(). 예를 들어 다음과 같은 매우 간단한 유효성 검사 함수를 고려하십시오.

function hexvalidate(color) {
// Validates 3-digit or 6-digit hex color codes 
 var reg = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/;
 return reg.test(color);
}

이 함수는 함수 내에서만 호출됩니다 $(document).ready().

모범 사례 (구문, 속도)는 무엇입니까? jquery 문서 준비 기능 내부 또는 외부에 이러한 기능을 배치 합니까?


글로벌 네임 스페이스를 오염시키지 않도록 안에 넣으십시오 . 또한 JavaScript의 범위 체인으로 인해 함수 이름을 더 빠르게 확인할 수 있습니다.

를 넣어 외부 쉽게 별도의 파일 이동 및 다른 컨텍스트에서 호출 할 수 있도록 재사용 가능한 구성 요소가 있다면.

이미 JQuery를 사용하고 있으므로 언급 할 가치가 있습니다. 귀하의 경우 외부hexvalidate 에서 JQuery 플러그인 으로 정의한 다음 내부에서 호출 할 수 있습니다 .


애초에 '단지 기능'을 사용해서는 안된다고 생각합니다. OOP 자바 스크립트에서 "함수"는 일반적으로 네 가지 유형 중 하나에 속합니다.

  • 생성자 또는 익명의 'init'클로저-객체를 생성하는 데 사용됩니다. 전역이 될 수있는 유일한 함수 유형
  • 방법-일부 객체의 일부인 기능
  • 유틸리티-외부에서 볼 수없는 생성자 / 메서드의 내부 기능
  • 상수-매개 변수로 전달되는 기능 상수

예 :

 (function() { <- init closure

        function helper1() { <- utility }

        globalSomething = {

              foobar: function() { <- method 
                  xyz.replace(/.../, function() { <- constant })

              }
        }
  )()

귀하의 예에서 'hexvalidate'는 분명히 Validator 객체의 일부이며, 차례로 jQuery 플러그인을 만들 수 있습니다.

   (function($) {
        $.validate = {
            hexColor: function(color) { ... your code }
            more validators...
        }
     )(jQuery)

이러한 함수를 문서 준비 함수에 넣을 때의 한 가지 장점은 글로벌 네임 스페이스를 오염시키지 않는다는 것입니다. 단점은 페이지의 다른 곳에서 필요할 경우 사용할 수 없다는 단점이 있습니다.


모든 함수가 jQuery(function () { })블록 내에서만 호출되는 경우 그 안에 넣으십시오. 그렇지 않으면 불필요하게 전역 네임 스페이스를 오염시켜 갈등을 초래할 수 있습니다.

다른 범위의 코드에서도 사용되는 함수 만 전역 적으로 선언하십시오.


$ (document) .ready () 함수의 범위 밖에서 호출해야하는 함수를 만드는 경우 $ (document) .ready () 함수 외부에 유지하십시오.

그렇지 않으면 내부적으로 유지하십시오.

참고 URL : https://stackoverflow.com/questions/2645344/functions-inside-or-outside-jquery-document-ready

반응형