>  기사  >  웹 프론트엔드  >  JavaScript 네임스페이스란 무엇입니까? 무슨 소용이 있나요?

JavaScript 네임스페이스란 무엇입니까? 무슨 소용이 있나요?

不言
不言원래의
2019-01-14 16:08:224590검색

네임스페이스는 영어로 네임스페이스라고 합니다. "네임스페이스"라는 개념은 이름 충돌을 피할 수 있는 개념입니다. 이번 글에서는 자바스크립트에서 네임스페이스의 내용과 사용법을 살펴보겠습니다.

JavaScript 네임스페이스란 무엇입니까? 무슨 소용이 있나요?

네임스페이스란 무엇인가요?

네임스페이스는 "공간"에 동일한 이름이 하나만 있도록 정렬하는 메커니즘을 말합니다.

공간은 컨테이너와 같습니다.

예를 들어 "Tom"이라는 이름은 여러 사람을 지칭할 수 있지만 각 성에 대한 네임스페이스를 생성하면 "Tom"이 누구인지 구분할 수 있습니다.

사실 "Shangguan" 네임스페이스의 "Tom"과 "Ouyang"의 "Tom"은 다른 사람이라는 것을 알 수 있습니다.

네임스페이스 사용의 이점

네임스페이스의 주요 목적은 이름 충돌을 피하는 것입니다.

소규모 프로그램의 경우 네임스페이스 사용의 이점이 그리 크지 않을 수 있습니다.

그러나 일부 대규모 프로그램은 다른 프로그램, 서버 등과 관련될 수 있습니다.

이 경우 네임스페이스를 사용하면 프로그래머의 부담을 줄일 수 있습니다.

이름 충돌로 인한 문제를 방지할 수 있으므로 불필요한 처리를 없앨 수 있습니다.

네임스페이스를 어떻게 사용하나요?

실제로 JavaScript 프로그램에 네임스페이스 개념을 도입해 보겠습니다.

먼저 네임스페이스를 사용하지 않는 간단한 프로그램을 살펴보겠습니다.

<html>
  <body>
    <script>
 
        function addition(num1,num2) {
            return num1+num2;
        }
 
        function multiplication(num1,num2) {
            return num1*num2;
        }
 
        var operation = addition(5,10);
        console.log(operation)
 
    </script>
  </body>
</html>

실행 결과: 15

위 코드에서는 먼저 덧셈 함수 덧셈과 곱셈 함수 곱셈을 정의합니다.

추가 결과는 전역 변수에 저장되고 JavaScript 콘솔에 표시됩니다.

함수에 전달된 추가 매개변수는 5와 10이므로 콘솔에는 15가 표시됩니다.

위 코드에서는 모든 것이 전역 변수로 존재합니다.

그래서 동일한 이름을 가진 함수와 변수가 전역 범위에 존재하면 충돌이 발생합니다.

다음으로 네임스페이스를 사용하여 위 코드를 개선해 보았습니다.

<html>
  <body>
    <script>
 
        var MYFUNCTIONS = {
 
            addition: function(num1,num2){
                return num1+num2;
            },
 
            multiplication: function(num1,num2){
                return num1*num2;
            }
        } 
 
        var operation = MYFUNCTIONS.addition(5,10);
        console.log(operation)
 
    </script>
  </body>
</html>

실행 결과: 15

위 코드에서 정의된 전역 변수는 대문자 MYFUNCTION 변수뿐입니다.

여기서 우리는 덧셈과 곱셈 함수를 정의합니다.

이렇게 하면 MYFUNCTION이라는 공간이 생성되고 그 안에 임의의 기능이 포함됩니다.

MYFUNCTION에서 함수를 호출하려면 MYFUNCTION.함수 이름 구문을 사용하세요.

MYFUNCTION.addition(5,10)을 작성하여 추가 기능을 호출합니다.

결과는 이전 코드와 동일합니다.

네임스페이스를 계층화하는 방법은 무엇입니까?

마지막으로 네임스페이스를 "계층화"하는 방법을 소개하겠습니다.

레이어를 통해 더 많은 기능과 변수를 관리할 수 있어 매우 편리할 것입니다.

코드 예시는 다음과 같습니다

<html>
  <body>
    <script>
 
        var MYAPPLICATION = {
 
            OPERATIONS: {
 
                addition: function(num1,num2){
                    return num1+num2;
                },
 
                multiplication: function(num1,num2){
                    return num1*num2;
                }
            },
 
            OTHER: {
 
                show: function(num1,num2){
                    console.log("Your numbers are " + num1 + " and " + num2);
                } 
            }
 
        } 
 
        MYAPPLICATION.OTHER.show(5,10);
 
    </script>
  </body>
</html>

실행 결과: 숫자는 5와 10입니다.

위 코드에서는 유일한 전역 변수 MYAPPLICATION을 여러 공백으로 나눕니다.

OPERATION 공간에 덧셈 기능과 곱셈 기능을 추가하고 OTHER 공간에 새로운 기능 쇼를 포함했습니다.

공간 안에 공간을 만들면 계층화와 깔끔한 코드 생성이 더 쉬워집니다.

예를 들어 OTHER 공간에서 show 함수를 호출하려면 외부 공간, 내부 공간, 함수 이름 등의 구문을 사용할 수 있습니다.

실제로 MYAPPLICATION.OTHER.show(5,10)을 작성하면 매개변수 5번과 10번에 지정된 show 함수가 호출됩니다.

show 함수는 "당신의 숫자는 매개변수 1과 매개변수 2입니다"와 같은 문구를 JavaScript 콘솔에 출력합니다.

그래서 결과는 귀하의 숫자가 5와 10이라는 것입니다.

이 기사는 여기서 끝납니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 칼럼 튜토리얼을 참고하세요! ! !

위 내용은 JavaScript 네임스페이스란 무엇입니까? 무슨 소용이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.