Agora, o requer.js é minha maneira favorita de programar JavaScript. Isso torna a quebra de código em pedaços e fácil de gerenciar. O otimizador do request.js pode nos ajudar a distribuir um aplicativo maior em várias aplicações menores, conectá -lo por meio de dependências e finalmente mesclá -lo durante a compilação e embalagem. Esses motivos nos levam a usar requer.js.
Então, vamos dar uma olhada no que os recursos impressionantes exigem. Os js têm!
Compatível com Commonjs
A AMD (especificação de definição de módulo assíncrona) aparece no grupo de trabalho Commonjs. O CommonJS pretende criar um ecossistema de JavaScript. Uma parte importante do Commonjs é o transporte/c, o antecessor da AMD, e requer.js é uma implementação dessa especificação.
A diferença de sintaxe entre o módulo Commonjs e o módulo AMD é principalmente devido à necessidade da AMD de apoiar os recursos assíncronos do navegador. O módulo Commonjs precisa ser sincronizado, por exemplo:
A cópia do código é a seguinte:
var somemodule = requer ("somemodule");
var outro module = requer ("outro módulo");
exports.asplode = function () {
somemodule.doteHawesome ();
outro module.DOMOARAWEMATE ();
};
O módulo AMD carrega o módulo de forma assíncrona; portanto, a definição do módulo requer uma matriz como o primeiro parâmetro, e a função de retorno de chamada após o carregamento do módulo é transmitido como o segundo parâmetro.
A cópia do código é a seguinte:
Definir (["Somemodule"], função (Somemodule) {
retornar {
asplode: function () {
somemodule.doteHawesome ();
// Isso será executado de forma assíncrona
requer (["outro módulo"], função (outro módulo) {
outro module.DOMOARAWEMATE ();
});
}
};
});
No entanto, a AMD também é compatível com a sintaxe do CommonJS no requim.js. Ao envolver o módulo Commonjs através da função Definir da AMD, você também pode ter um módulo CommonJS na AMD, por exemplo:
A cópia do código é a seguinte:
Definir (função (requer, exportação, módulo)
var somemodule = requer ("somemodule");
var outro module = requer ("outro módulo");
somemodule.doteHawesome ();
outro module.DOMOARAWEMATE ();
exports.asplode = function () {
somemodule.doteHawesome ();
outro module.DOMOARAWEMATE ();
};
});
De fato, o requer.js interpreta o conteúdo do módulo da função de retorno de chamada através da função .ToString, encontra sua dependência correta e a transforma em um módulo AMD normal. Deve -se notar que, se você escrever módulos dessa maneira, poderá ser incompatível com outros carregadores da AMD, porque isso viola a especificação da AMD, mas pode entender como esse formato é bem escrito.
O que está acontecendo aqui, requer.js realmente faz a função. A função de retorno de renovação do titr.Tring analisa o conteúdo do módulo e encontra a dependência correta, assim como é um módulo AMD normal. É importante observar que, se você optar por escrever módulos como este, eles provavelmente serão incompatíveis com outros carregadores de módulos AMD, pois isso viola a especificação da AMD, mas é uma boa idéia entender que esse formato existe!
CDN de volta
Outro tesouro oculto requer.js é que ele suporta rollback carregando a biblioteca correspondente local quando o CDN está carregando incorretamente. Podemos conseguir isso por meio de requer.config:
A cópia do código é a seguinte:
requerjs.config ({
Caminhos: {
jQuery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jQuery'
]
}
});
Sem dependências? Objeto literal? sem problemas!
Quando você escreve um módulo que não possui dependências e apenas retorna um objeto que contém algumas funções funcionais, podemos usar uma sintaxe simples:
A cópia do código é a seguinte:
definir({
forcecoke: function () {
},
Forcelighting: function () {
},
forcerun: function () {
}
});
É simples e útil se o módulo for apenas uma coleção de funções ou apenas um pacote.
Dependência circular
Em alguns casos, podemos precisar das funções nos módulos Modulea e Modulea para confiar em alguns aplicativos. Isso é dependência circular.
A cópia do código é a seguinte:
// js/app/modulea.js
Definir (["requer", "app/app"],
função (requer, app) {
retornar {
Foo: function (title) {
var app = requer ("app/app");
retornar app.something ();
}
}
}
);
Obtenha o endereço do módulo
Se você precisar obter o endereço do módulo, você pode fazer isso ...
A cópia do código é a seguinte:
var path = requer.Tourl ("./ style.css");
Baseurl
Geralmente, ao realizar testes de unidade, seu código -fonte pode ser colocado em uma pasta semelhante ao SRC e, ao mesmo tempo, seu teste pode ser colocado em uma pasta semelhante aos testes. Isso pode ser difícil para obter a configuração do teste correta.
Por exemplo, temos um arquivo index.html na pasta Testes e precisamos carregar testes/spec/*. JS localmente. E assumindo que todo o código -fonte está no src/js/*. Js e existe um main.js nessa pasta.
No index.html, o Data-Main não está definido quando o requer.js é carregado.
A cópia do código é a seguinte:
<script src = "src/js/fornecedor/requer.js"> </sCript>
<Cript>
requer (["../src/js/main.js"], function () {
requer.config ({
Baseurl: "../src/js/"
});
requer ([
"./spec/test.spec.js",
"./spec/moar.spec.js"
], function () {
// Inicie sua estrutura de teste
});
});
</script>
Você pode encontrar que o main.js está carregado. No entanto, como o Data-Main não está definido, precisamos formular um BaseUrl como desejamos. Ao usar o Data-Main, o BaseUrl definirá automaticamente de acordo com o arquivo que ele define.
Aqui você pode ver o main.js está carregado. No entanto, como não carrega a tag de script principal de dados, você deve especificar uma base. Quando os dados são usados principalmente para Baseurl, inferido a partir do local no arquivo principal. Ao personalizar o BASEURL, podemos armazenar facilmente o código de teste e o código do aplicativo separadamente.
JSONP
Podemos lidar com terminais JSONP como este:
A cópia do código é a seguinte:
requer ([
"http://someapi.com/foo?callback=define"
], função (dados) {
console.log (dados);
});
Para bibliotecas que não sejam do AMD, use o calço para resolver
Sob muitos pedidos, precisamos usar bibliotecas que não sejam do AMD. Por exemplo, backbone e sublinhado não se adaptam à especificação da AMD. E o jQuery realmente se define como uma variável global chamada jQuery, para que você não precise fazer nada com o jQuery.
Felizmente, podemos usar a configuração do SHIM para resolver esse problema.
A cópia do código é a seguinte:
requer.config ({
Caminhos: {
"Backbone": "Vendor/Backbone",
"sublinhado": "fornecedor/sublinhado"
},
Shim: {
"Backbone": {
DEPS: ["sublinhado"],
Exportações: "Backbone"
},
"subscore": {
Exportações: "_"
}
}
});