javascript에서 전역 변수를 리팩터링하는 방법은 무엇입니까?

전역 변수를 리팩터링하기 위해 네임스페이스 패턴에 대해 자세히 알아봅니다.

우리 모두는 글로벌이 나쁜 관행이라는 것을 듣거나 읽었습니다.

여러 전역으로 코드 공간을 오염시키면 관리할 수 없고 예측할 수 없는 코드가 생성됩니다. 전역 변수를 확인하고 가능한 한 최소한으로 유지하는 것이 항상 권장됩니다.

이 부분에서는 전역 변수를 훨씬 쉽게 줄일 수 있는 한 가지 접근 방식에 대해 논의할 것입니다.

코드베이스에 다음 전역 변수가 있다고 가정합니다 —

// Constructors
function X() {}
function Y() {}

// global vars
var res = 1;

// global objects
var module1 = {
   a: 1,
   b: 2
};

var module2 = {};
module2.a = 10;
module2.b = 20;

var module3 = {};

위 블록에는 6개의 전역 변수가 있습니다. 이제 이 코드를 리팩터링하여 하나의 전역 객체만 가질 수 있으며 모든 생성자, 변수 및 객체가 그 일부가 됩니다.

이상적으로는 모든 코드베이스가 단일 전역 변수를 갖도록 번성해야 합니다.

여러 전역을 갖는 것은 여러 가지 이유로 좋지 않습니다.

실수로 수정될 수 있으며 오류가 발생하기 쉽습니다.

또한 코드 또는 타사 라이브러리와 이름 충돌이 발생할 수 있습니다

.

해결책 -

리팩토링된 코드 —

// Global object
var APP = APP || {};

// Constructors
APP.X = function () {};
APP.Y = function () {};

// variables
APP.res = 1;

// objects
APP.modules.module1 = {a: 1, b: 2};
APP.modules.module2 = {};
APP.modules.module2.a = 10;
APP.modules.module2.b = 20;
APP.modules.module3 = {};

예를 들어 아래 코드를 사용하려는 경우 코드에 문제가 있습니다.

var module1 = APP.modules.module1;

아래와 같이 3가지를 확인해야 합니다.

var module1 = APP && APP.modules && APP.modules.module1;

그리고 이것은 일종의 자극적입니다.

이 문제를 해결하려면 namespacing 부분을 처리하는 편리한 함수가 필요합니다.

이 함수‘namespace()’를 호출하고 다음과 같이 사용합니다 —

APP.namespace(‘APP.modules.module1’) 

이는 —

var APP = {
   modules: {
      module1: {
      }
   }
};

namespace() 함수 구현

var APP = APP || {};

APP.namespace = function (str) {
  var parts = str.split('.'),
      parent = APP;

  // remove the redundant global
  if (parts[0] === 'APP') {
      parts = parts.slice(1);
  }

  for (var i = 0; i < parts.length; i++) {
      if (typeof parent[parts[i]] === 'undefined') {
          parent[parts[i]] = {};
      }
      parent = parent[parts[i]]; 
  }

  return parent;
}

위의 내용을 테스트해 봅시다.



우리는 그것을 볼 수 있습니다 —

APP.namespace(‘APP.modules.module1’)

원하는 결과를 제공하고 APP (the top global object in the namespace)를 전달하는 것도 중복됩니다. modules.module1만 통과하면 동일한 결과를 얻을 수 있습니다.

APP.namespace(‘modules.module1’)

네임스페이스 패턴이 마음에 드시면 알려주세요. 제 글이 마음에 드시면 팔로우 부탁드립니다. 기사를 읽어주셔서 감사합니다. 곧 뵙겠습니다!