답변:
모듈 식 디자인 패턴에 접근하려면 먼저 다음 개념을 이해해야합니다.
즉시 호출 된 함수 표현식 (IIFE) :
(function() {
// Your code goes here
}());기능을 사용할 수있는 두 가지 방법이 있습니다. 1. 함수 선언 2. 함수 표현.
함수 표현식을 사용하고 있습니다.
네임 스페이스 란 무엇입니까? 위의 코드에 네임 스페이스를 추가하면
var anoyn = (function() {
}());JS의 폐쇄 란 무엇입니까?
변수 범위가있는 함수를 다른 함수 내부에 선언하면 (다른 함수 내에서 함수를 선언 할 수 있습니다!) 항상 함수 범위를 계산합니다. 즉, 외부 함수의 변수는 항상 읽습니다. 같은 이름의 전역 변수 (있는 경우)를 읽지 않습니다. 이것은 또한 이름 충돌을 피하는 모듈 식 디자인 패턴을 사용하는 목표 중 하나입니다.
var scope = "I am global";
function whatismyscope() {
var scope = "I am just a local";
function func() {return scope;}
return func;
}
whatismyscope()()이제 위에서 언급 한 세 가지 개념을 적용하여 첫 번째 모듈 식 디자인 패턴을 정의하겠습니다.
var modularpattern = (function() {
// your module code goes here
var sum = 0 ;
return {
add:function() {
sum = sum + 1;
return sum;
},
reset:function() {
return sum = 0;
}
}
}());
alert(modularpattern.add()); // alerts: 1
alert(modularpattern.add()); // alerts: 2
alert(modularpattern.reset()); // alerts: 0목표는 외부 세계에서 변수 접근성을 숨기는 것입니다.
도움이 되었기를 바랍니다. 행운을 빕니다.
(function() { /* Your code goes here */}());당신도 그에게 IIAFE (즉시 호출하기 익명 기능 식)를 호출에 인생에 더 참조 할 수 있도록이 이름이없는 사촌 실제로 (즉시 기능 식 호출)는 인생이다, 확인은 익명의 stackoverflow.com/questions/ 2421911 /…
Addy Osmani의 무료 서적을 읽으려면이 주제를 입력하는 모든 사람을 추천합니다.
"자바 스크립트 디자인 패턴 배우기".
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
이 책은 유지 관리가 쉬운 JavaScript를 작성하기 시작했을 때 엄청나게 도움이되었지만 여전히 참조로 사용합니다. 그의 다른 모듈 패턴 구현을 살펴보면 실제로 잘 설명합니다.
모듈에 응용 프로그램을 어떻게 맞추는 지에 대해 이야기하면서 위의 대답을 확장한다고 생각했습니다. 나는 더그 크록 포드 책에서 이것에 대해 읽었지만 자바 스크립트에 익숙하지 않은 것은 여전히 조금 신비했습니다.
나는 AC # 배경에서 왔으므로 거기에서 유용한 용어를 추가했습니다.
HTML
당신은 일종의 최상위 html 파일을 가질 것입니다. 이것을 프로젝트 파일로 생각하면 도움이됩니다. 프로젝트에 추가하는 모든 자바 스크립트 파일은이 작업을 수행하려고하지만 불행히도이 도구에 대한 지원을받지 못합니다 (IDEA를 사용하고 있습니다).
다음과 같은 스크립트 태그를 사용하여 프로젝트에 파일을 추가해야합니다.
<script type="text/javascript" src="app/native/MasterFile.js" /></script>
<script type="text/javascript" src="app/native/SomeComponent.js" /></script>태그가 무너지면 문제가 발생합니다. xml처럼 보이지만 실제로는 더 까다로운 규칙이 있습니다!
네임 스페이스 파일
MasterFile.js
myAppNamespace = {};그게 다야. 이것은 우리 코드의 나머지 부분에 하나의 전역 변수를 추가하기위한 것입니다. 중첩 된 네임 스페이스를 여기 (또는 자체 파일)로 선언 할 수도 있습니다.
모듈
SomeComponent.js
myAppNamespace.messageCounter= (function(){
var privateState = 0;
var incrementCount = function () {
privateState += 1;
};
return function (message) {
incrementCount();
//TODO something with the message!
}
})();우리가 여기서하는 일은 애플리케이션의 변수에 메시지 카운터 기능을 할당하는 것입니다. 바로 실행 하는 함수를 반환하는 함수입니다 .
개념
SomeComponent의 최상위 라인을 무언가를 선언하는 네임 스페이스로 생각하는 것이 도움이된다고 생각합니다. 이것에 대한 유일한주의 사항은 모든 네임 스페이스가 다른 파일에 먼저 나타나야한다는 것입니다. 응용 프로그램 변수에 의해 근본이 된 객체 일뿐입니다.
난 단지 순간 (내가 그것을 테스트 할 수 있도록 extjs라는 응용 프로그램 중 일부 일반 자바 스크립트를 리팩토링있어)에서이 사소한의 조치를 취했지만 그것은 당신의 수렁 피하면서 작은 기능 단위를 정의 할 수있는 아주 좋은 것 '이 ' .
이 스타일을 사용하여 함수 컬렉션이있는 객체를 반환하는 함수를 반환하고 즉시 호출하지 않으면 생성자를 정의 할 수 있습니다.
여기 https://toddmotto.com/mastering-the-module-pattern 당신은 철저하게 설명 된 패턴을 찾을 수 있습니다. 모듈 식 JavaScript의 두 번째 사항은 코드를 여러 파일로 구성하는 방법입니다. 많은 사람들이 AMD와 함께 가라고 조언 할 수도 있지만, 많은 HTTP 요청으로 인해 느린 페이지 응답으로 어느 시점에 끝날 것이라고 경험에서 말할 수 있습니다. 해결 방법은 JavaScript 모듈 (파일 당 하나씩)을 CommonJS 표준에 따라 단일 파일로 사전 컴파일하는 것입니다. 여기에 샘플을보십시오 http://dsheiko.github.io/cjsc/
http://www.sga.su/module-pattern-javascript/에서 모듈 패턴 JavaScript를 찾을 수 있습니다 .