JavaScript에 모듈 모드 표시

방학 동안 잠시 휴식을 취한 후에 나는 새로운 직위를 가지고 돌아올 수 있어서 매우 기쁘다.이번에는 자바스크립트 개발자들이 자주 사용하는 모듈 모델을 살펴보겠습니다.
이것은 매우 유용한 모델로 우리의 코드 라이브러리를 깨끗하게 유지하고 브라우저 컨트롤러가 자바스크립트를 악의적으로 조종하는 것을 방지할 수 있다.초급과 고급 JavaScript 개발자들은 일반적으로 이런 모델을 알지 못하는데, 이것은 성능과 안전성에 매우 유용하다.
나는 이런 모델을 매우 좋아한다. 비반응 항목을 처리할 때, 나는 줄곧 그것을 사용하고 있다.

창 객체 정보

JavaScript의 객체는 브라우저 창을 나타냅니다.듣기에 매우 간단하다.모든 대상과 마찬가지로 속성(변수)과 방법(함수)을 포함합니다.
예를 들어, 일부 창 속성은 다음과 같습니다.window - 브라우저 창의 내부 높이window.innerHeight - 브라우저 창의 내부 너비
몇 가지 창 방법은 다음과 같습니다.window.innerWidth - 메시지가 있는 팝업 창 열기window.alert() - 새 창 열기window.open() - 현재 창 닫기
창 대상의 특수한 점은 대부분의 경우 전역적으로 접근할 수 있다는 것이다.클라이언트 JavaScript를 지원하는 모든 파일에서 객체의 속성 및 방법에 액세스할 수 있습니다...개발 도구를 통해 일반 브라우저에서 접근할 수도 있다.

명령 중 일부를 실행해 보십시오.

창 대상의 잠재적 문제

악성코드 조작

다음 줄만 포함된 JavaScript 파일을 정의하려고 합니다.

let score = 0;

const updateScore = (newScore) => score = newScore;

그것은 보기에 일반적인 JavaScript 같지 않습니까?뚜렷한 문제는 없다.
브라우저에서 이 사이트를 열면 window.close() 대상에 포함된 score 변수를 볼 수 있습니다.이것은 브라우저의 개발 도구에서 변수를 직접 자유롭게 조작할 수 있다는 것을 의미합니다!이 변수가 사이트의 기능에 매우 중요하거나 민감한 정보를 포함하고 있다면 이 변수를 쉽게 접근하고 이용할 수 있습니다.

으음...
같은 규칙은 방법(함수)에 적용된다.개발 도구에서 window 대상의 모든 함수를 호출할 수 있습니다.

성능 및 쓰레기 수거

글로벌 네임스페이스 오염을 피하라는 조언이 있을 수 있습니다.이것은 기본적으로 우리가 전역 변수와 함수를 성명하는 것을 피해야 한다는 것을 의미한다.이유가 뭐예요?
쓰레기 수집은 브라우저가 이때 어떤 자원을 필요로 하는지 결정함으로써 메모리를 자동으로 관리하는 것을 의미한다.함수나 변수가 더 이상 필요하지 않을 때 브라우저는 공간을 방출합니다.만약 우리의 모든 변수와 함수가 전역 window 대상의 일부분이라면, 브라우저는 자동으로 창 (또는 옵션 카드) 을 열기만 하면 이 변수와 함수가 필요하다고 가정하기 때문에 영원히 삭제되지 않습니다.이 자원이 실제로 사용되든 안 사용되든 메모리는 항상 이 자원에 분배될 것이다.이것이 바로 우리가 쓰레기와 오염의 코드라고 부르는 이유다.

공공 및 개인 범위

Javascript는 일반적인 대상 언어처럼 흔히 볼 수 있는 공공 또는 개인 범위 수식자를 가지고 있지 않다.자바스크립트의 일반적인 함수급 작용역을 사용하면 우리는 매우 우아하고 간단한 방식으로 이 문제를 해결할 수 있다.

모듈 모드 표시

이것이 바로 모듈 모드인 자바스크립트의 용무를 보여주는 곳이다.아래의 예시를 봅시다.

const game = (() => {
 let score = 0;

 const setScore = (newScore) => score = newScore;

 const incrementScore = () => setScore(score + 1);

 return {
  incrementScore
 }
})();

우리는 모듈 모델이 어떻게 명실상부한지 제시할 수 있다.

const example = (() => {
  /* Variable and function definitions */

  return {
    /* Variables and functions that we would like to expose */
  }

})();

