JavaScript 코드 조직 구조 가 좋 은 5 가지 특징 [reuqire. js]

자 바스 크 립 트 프로젝트 가 성장 하면 서 조심 하지 않 으 면 관리 하기 어려워 지 는 경우 가 많다.우 리 는 새로운 페이지 를 만 들 때 이전에 쓴 코드 를 다시 사용 하거나 테스트 하기 어렵 다 는 것 을 알 게 되 었 다.우리 가 이 문제 들 을 더욱 깊이 연구 할 때, 우 리 는 근본 적 인 원인 이 무효 한 의존 관리 로 인 한 것 이라는 것 을 발견 했다.예 를 들 어 스 크 립 트 A 는 스 크 립 트 B 에 의존 하고 스 크 립 트 B 는 스 크 립 트 C 에 의존 하 며 C 가 정확하게 도입 되 지 않 으 면 전체 의존 체인 이 정상적으로 작 동 하지 못 합 니 다.이 문 제 를 해결 하기 위해 서 우 리 는 비동기 모듈 정의 (AMD) 모델 을 채택 하고 require. js 를 우리 의 기술 스 택 에 도입 했다.AMD 에 대한 진일보 한 탐색 을 통 해 우 리 는 조직 이 엄밀 한 자 바스 크 립 트 는 일반적으로 다음 과 같은 다섯 가지 특징 을 보인다.

우리 의 의존 을 시종 성명 한다

제3자 코드 라 이브 러 리 에 shim (패드) 추가

정의 와 호출 은 분리 되 어야 합 니 다

비동기 로드 에 의존 해 야 합 니 다

모듈 은 전역 변수 에 의존 해 서 는 안 된다

우리 상세 하 게 토론 합 시다.
시종 우리 의 의존 을 성명 하 다
우리 가 가장 자주 만 나 는 문 제 는 불 러 올 의존 항목 을 무시 하 는 것 이다.예 를 들 어, 만약 우리 가 jQuery 플러그 인 을 만 들 었 다 면, 일반적으로 jQuery 의 의존 도 를 신고 할 필요 가 없다 고 생각 합 니 다. 왜냐하면 대부분의 페이지 에서 기본적으로 불 러 오기 때 문 입 니 다.대부분의 웹 페이지 에 적용 되 는 것 같 지만 유닛 테스트 를 하거나 새로운 페이지 에 불 러 오 려 고 할 때 문제 가 됩 니 다.시종 우리 의 의존 을 성명 하면 우 리 는 자 바스 크 립 트 의 90 퍼센트 의 문 제 를 없 앨 수 있다.재 활용 가능 한 코드 가 더 신뢰 할 수 있 고 유닛 테스트 의 수량 이 4 배 증가 한 것 도 한 요인 이다.
제3자 코드 라 이브 러 리 에 shim (패드) 추가
자바 스 크 립 트 의존 을 관리 할 때 자주 발생 하 는 재 미 있 는 문 제 는 오래된 제3자 라 이브 러 리 가 귀하 의 의존 관계 관리 시스템 과 협조 하지 못 할 수도 있다 는 것 입 니 다.예 를 들 어, 당신들 내 부 는 jQuery 의 멋 진 플러그 인 을 사 용 했 지만, require. js 에 대해 서 는 아무것도 모 릅 니 다.이것 은 문제 가 될 것 입 니 다. 첫 번 째 특징 때문에 우 리 는 이 플러그 인 에 대한 인용 을 추가 합 니 다.해결 방법 은 관리 도구 에 의존 하여 이 플러그 인 을 위해 패드 를 만 드 는 것 이다.require. js 에서 설정 을 통 해 쉽게 완성 할 수 있 습 니 다.

var require = {
    "shim": {
        "lib/cool-plugin": {
            "deps": ["lib/jquery"]
        }
    }
}

