예제가 포함 된 JavaScript 모듈 패턴 [닫힘]

예제가 포함 된 JavaScript 모듈 패턴 [닫힘]

---

두 개 이상의 서로 다른 모듈이 함께 작동하는 방법을 보여주는 액세스 가능한 예제를 찾을 수 없습니다.

그래서 모듈이 함께 작동하는 방법을 설명하는 예제를 작성할 사람이 있는지 물어보고 싶습니다.

---

모듈 식 디자인 패턴에 접근하려면 먼저 다음 개념을 이해해야합니다.

즉시 호출 된 함수 표현식 (IIFE) :

(function() {
      // Your code goes here 
}());

기능을 사용할 수있는 두 가지 방법이 있습니다. 1. 함수 선언 2. 함수 표현.

함수 표현식을 사용하고 있습니다.

네임 스페이스 란 무엇입니까? 위의 코드에 네임 스페이스를 추가하면

var anoyn = (function() {
}());

JS의 폐쇄 란 무엇입니까?

변수 범위가있는 함수를 다른 함수 내부에 선언하면 (다른 함수 내에서 함수를 선언 할 수있는 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

위의 코드에 대한 jsfiddle.

목표는 외부 세계에서 변수 접근성을 숨기는 것입니다.

도움이 되었기를 바랍니다. 행운을 빕니다.

---

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>

It appears collapsing the tags causes things to fail - whilst it looks like xml it's really something with crazier rules!

Namespace file

MasterFile.js

myAppNamespace = {};

that's it. This is just for adding a single global variable for the rest of our code to live in. You could also declare nested namespaces here (or in their own files).

Module(s)

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();

What we're doing here is assigning a message counter function to a variable in our application. It's a function which returns a function which we immediately execute.

Concepts

I think it helps to think of the top line in SomeComponent as being the namespace where you are declaring something. The only caveat to this is all your namespaces need to appear in some other file first - they are just objects rooted by our application variable.

I've only taken minor steps with this at the moment (i'm refactoring some normal javascript out of an extjs app so I can test it) but it seems quite nice as you can define little functional units whilst avoiding the quagmire of 'this'.

You can also use this style to define constructors by returning a function which returns an object with a collection of functions and not calling it immediately.

---

Here https://toddmotto.com/mastering-the-module-pattern you can find the pattern thoroughly explained. I would add that the second thing about modular JavaScript is how to structure your code in multiple files. Many folks may advice you here to go with AMD, yet I can say from experience that you will end up on some point with slow page response because of numerous HTTP requests. The way out is pre-compilation of your JavaScript modules (one per file) into a single file following CommonJS standard. Take a look at samples here http://dsheiko.github.io/cjsc/

---

You can find Module Pattern JavaScript here http://www.sga.su/module-pattern-javascript/

참고URL : https://stackoverflow.com/questions/17776940/javascript-module-pattern-with-example