Javascript_javascript 기술의 모듈식 개발 이해

리틀A는 스타트업 팀의 프론트엔드 엔지니어로 프로젝트의 자바스크립트 프로그램 작성을 담당하고 있습니다.

전역 변수 충돌

Xiao A는 자신의 경험을 바탕으로 먼저 일반적으로 사용되는 일부 함수를 추출하여 함수로 작성한 다음 공개 파일 base.js에 넣었습니다.

코드 복사 코드는 다음과 같습니다.

var _ = {
$: function(id) { return document.getElementById(id) },
; GetCookie: 함수(키) { ... },
setCookie: 함수(키, 값) { ... }
};

Little A는 너무 많은 전역 변수로 인한 충돌을 방지하기 위해 이러한 함수를 _ 개체에 넣습니다. 그는 팀의 다른 구성원들에게 누군가 이러한 기능을 사용하고 싶다면 base.js를 가져오면 된다고 말했습니다.

리틀 C는 리틀 A의 동료입니다. 그는 리틀 A에게 다음과 같이 보고했습니다. 그의 페이지에는 underscore.js라는 클래스 라이브러리가 도입되었으며 이 클래스 라이브러리도 _ 전역 변수를 차지하므로 기본적으로 _를 따릅니다. js 충돌. Little A는 underscore.js가 타사 라이브러리이므로 변경하기 어려울 것이라고 생각했지만, base.js는 여러 페이지에 배포되어 변경이 불가능했습니다. 결국 Little A는 underscore.js가 차지하는 전역 변수를 변경할 수밖에 없었습니다.

이때 Little A는 모든 함수를 네임스페이스에 배치하면 전역 변수 충돌 가능성을 줄일 수 있지만 전역 변수 충돌 문제가 해결되지는 않는다는 사실을 발견했습니다.

종속성

비즈니스가 발전하면서 Xiao A는 탭 전환 구성 요소인 tabs.js와 같은 일련의 기능 라이브러리와 UI 구성 요소를 작성했습니다. 이 구성 요소는 base.js 및 util.js에서 함수를 호출해야 합니다.

어느 날 새로운 동료인 Xiao D와 Xiao A가 페이지에서 tabs.js를 참조했지만 기능이 정상적이지 않다고 보고했습니다. Little A는 첫눈에 문제를 발견했습니다. Little D는 tabs.js가 base.js와 util.js에 의존한다는 사실을 모르고 이 두 파일에 대한 참조를 추가하지 않은 것으로 나타났습니다. 그래서 그는 즉시 다음과 같이 변경했습니다.

코드 복사 코드는 다음과 같습니다.

그러나 기능은 여전히 ​​비정상적이었다. 이때 리틀 A는 리틀 D에게 “의존적이라고 하니 의존하는 당사자보다 먼저 위치해야 한다”고 가르쳤다. Xiao D는 tabs.js 뒤에 base.js와 util.js를 넣은 것으로 밝혀졌습니다.

저자로서 자연스럽게 컴포넌트의 종속성을 알고 있지만 다른 사람들, 특히 새로 온 사람들에게는 말하기 어렵다고 스스로 생각했습니다.

얼마 후 Xiao A는 탭 전환 구성 요소에 기능을 추가했습니다. 이 기능을 구현하려면 tabs.js도 ui.js에서 해당 기능을 호출해야 합니다. 이때 Little A는 tabs.js를 호출하는 모든 페이지에 ui.js에 대한 참조를 추가해야 하는 심각한 문제를 발견했습니다. ! !

얼마 후 Xiao A는 tabs.js를 최적화했습니다. 이 구성 요소는 더 이상 util.js에 의존하지 않으므로 tabs.js를 사용하는 모든 페이지에서 util.js에 대한 참조를 제거했습니다. 그의 수정은 큰 문제를 일으켰습니다. 테스트 팀 MM은 그에게 일부 페이지가 비정상적이라고 말했습니다. Little A는 살펴보다가 갑자기 일부 페이지의 다른 기능이 util.js의 기능을 사용한다는 것을 깨달았고 이 파일에 대한 참조를 제거했으며 오류가 발생했습니다. 정상적인 기능을 보장하기 위해 그는 코드를 복원했습니다.

다시 생각해 보니 페이지를 하나씩 수정하지 않고 다른 기능에 영향을 주지 않고 종속성을 수정할 수 있는 방법이 있나요?

모듈형

리틀A는 인터넷을 검색하던 중 우연히 이전에 겪었던 모든 문제를 해결할 수 있는 새로운 모듈형 코딩 방법을 발견했습니다.

모듈형 프로그래밍에서는 각 파일이 모듈입니다. 각 모듈은 정의라는 함수에 의해 생성됩니다. 예를 들어, base.js를 모듈로 변환하면 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

정의(함수(요구, 내보내기, 모듈) {
수출.$ = function(id) { return document.getElementById(id) };
imports.getCookie = function(key) { ... };
imports.setCookie = function(key, value) { ... };
});

base.js에서 제공하는 인터페이스가 내보내기 개체에 추가됩니다. 내보내기는 지역 변수이며 전체 모듈의 코드는 전역 변수의 절반을 차지하지 않습니다.

특정 모듈에서 제공하는 인터페이스를 어떻게 호출하나요? tabs.js를 예로 들면 base.js와 util.js에 따라 다릅니다.

코드 복사 코드는 다음과 같습니다.

정의(함수(요구, 내보내기, 모듈) {
var _ = require('base.js'), util = require('util.js');
var div_tabs = _.$('tabs');
// .... 기타 코드
});

모듈은 로컬 함수 require를 통해 다른 모듈의 인터페이스를 얻을 수 있습니다. 이때 _, util 변수는 모두 로컬 변수이며 변수 이름은 개발자가 완전히 제어합니다. _가 마음에 들지 않으면 base:
를 사용할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

정의(함수(요구, 내보내기, 모듈) {
var base = require('base.js'), util = require('util.js');
var div_tabs = base.$('tabs');
// .... 기타 코드
});

util.js를 제거하고 ui.js를 추가하려면 tabs.js를 수정하세요.

코드 복사 코드는 다음과 같습니다.

정의(함수(요구, 내보내기, 모듈) {
var base = require('base.js'), ui = require('ui.js');
var div_tabs = base.$('tabs');
// .... 기타 코드
});

로더

기본 브라우저 지원이 부족하기 때문에 모듈 방식으로 코딩하려면 로더라는 것을 사용해야 합니다.

현재 require.js 및 seajs와 같은 로더 구현이 많이 있습니다. JRaiser 클래스 라이브러리에는 자체 로더도 있습니다.