JavaScript 네임스페이스 사용법 소개_javascript 기술

Java와 C#을 사용해 본 학생들은 네임스페이스에 매우 익숙합니다. 복잡한 시스템에는 프로그래밍 사양으로 인해 언어에서 제공하고 아키텍처에서 미리 정의한 함수와 개체가 너무 많습니다. 실용적인 의미를 지닌 이름을 달라고 하면 필연적으로 동일한 이름으로 인해 잘못된 호출이 발생하게 되지만, 네임스페이스를 사용하면 이러한 문제가 없어집니다. 이름 중복 문제를 해결하기 위해

Javascript를 사용하는 것은 그리 편하지 않습니다. Javascript에는 기능 범위만 있습니다. 블록과 Shenma 파일은 모두 네임스페이스로 간주됩니다. 때로는 일부 중복된 이름으로 인해 발생하는 오류가 디버깅 및 해결하기 어렵습니다.

간단한 예

코드 복사 코드는 다음과 같습니다.

                                                                               >
test2(){
함수 경고('test2')
                            



이 예에서는 브라우저마다 성능이 다르며 IE는 스택 오버 흐름을 보고하고 Firefox는 종료됩니다. . . 어쨌든 오류를 보고합니다. 경고 함수는 경고 함수에서 호출됩니다. 이런 식으로. , 이는 루프에서 호출됩니다. 읽고 나면 너무 분명하다고 말할 수도 있습니다. 누가 실수를 했는지, 사용자 정의 메소드가 close(종종 발생함)를 호출한 다음 외부 파일 함수가 내부적으로 호출됩니다. , 함수가 창의 닫기 메서드를 호출하면 오류가 많이 숨겨집니다.


간단한 네임스페이스

자바스크립트에는 파일 범위가 없기 때문에 서로 다른 기능이 서로 다른 파일에 흩어져 있거나 심지어 서로 다른 사람이 작성하여 이름이 중복될 확률이 크게 높아집니다. 충분히 조심하는 것만으로도 충분합니까? 꼭 그런 것은 아니고 예상치 못한 상황도 있는데, 예를 들어 상속을 자주 사용하기 때문에 이전에 등장한 적이 없는 확장 함수를 작성했는데, 의외로 EcmaScript5에 확장 함수가 추가되면서 네임스페이스의 필요성이 반영되었습니다.

JavaScript에는 함수 범위가 있습니다. 이를 사용하여 함수 본문에 사용자 정의 함수를 작성할 수 있으므로 함수의 변수, 개체 및 함수가 네임스페이스에 있는 것처럼 외부와 격리됩니다.

코드 복사

코드는 다음과 같습니다.

                                                                                                     alert=function(){ console.log('test'); }

}

이렇게 하면 사용자 정의된 알림 방법이 창 알림과 충돌하지 않습니다.


단순진화


가능하지만 가장 큰 문제는 호출 방법이 복잡하고 보기 흉하다는 점입니다! 개체는 호출될 때마다 인스턴스화되어야 하며, 그런 다음 해당 메서드를 호출해야 자동 인스턴스화를 달성할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

           

코드 복사 코드는 다음과 같습니다. (function xxx(){

//함수 본문
})();

이렇게 작성하면 xxx 함수가 정의된 후 자동으로 실행될 수 있습니다. 마술처럼 보이지만 실제로는 위의 작성 방법을 다음과 같이 나눌 수 있습니다. 이

코드 복사 코드는 다음과 같습니다.function xxx(){

//함수 본문
}

xxx();

은 함수를 정의한 후 대괄호 구문을 사용하여 호출하는 것입니다. 대괄호를 사용하면 표현식만 호출할 수 있기 때문에 함수 정의 외부의 괄호 계층은 함수 선언만 함수 정의 표현식으로 변환합니다. 이러한 몬스터들을 이해하고 나면 위의 코드는 간단합니다. 커스텀 네임스페이스 함수 마지막에 이를 윈도우의 NS 속성에 할당하고, 호출 시 NS.xx를 직접 사용하면 됩니다. 훨씬 나아 보입니다.

아름답게 가꾸세요

위 작성 방법은 좋아 보이지만 함수 이름 네임스페이스가 중복되어 미화될 수 있을 것 같습니다

코드 복사 코드는 다음과 같습니다.(함수(){

이 .alert= function(){

                               console.log('test');                                                       


은 즉시 실행되는 익명 함수가 됩니다. 조금 보기는 좋지만 여전히 이상해 보입니다. 예, 분명히 인스턴스화된 함수입니다. 프로토타입을 작성하는 방법은 무엇입니까? 익명 함수? . . , 여전히 두뇌를 사용해야 합니다

코드 복사

코드는 다음과 같습니다.

(function(){ var _NS=함수(){ } _NS.prototype.alert=function(){ console.log('test');

}

        window.NS=new _NS() ;
})();




여러 가지 유용한 기능 작성


querySelector와 querySelectorAll은 W3C에서 제공하는 새로운 쿼리 인터페이스인데 이름이 너무 길어서 직접 간단하게 작성했습니다. innerHTML 속성도 흔히 사용되는 간단한 버전의 jQuery html 메소드로 작성했습니다.

코드 복사

코드는 다음과 같습니다.

(함수 () {
            var _NS = 함수 () {

           }

           _NS.prototype.select = 함수(선택기,컨텍스트) {
var context = context || document;
               return context.querySelectorAll(selector);
            }

            _NS.prototype.isArrayLike=function(obj){
                if(obj instanceof Array){
                   return true;
               }

               var length=obj.length;
                if ( obj.nodeType === 1 && length ) {
                  return true;
               }
                false를 반환합니다.
            }

            _NS.prototype.html = 함수(obj,값) {
               var isArray=this.isArrayLike(obj), i=0;

               if (값 유형 == 'string') {
                  if (!isArray) {
                     obj.innerHTML = value;
                    } else {
                       var length = obj.length;
                     while (i                         obj[i].innerHTML = value;
                         i = 1;
                       }
                   }
              } else {
                   if (!isArray) {
                      return obj.innerHTML;
                 } else {
                     return obj[0].innerHTML;
                    }
                }
            }

            window.NS = new _NS();
        })();

이렇게 간단한 네임스페이스가 있는 JavaScript 라이브러리가 작성되었습니다. 이름 충돌에 대해 걱정할 필요는 없지만, 프론트엔드 학생들은 모두 jQuery를 사용했습니다. 어떻게? 다음에 무슨 일이 일어날지 알고 싶다면 다음에 설명을 들어보세요.