JavaScript 모듈 개발에 대한 자세한 분석

모듈러 개발은 프로그래밍 개발에 있어 매우 중요한 개념으로, 우수한 모듈러 프로젝트의 향후 유지관리 비용을 대폭 절감할 수 있습니다. 이번 글에서는 JavaScript모듈러 개발에 대한 내용을 주로 소개하며, 짧은 이야기를 통해 모듈러 개발 과정을 좀 더 직관적으로 설명하고 있습니다.

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

글로벌변수갈등

리틀A는 자신의 경험을 바탕으로 먼저 자주 사용하는 기능 몇 가지를 추출하여 로 작성했습니다. > 함수 는 공개 파일인 base.js에 있습니다:

var _ = {
    $: function(id) { return document.getElementById(id); },
    getCookie: function(key) { ... },
    setCookie: function(key, value) { ... }
};

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

Little C는 Little A의 동료입니다. 그는 Little A에게 자신의 페이지에 underscore.js라는 클래스 라이브러리가 도입되었으며 이 클래스 라이브러리도 이 전역 변수를 차지할 것이라고 보고했습니다. base.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에 의존한다는 사실을 모르고 이 두 파일에 대한 참조를 추가하지 않은 것으로 나타났습니다. 그래서 바로 수정했습니다: rreee

하지만 여전히 기능이 비정상이었습니다. 이때 Little A는 Little 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를 모듈로 변환한 후 코드는 다음과 같습니다.

<script src="tabs.js"></script>
<script src="base.js"></script>
<script src="util.js"></script>

base.js에서 제공하는

인터페이스가 모두 내보내기 개체에 추가됩니다. 그리고 내보내기는 지역 변수이고 전체 모듈의 코드는 전역 변수의 절반을 차지하지 않습니다.

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

define(function(require, exports, module) {
    exports.$ = function(id) { return document.getElementById(id); };
    exports.getCookie = function(key) { ... };
    exports.setCookie = function(key, value) { ... };
});

모듈은 로컬 함수 require를 통해 다른 모듈의 인터페이스를 얻을 수 있습니다. 이때 _ 변수와 util 변수는 모두 로컬 변수이며

변수 이름 은 개발자가 완전히 제어합니다. _가 마음에 들지 않으면 base:

define(function(require, exports, module) {
    var _ = require('base.js'), util = require('util.js');
    var p_tabs = _.$('tabs');
    // .... 其他代码
});

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

define(function(require, exports, module) {
    var base = require('base.js'), util = require('util.js');
    var p_tabs = base.$('tabs');
    // .... 其他代码
});

Loader

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

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

위 내용은 JavaScript 모듈 개발에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!