반환되지 않은 모든 변수와 함수는 사유로 간주되어 함수 범위 밖에서 접근할 수 없습니다.
IIFE에 설명된 모든 변수와 함수를 포함할 수 있는 대상 (즉시 호출된 함수 표현식, 나중에 설명) 을 되돌려줌으로써 제시할 기능 부분을 선택할 수 있습니다.이것들은 전체 범위에서 변경할 수 없다.최악의 경우 기능이 실패하고 클라이언트에서 사이트가 중단되지만 브라우저의 개발 도구(HTML, CSS 또는 JavaScript 작업)에서 실행할 수 있는 다른 유형의 코드 작업에서도 마찬가지입니다.
우리의 예에서 우리는 다음과 같은 사유 요소를 가지고 있다.

window - 현재 분수를 추적하는 변수

score - 값을 직접 설정하여 변수를 직접 조작하는 함수입니다.setter 함수라고도 합니다.

이 두 가지 기능은 우리의 예시에서 매우 중요하기 때문에 함수 밖에서 접근해서는 안 된다. 따라서 우리는 인터페이스를 만들어야 한다. 우리는 이 인터페이스가 간접적으로 setScore 변수를 업데이트할 것이라고 제시할 수 있다.
이것이 바로 score 함수의 작용이다.그것은 개인 함수만 호출하고 점수를 어떻게 늘리는지 확인한다.따라서 클라이언트가 사이트를 파괴하는 것 외에 이 기능을 악의적으로 변경하거나 조작할 수 없다.
마지막으로 우리의 score 표현식을 IIFE (즉시 호출된 함수 표현식) 에 포장함으로써 우리는 함수가 incrementScore 에 포함되는 것을 방지하고 누군가가 개발 도구에서 다른 game 를 초기화할 가능성을 피할 수 있다.
이제 우리는 디스플레이 모듈 모델의 작업 원리와 이를 어떻게 실현하는지 이해했다. 다음은 예시를 하나 보자.

인스턴스

만약 우리가 게임을 개발하고 있다면, 우리의 임무는 다음과 같은 기능을 가진 분수 추적 기능을 만드는 것이다.

값 0을 사용하여 분수 추적 초기화

점수를 1(게임 규칙)

증가시킵니다.

점수 재설정

게임 종료 후 현재 점수 제출

분수 상태를 HTML로 표시

창 대상 구현

우선, 함수를 더욱 잘 파악하고 우리가 해석한 잠재적인 문제를 돋보이게 하기 위해 일반적인 방식으로 그것을 실현합시다.
참고: 이 코드 펜 링크를 창에서 열어 콘솔 기능을 사용하여 점수를 시도하고 조작할 수 있습니다.
브라우저의 개발 도구에서 점수를 조작할 수 있는지 봅시다.

우리는 변수와 함수에 완전히 접근할 수 있다
예상한 바와 같이, 우리는 분수에 쉽게 접근하고 조작할 수 있으며, 우리가 원하는 모든 함수를 호출할 수 있다.

제시 모듈 모드 실현

우리 JavaScript를 계발적인 모듈 모드로 전환합시다.HTML에서 직접 호출된 함수를 보면 인터페이스를 표시할 부분을 쉽게 확인할 수 있습니다.
이제 브라우저의 개발 도구에서 점수를 조작할 수 있는지 봅시다.

예상한 바와 같이, score 변수와setter 함수는 더 이상 전역 대상의 일부분이 아니다
우리는 window object 대상에서 우리의 기능과 변수를 삭제하고 악의적인 값 조작 가능성을 방지하는 데 성공했다.
사용자가 개발 도구에서 호출할 수 없도록 game 함수를 더욱 잘 보호하는 방법도 연구할 수 있지만, 이것은 이 예시를 필요로 하는 것보다 더욱 복잡하게 할 것이다.또한 이 기능은 편리하게 단추에 연결하는 데만 사용됩니다.우리는 이것이 게임 메커니즘과 연결되고 게임 메커니즘도 개인 기능을 보존할 것이라고 상상할 수 있다.
이 물건들은 커피를 연료로 한다.그래서 만약 당신이 나의 일을 좋아하고 그것이 매우 유용하다고 생각한다면, 나에게 커피 한 잔을 사주는 것을 고려해 보세요!정말 고마워요.

시간을 내서 이 글을 읽어 주셔서 감사합니다.만약 당신이 이것이 유용하다고 생각한다면, 그것을 하나 주십시오❤️ 또는🦄, 공유와 평론.