이 간단 한 설정 이 있 으 면 lib / cool - plugin. js 를 불 러 오 는 스 크 립 트 마다 jQuery 를 자동 으로 불 러 옵 니 다.모든 관련 성 을 만족 시 키 는 데 도움 이 될 것 입 니 다. 최종 결 과 는 코드 가 더 쉽게 테스트 되 고 재 활용 되 는 것 입 니 다. 항상 require () 가 필요 한 기능 을 호출 하기 때 문 입 니 다.
정의 와 호출 은 분리 되 어야 합 니 다.
이것 은 자 바스 크 립 트 코드 의 중용 성과 테스트 가능성 을 제한 하 는 흔 한 문제 이다.문 제 는 하나의 파일 에서 클래스 / 함 수 를 정의 하고 호출 하 는 데 나타난다.다음 코드 를 고려 하 십시오:

## js/User.js

define(functino(require) {
   var User = function(name, greeter) {
        this.name = name;
        this.greeter = greeter;
   };

   User.prototype.sayHello = function() {
        this.greeter("Hello, " + this.name);
   };

   var user = new User('Alice', window.alert);
   user.sayHello();
});

이 예 에서 하나의 파일 은 user 클래스 를 정의 하고 호출 합 니 다.이 스 크 립 트 를 불 러 오기 만 하면 alert 가 나타 나 기 때문에 이 코드 를 다시 사용 하기 어 려 울 것 입 니 다.마찬가지 로 greeter 는 테스트 하기 가 매우 어렵다.해결 방법 은 정의 와 집행 의 분 리 를 유지 하 는 것 이다.이것 은 중용 성과 측정 가능성 을 확보 하 는 데 도움 이 된다.

## js/User.js

define(functino(require) {
   var User = function(name, greeter) {
        this.name = name;
        this.greeter = greeter;
   };

   User.prototype.sayHello = function() {
        this.greeter("Hello, " + this.name);
   };

   return User;
});



## js/my-page.js

define(functino(require) {
    var User = require('js/User');
    var user = new User('Alice', window.alert);
    user.sayHello();
});

이러한 변 화 는 User 클래스 가 많은 스 크 립 트 에서 안전하게 재 활용 할 수 있 습 니 다.
의존 비동기 로드
스 크 립 트 를 동기 화 하려 고 시도 하면 브 라 우 저가 잠 겨 죽 기 때문에 매우 중요 합 니 다. 스 크 립 트 와 모듈 은 비동기 로 딩 메커니즘 을 사용 해 야 합 니 다.Require. js 는 기본 적 인 상황 에서 모든 비동기 로 모듈 을 불 러 옵 니 다. 모든 의존 이 불 러 온 후에 만 모듈 코드 의 함 수 를 실행 할 수 있 습 니 다.하나의 패 키 지 를 사용 함으로써 우 리 는 'use strict' 의 장점 을 더욱 이용 할 수 있다.
모듈 은 전역 변수 에 의존 해 서 는 안 됩 니 다.
자바 스 크 립 트 코드 라 이브 러 리 를 더욱 강화 하기 위해 서, 우 리 는 전역 변 수 를 완전히 소멸 시 켰 습 니 다. (require. js 가 제공 하 는 전역 변 수 를 제외 하고, 예 를 들 어 require () 와 define ().전역 변 수 는 모듈 에 잠재 적 으로 들 어 가 는 '숨겨 진 의존 관계' 로 코드 를 다시 사용 하거나 테스트 하기 어렵 다 는 악명 이 높다.Require. js 도 제3자 전역 변 수 를 변환 합 니 다. require () - 보충 기능 을 통 해 모듈 을 사용 할 수 있 습 니 다.이 예 에서 lib / calculator 는 전역 계산기 대상 을 만 들 었 습 니 다. 이 라 이브 러 리 는 require 화 되 었 습 니 다.

var require = {
    "shim" : {
        "lib/calculator": {
            "export": "Calc"
        }
    }
}

결론.
관리 의존 은 어렵 지만 못 하 는 것 은 아 닐 것 이다 (difficult).의존 관 리 를 사용 하면 코드 가 더 신뢰 할 수 있 습 니 다.
via ourjs