Xiao A는 프로젝트 JavaScript 프로그램 작성을 담당하는 특정 기업가 팀의 프런트 엔드 엔지니어입니다.
글로벌 변수 충돌
자신의 경험에 따르면, Xiao는 일반적으로 사용되는 일부 기능을 추출하여 기능으로 작성하여 공개 파일 Base.js에 넣었습니다.
코드 사본은 다음과 같습니다.
var _ = {
$ : function (id) {return document.getElementById (id); },
getCookie : function (key) {...},
setCookie : 함수 (키, 값) {...}
};
Xiao A는 이러한 함수를 _ 객체에 넣어 너무 많은 글로벌 변수가 충돌을 일으키지 않도록합니다. 그는 나머지 팀 에게이 기능을 사용하고 싶다면 Base.js를 소개한다고 말했습니다.
Xiao C는 Xiao A의 동료입니다. 그는 Xiao A에게 말했다 : 그의 페이지는 indercore.js라는 클래스 라이브러리를 소개했으며,이 클래스 라이브러리는이 글로벌 변수를 차지할 것이며, 이는 "base.js"와 충돌 할 것이다. Xiao aUndscore.js는 제 3 자 라이브러리이며 수정하기가 어렵지만 Base.js는 많은 페이지에 퍼져 있었으며 수정할 수 없습니다. 결국, Xiao A는 alterscore.js가 점유하는 전 세계 변수를 변경하는 것 외에는 선택의 여지가 없었습니다.
현재 Xiao A는 네임 스페이스에 함수를 넣으면 전역 가변 충돌의 확률을 줄일 수 있지만 글로벌 변수 충돌의 문제를 해결하지는 않습니다.
의존하다
비즈니스 개발로 Xiao A는 태그 스위칭 구성 요소 탭과 같은 일련의 기능 라이브러리 및 UI 구성 요소를 작성하여 Base.js 및 Util.js에서 함수를 호출해야합니다.
어느 날, 새로운 동료 Xiao D와 Xiao A는 그가 페이지에서 탭을 인용했다고보고했지만 함수는 정상이 아니 었습니다. Xiao A는 한 눈에 문제를 발견했습니다. Xiao D는 Tabs.js가 Base.js 및 Util.js에 의존한다는 것을 알지 못했기 때문에이 두 파일에 대한 참조를 추가하지 않았습니다. 그래서 그는 즉시 변경을했습니다.
코드 사본은 다음과 같습니다.
<script src = "tabs.js"> </script>
<script src = "base.js"> </script>
<script src = "util.js"> </script>
그러나 기능은 여전히 비정상적입니다. 현재 Xiao A는 Xiao D에게 수업을 가르쳤다. Xiao D는 base.js와 util.js를 탭으로 탭했습니다.
Xiao는 자신이 저자이며 자연스럽게 구성 요소의 의존성을 알고 있다고 생각하지만, 다른 사람들, 특히 새로운 이민자는 말하기 어렵습니다.
잠시 후 Xiao는 태그 전환 구성 요소에 추가 기능을 추가했습니다. 이 함수를 구현하려면 aps.js는 ui.js에서 함수를 호출해야합니다. 현재 Xiao A는 심각한 문제를 발견했습니다. 그는 tabs.js라는 모든 페이지에 ui.js 참조를 추가해야했습니다! ! !
잠시 후, Xiao는 최적화 된 탭입니다.이 구성 요소는 더 이상 util.js에 의존하지 않으므로 탭을 사용하는 모든 페이지에서 util.js에 대한 참조를 제거하여 성능을 향상시킵니다. 그가 수정했을 때 그에게 큰 일이 일어났습니다. 시험 팀의 MM은 그에게 일부 페이지가 비정상적이라고 말했다. Xiao A가 그것을 보았을 때, 그는 일부 페이지의 다른 기능이 util.js에서 기능을 사용한다는 것을 갑자기 깨달았습니다. 그는이 파일에 대한 참조를 제거하고 오류를 일으켰습니다. 기능이 정상인지 확인하기 위해 코드를 다시 복원했습니다.
xiao 다시 생각하면 페이지를 하나씩 수정하지 않고 종속성을 수정하는 방법이 있습니까? 다른 기능에 영향을 미치지 않습니까?
모듈 식
Xiao A가 인터넷에서 쇼핑 할 때, 그는 실수로 이전에 발생한 모든 문제를 해결할 수있는 새로운 모듈 식 인코딩 방법을 발견했습니다.
모듈 식 프로그래밍에서 각 파일은 모듈입니다. 각 모듈은 define이라는 함수에 의해 생성됩니다. 예를 들어, base.js를 모듈로 변환 한 후 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
정의 (함수 (요구, 내보내기, 모듈) {
내보내기. $ = function (id) {return document.getElementById (id); };
Exports.getCookie = function (key) {...};
Exports.setCookie = 함수 (키, 값) {...};
});
base.js가 제공하는 모든 인터페이스는 내보내기 개체에 추가됩니다. 내보내기는 로컬 변수이며 전체 모듈의 코드는 글로벌 변수의 절반을 차지하지 않습니다.
그렇다면 특정 모듈에서 제공하는 인터페이스를 어떻게 호출합니까? Tabs.js를 예로 들어 보면 Base.js 및 util.js에 따라 다릅니다.
코드 사본은 다음과 같습니다.
정의 (함수 (요구, 내보내기, 모듈) {
var _ = 요구 ( 'base.js'), util = require ( 'util.js');
var div_tabs = _. $ ( '탭');
// .... 다른 코드
});
모듈은 로컬 기능 요구를 통해 다른 모듈의 인터페이스를 얻을 수 있습니다. 현재 변수 _ 및 util은 둘 다 로컬 변수이며 변수 이름은 개발자가 완전히 제어합니다. _가 마음에 들지 않으면 기본을 사용할 수도 있습니다.
코드 사본은 다음과 같습니다.
정의 (함수 (요구, 내보내기, 모듈) {
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 클래스 라이브러리에는 자체 로더도 있습니다.