🥇 Introdução básica do RequireJS

RequireJS

A codificação baseada em módulo facilita o esforço de manutenção e aumenta a capacidade de reutilização.

No RequireJS, separamos o código em módulos, cada um com uma única responsabilidade.

RequireJS implementa a API AMD, outra API para carregamento de módulo é CommonJS.

Exemplo Simples

Neste exemplo, criaremos um módulo de usuário e um módulo de postagem .

A tag de script que inicializa o require.js inclui um atributo “data-main” apontando para o arquivo main.js

Index.html

<!doctype html>
<html>
<body>
<script data-main="js/main" src="js/vendor/require.js"></script>
</body>
</html>

O módulo principal inicializa nosso aplicativo. A função require () leva dois argumentos: uma matriz de dependências e uma função de retorno de chamada para executar assim que todas as dependências forem carregadas. Esta função de retorno de chamada carrega nossos módulos de usuário e postagem.

js / main.js

require(['user', 'blog/post'], function(u, p){
    var user = new u(), post = new p();
    post.makePost();
});

O módulo de usuário possui uma função define () fornecida por RequireJS, que deve retornar algo, que será encaminhado para a função de retorno de chamada.

js / user.js

define([], function () {

    var returnedModule = function () {
        var name = 'Steven';
        this.getName = function () {
            return name;
        }
    };

    return returnedModule; 
});

O módulo de postagem em js / blog / pasta assume uma dependência para o módulo de usuário. Ele retorna um método que posta o nome do usuário e a mensagem no console.

js / blog / post.js

define(['user'], function (u) {
    // load in user module
    var user = new u();

    var returnedModule = function () {
        var name = user.getName();

        this.makePost = function (message) {
            console.log( name + message + " posted at " + new Date() );
        }
    };

    return returnedModule;  
});

Agora que terminamos nosso aplicativo, eu queria adicionar algumas dependências como jQuery ou sublinhado. Para configurar bibliotecas como jQuery como uma dependência, devemos informar ao RequireJS o caminho para encontrar o arquivo JavaScript e a variável global a ser usada em nosso main.js

Carregando outras dependências

require.config({
    paths: {
        'jQuery': 'vendor/jquery-1.9.0.min',
        'underscore': 'vendor/underscore-1.9.min'
    },
    shim: {
        'jQuery': {
            exports: '$'
        },
        'underscore': {
            exports: '_'
        }
    }
});

Então podemos usar essas bibliotecas adicionando-as aos nossos módulos.

require(['user', 'jQuery'], function (u, $) {

    var user = new u()
    // now append user name to the dom using jQuery
    $("p").append(user.getName())
});

Eu encontrei outro post de introdução realmente bom sobre estouro de pilha mostrando um aplicativo inicial básico usando requirejs, bem como o tutorial de exemplo de Matthieu Larcher no qual este post é baseado.

Related Posts