JavaScript의 네임스페이스

韦小宝원래의: 2018-03-07 09:38:141144검색

PHP를 공부한 학생들은 모두 네임스페이스의 개념을 알고 있습니다. 복잡한 시스템에는 프로그래밍 사양으로 인해 언어에서 제공하고 아키텍처에서 미리 정의한 많은 기능과 개체가 있습니다. 실용적인 의미가 있는 이름을 달라고 하면 같은 이름으로 인해 잘못된 호출이 발생할 수밖에 없지만, 네임스페이스를 사용하면 이러한 문제가 없어집니다. 중복된 이름 문제를 해결하세요.

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

간단한 예

<input type="button" value="test" onclick="alert();"/>
        <script type="text/javascript">
            function alert(){
                //.......
                test2();
                //.......
            }
            function test2(){
                alert(&#39;test2&#39;)
            }
        </script>

이 예에서는 IE가 스택 오버 플로우를 보고하고 Firefox가 종료되는 브라우저마다 다르게 작동합니다. . . 어쨌든 오류가 보고됩니다. 이는 코드에서 사용자 정의된 경고 함수입니다. test2 함수는 창의 경고 메서드를 호출하려고 합니다. 이 글을 읽고 나면 너무 뻔하다고 말할 수도 있겠지만, 사용자 정의 메서드가 close라고 호출된 다음(자주 발생함) 외부 파일 함수가 내부적으로 호출되고 함수가 다음을 호출합니다. 창 닫기 방법을 사용하면 오류가 많이 숨겨집니다.

간단한 네임스페이스

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

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

<input type="button" value="test" onclick="(new namespace()).alert();"/>
        
        <script type="text/javascript">
            function namespace(){
                this.alert=function(){
                    console.log(&#39;test&#39;);
                }
            }
        </script>

이렇게 하면 사용자 정의된 경고 방법이 창의 경고와 충돌하지 않습니다.

단순한 진화

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

<input type="button" value="test" onclick="NS.alert();"/>
        <script type="text/javascript">
            (function namespace(){
                this.alert=function(){
                    console.log(&#39;test&#39;);
                }
                window.NS=this;
            })();
        </script>

위 코드를 이해하려면 먼저 "즉시 실행 함수"(Jianghu 사람들이 부르는 방식)의 기술적 구조를 이해해야 합니다. 구조는 이와 유사합니다.

(function xxx(){
       //function body 
 })();

xxx 함수를 이렇게 작성하면 됩니다. 실제로 위의 작성 방법은

함수 정의

를 의미하는

function xxx(){
       //function body 
 }
xxx();

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

Beautify it

위의 글은 좋아 보이지만 함수 이름 네임스페이스가 중복된 것 같아서 즉시 실행되는

익명 함수

로 미화

(function (){
                this.alert=function(){
                    console.log(&#39;test&#39;);
                }
                window.NS=this;
            })();

할 수 있습니다. 조금 미화해도 여전히 보입니다. 이상합니다. 인스턴스화된 함수입니다. 프로토타입에 메서드 정의가 작성되지 않은 이유는 무엇입니까? . . , 몇 가지 유용한 함수를 작성하려면 두뇌

(function(){
                var _NS=function(){
                }
                _NS.prototype.alert=function(){
                    console.log(&#39;test&#39;);
                }
                window.NS=new _NS();
            })();

를 사용해야 합니다

querySelector 및 querySelectorAll은 W3C에서 제공하는 새로운 쿼리 인터페이스이지만 이름이 너무 길기 때문에 간단한 것을 직접 작성했으며 innerHTML 속성도 일반적으로 사용됩니다. jQuery와 유사한 html 메소드의 간단한 버전을 작성하세요

(function () {
            var _NS = function () {
            }
            _NS.prototype.select = function (selector,context) {
                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;
                }
                return false;
            }
            _NS.prototype.html = function (obj,value) {
                var isArray=this.isArrayLike(obj), i=0;
                if (typeof value == &#39;string&#39;) {
                    if (!isArray) {
                        obj.innerHTML = value;
                    } else {
                        var length = obj.length;
                        while (i < length) {
                            obj[i].innerHTML = value;
                            i += 1;
                        }
                    }
                } else {
                    if (!isArray) {
                        return obj.innerHTML;
                    } else {
                        return obj[0].innerHTML;
                    }
                }
            }
            window.NS = new _NS();
        })();

네임스페이스는 여러 타사 프레임워크 또는 클래스 라이브러리를 사용할 때 충돌이 발생하는 경우 효과적으로 방지합니다. , 당신이 할 수 있는 유일한 일은 그들 중 하나를 버리는 것입니다.

웹 개발에 참여할 때 JavaScript에 노출되는 것은 불가피합니다. 최신 버전의 JavaScript는 여전히 네임스페이스를 지원하지 않으므로 이름 충돌 문제는 의심할 여지 없이 두드러집니다. 두 개의 js 파일을 참조했지만 이름 지정 문제로 인해 그 중 하나를 포기하면 훨씬 더 많은 코드가 작성되므로 의심할 여지 없이 매우 실망스럽습니다. 새 버전의 JavaScript에 네임스페이스 개념이 도입되기 전에 자립과 창의성의 정신을 계승하는 것은 프로그래머의 기본 의무입니다.

JavaScript의 네임스페이스

관련 기사