Padrão de módulo JavaScript com exemplo [fechado]

Não consigo encontrar exemplos acessíveis que mostrem como dois (ou mais) módulos diferentes estão conectados para trabalhar juntos.

Então, eu gostaria de perguntar se alguém tem tempo para escrever um exemplo explicando como os módulos funcionam juntos.

Para abordar o padrão de design modular, você precisa entender estes conceitos primeiro:

Expressão de Função Imediatamente Invocada (IIFE):

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

Existem duas maneiras de usar as funções. 1. Declaração de função 2. Expressão de função.

Aqui estão usando a expressão de função.

O que é espaço para nome? Agora, se adicionarmos o espaço para nome ao trecho de código acima,

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

O que é fechamento em JS?

Isso significa que, se declararmos qualquer função com qualquer escopo variável / dentro de outra função (em JS, podemos declarar uma função dentro de outra função!), Ele sempre contará esse escopo da função. Isso significa que qualquer variável na função externa será lida sempre. Não lerá a variável global (se houver) com o mesmo nome. Esse também é um dos objetivos do uso de padrão de design modular, evitando conflitos de nomes.

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

Agora, aplicaremos esses três conceitos mencionados acima para definir nosso primeiro padrão de design modular:

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 para o código acima.

O objetivo é ocultar a acessibilidade variável do mundo exterior.

Espero que isto ajude. Boa sorte.

Eu realmente recomendaria que qualquer pessoa que entra neste assunto leia o livro gratuito de Addy Osmani:

"Aprendendo padrões de design JavaScript".

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Este livro me ajudou imensamente quando eu comecei a escrever JavaScript mais sustentável e ainda o uso como referência. Dê uma olhada em suas diferentes implementações de padrões de módulos, ele as explica muito bem.

Eu pensei em expandir a resposta acima falando sobre como você encaixaria os módulos em um aplicativo. Eu tinha lido sobre isso no livro de Doug Crockford, mas sendo novo no javascript ainda era um pouco misterioso.

Eu venho do fundo ac #, então adicionei alguma terminologia que acho útil a partir daí.

Html

Você terá algum tipo de arquivo html de nível superior. Ajuda pensar nisso como seu arquivo de projeto. Todo arquivo javascript que você adiciona ao projeto quer entrar nisso, infelizmente você não recebe suporte de ferramenta para isso (estou usando o IDEA).

Você precisa adicionar arquivos ao projeto com tags de script como estas:

        <script type="text/javascript" src="app/native/MasterFile.js" /></script>
        <script type="text/javascript" src="app/native/SomeComponent.js" /></script>

Parece que o colapso das tags faz com que as coisas falhem - enquanto parece que o xml é realmente algo com regras mais loucas!

Arquivo de espaço para nome

MasterFile.js

myAppNamespace = {};

é isso aí. Isso é apenas para adicionar uma única variável global para o restante do nosso código. Você também pode declarar namespaces aninhados aqui (ou em seus próprios arquivos).

Módulo (s)

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

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

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

O que estamos fazendo aqui é atribuir uma função de contador de mensagens a uma variável em nosso aplicativo. É uma função que retorna uma função que executamos imediatamente .

Conceitos

Eu acho que ajuda pensar na linha superior em SomeComponent como sendo o espaço para nome em que você está declarando algo. A única ressalva é que todos os seus namespaces precisam aparecer em algum outro arquivo primeiro - eles são apenas objetos enraizados na nossa variável de aplicativo.

No momento, apenas tomei pequenas medidas com isso (estou refatorando algum javascript normal de um aplicativo extjs para que eu possa testá-lo), mas parece muito bom, pois você pode definir pequenas unidades funcionais e evitar o atoleiro 'this ' .

Você também pode usar esse estilo para definir construtores retornando uma função que retorna um objeto com uma coleção de funções e não chamando imediatamente.

Aqui https://toddmotto.com/mastering-the-module-pattern, você pode encontrar o padrão completamente explicado. Eu acrescentaria que a segunda coisa sobre o JavaScript modular é como estruturar seu código em vários arquivos. Muitas pessoas podem aconselhá-lo aqui a usar a AMD, mas posso dizer por experiência própria que você acabará em algum momento com uma resposta lenta da página devido a inúmeras solicitações HTTP. A saída é a pré-compilação de seus módulos JavaScript (um por arquivo) em um único arquivo, seguindo o padrão CommonJS. Dê uma olhada nas amostras aqui http://dsheiko.github.io/cjsc/

Você pode encontrar o JavaScript padrão do módulo aqui http://www.sga.su/module-pattern-javascript/