modularizando seu código com requirejs charles viegas charles.viegas@codate.com.br @charlesviegas
Post on 22-Apr-2015
105 Views
Preview:
TRANSCRIPT
Modularizando seu código com Requirejs
Charles Viegascharles.viegas@codate.com.br
@charlesviegas
Sobre mim
• Sócio e consultor da Codate• Mais de 10 anos de experiência• Conhecimentos– Javascript– Java– Arquitetura de Software– SOA e BPM
<script src="/assets/js/lib/jquery-1.7.1.min.js"></script><script src="/assets/js/lib/jquery-ui-1.8.17.custom.min.js"></script><script src="/assets/js/global.js"></script><script src="/assets/js/breaking-news.js"></script><script src="/assets/js/lib/jquery.colorbox.js"></script><script src="/assets/js/modal.js"></script><script src="http://use.typekit.com/did3rrm.js"></script><!--[if lt IE 9]> <script src="/assets/js/lib/cssSandpaper/EventHelpers.js"></script> <script src="/assets/js/lib/cssSandpaper/cssQuery-p.js"></script> <script src="/assets/js/lib/cssSandpaper/jcoglan.com/sylvester.js"></script> <script src="/assets/js/lib/selectivizr-min.js"></script><![endif]--><script src="/assets/js/lib/bgpos.js"></script><script src="http://w.sharethis.com/button/buttons.js"></script><script src="/assets/js/lib/yepnope.css-prefix.js"></script><script src="/assets/js/feature-carousel.js"></script><script src="/assets/js/dropdown.js"></script><script src="/assets/js/dropdown.js"></script><script src="/assets/js/dropdown.js"></script><script src="/assets/js/dropdown.js"></script>
Conhece?
Muitos módulos
• Um arquivo por módulo• Problemas de performance• Carregamento assíncrono?
Dependências complexas
• Qual a ordem de carregamento dos módulos?• Difícil de saber a ordem de cabeça
RequireJS
• Deixa claras as dependências• Evita globais• Reduz o acomplamento• Carrega scripts sobre demanda
Uso
<script src=“require.js” data-main=“main”></script>
main.js
require(["app"], function(app) { app.init();
});
app.js
define(["lib/account", "lib/session"], function (account, session) { return { init: function () {
// Faz alguma coisa }
}; });
Definindo um módulo
define( // Opcional, default é o nome do arquivo. nomeModulo, // Opcional, array com nome das dependências. dependencias, // Os parâmetros contém as refs das dependências. function(params){
});
Otimização
• Combina vários arquivos•Minify• r.js
https://github.com/charlesviegas/requirejs.git
www.codate.com.br/blogs
Obrigado!
top related