Estruturar o seu JavaScript com o Dojo
Você já conhece o Javascript e o utiliza para animar partes do seu site, mas falta estrutura. Suas funções de JavaScript passeiam em tags <script> colocados em vários lugares e você gostaria de colocar ordem em tudo isso? O Dojo foi feito para você.
Introdução
Dojo é um framework (conjunto de componentes de software) JavaScript, que vive na sombra do famoso JQuery , mas que tem sua cota de coisas boas. Além de ser fácil de instalar e muito leve você pode organizar seu Javascript, logicamente, em classes compostas de atributos e métodos. Assim, você pode usar os conceitos de herança e as inclusões de classes, umas dentro das outras.
Mas isso não é tudo: com o Dojo vem outro framework: " Dijit ". Ele contém, entre outras coisas, muitas ferramentas gráficas completamente codificadas como calendários, janelas que desaparecem progressivamente, ou até "displayers", facilitando a organização do seu site em abas (por exemplo). Um displayer é um objeto gráfico.
Em suma, o Dojo é poderoso e é difícil detalhar todas as suas possibilidades de uso!
Abaixo está os princípios básicos para você instalá-lo em seu site e poder organizar seu código em classes.
Porque, além dos sites inteiramente em JavaScript poderem existir, é muito legal também!
Instalação do Dojo
A instalação do Dojo se faz em três etapas bem comuns: download, inclusão no site e carregamento durante a abertura do site.
Download do Dojo
O melhor modo de baixar o Dojo é ir, diretamente, no site oficial do framework, ou seja, aqui: https://dojotoolkit.org/download/ e baixar a última versão estável.
Instalação do Dojo
Depois de baixado, você verá três pastas: "dojo", "dijit" e "Dojox" (esta última é, na verdade, uma extensão do framework básico). Nada mais fácil de instalar: copie estas três pastas na raiz do seu site (ou em uma subpasta se você estiver preferir, é claro).
Carregamento na inicialização do site
Última etapa, a mais importante: pedir ao browser do usuário para baixar o framework ao carregar o site. Para isso, use uma técnica semelhante ao carregamento de uma fonte de CSS: coloque uma tag fonte na "head" (cabeça):
<head> <script src=\"../../dojo/dojo.js\" type=\"text/javascript\"></script> </head>
Nesta linha, "dojo.js" é a página Javascript principal do framework. Lembre-se de mudar o caminho da pasta dojo em função do seu posicionamento na árvore do site
Voila! O Dojo está pronto para funcionar no seu site!
Utilização do Dojo
Pois é, tudo bem, mas qual é o interesse de ter um Dojo que se carrega. O que você vai fazer com este framework?
O método addOnLoad
O principal método do Dojo é o dojo.addOnLoad(). Este método é chamado para carregar o site. Há também um método dojo.addOnUnload () chamado, por sua vez, para fechar o site. Especificamente, basta você colocar na página inicial do seu site um script JS chamando este método:
<script type="text/javascript">
dojo.addOnLoad(
function() {
// Coloque aqui o código lançado no carregamento do seu site
}
);
</script>
A classe "Aplicação"
Mas você não vai, obviamente, colocar todo o seu código fonte JS aqui, isto não teria o menor sentido no que se refere ao método "sem Dojo"! Por isso, aí vai um truque que eu uso: a classe "Aplicação". Especificamente, esta classe é responsável pelo carregamento de todas as outras classes do site e tem, como atributo, as configurações padrão do seu site, se for o caso (exemplo para um blog: o número de itens por página de base, o estilo padrão, etc...).
Criação de uma classe Javascript
Veremos aqui a criação de uma classe Javascript através do Dojo ilustrado pela criação da nossa classe "Aplicação". Comece criando um arquivo "Application.js". Para ilustrar, vamos fingir que esta classe estava na raiz do site, na pasta "meusite", em seguida, na subpasta "javascript" ou seja: /meusite/ javascript/.
Vejamos a criação da classe JS com este exemplo:
dojo.provide('meusite.javascript.Application');
dojo.declare('meusite.javascript.Application', null, {
meuPrimeiroArgumento: null,
meuSegundoArgumento: null,
constructor: function(param1, param2) {
meuPrimeiroArgumento = param1;
// Códifo do fabricante da classe.
},
método1: function(param){
},
método2: function(){
}
});
Podemos observar várias coisas :
- Chamada da função dojo.provide como parâmetro o caminho da pasta classe. Isso permitirá que o Dojo "saiba" que esta classe Aplicação existe.
- Chamada da função dojo.declare na qual se encontra todo o código da classe Aplicação. Este método usa três parâmetros:
- O caminho da classe
- Um booleano significando, a grosso modo , "ignorar erros durante o carregamento", que eu sugiro que você deixe em "true" porque frequentemente há erros e um erro pode bloquear completamente o carregamento do Javascript do seu site!
- O conteúdo da classe em questão, em ordem:
- Em primeiro lugar encontramos os atributos da classe, inicializados com "null" e seguidos por vírgulas (incluindo o último).
- Depois, um primeiro método: o fabricante, que pode incluir, ou não, os parâmetros. Ele também pode não fazer nada, se você quiser.
- Os outros métodos da classe (opcional, claro).
- Finalmente, as chaves e parênteses de fechamento do método "declare".
Cada atributo e cada método é seguido por uma vírgula para separá-lo dos outros, exceto o último (como mostrado acima).
Conteúdo da classe Aplicação
Veja oeste conteúdo que proponho, para ilustrar o que vimos até agora.
dojo.provide('meusite.javascript.Application');
dojo.declare('meusite.javascript.Application', null, {
_usuário: null,
constructor: function(userParam) {
this._usuário = userParam;
},
start: function() {
alert(this._usuário);
}
});
Concretamente, aqui, vamos criar a classe Aplicação com uma cadeia de caracteres como parâmetro. Passar esse parâmetro como atributo e depois, chamar um método "start()" exibindo essa string.
Chamada da classe
Retornemos ao nosso dojo.addOnLoad. Aqui vamos criar uma instância da nossa classe Aplicação e exibir a cadeia de caracteres desejada.
O código é o seguinte:
<script type="text/javascript">
dojo.addOnLoad(
function() {
dojo.require('meusite.javascript.Application');
var appli = new meusite.javascript.Application("Olá Kioskea");
appli.start();
}
);
</script>
Veja, temos então as seguintes etapas:
- Chamada do método dojo.require() cujo objetivo é dizer "eu preciso da próxima classe". Atenção, a classe em questão deve ser declarada com o dojo.provide, caso contrário, não vai funcionar!
- Crie de uma instância da classe Aplicação com a ajuda do fabricante que vimos no parágrafo anterior e, portanto, com uma cadeia de caracteres (string) como parâmetro.
- Chamada do método start() da classe Aplicação, que é responsável pela exibição da cadeia anterior.
Resumo
Pronto! Você já sabe o necessário para criar um site totalmente em javascript. Especificamente, acontece assim:
- dojo.addOnLoad chama a sua classe Aplicação.
- Sua classe Aplicação contém todos os dojo.require do site! Em seguida, ela chama os fabricantes necessários (displayers, controladores, etc...)
Concluindo, a classe Aplicação é o coração do seu site em Javascript.
Para um uso mais concreto, podemos ver juntos, a utilização da arquitetura MVC com o Dojo.
- Estruturar o seu JavaScript com o Dojo
- Como desativar o javascript - Dicas -Chrome
- Como desativar o javascript no celular - Dicas -Android
- Baixar javascript - Downloads - Javascript
- Concatenação javascript - Dicas -Javascript
- Bloquear botão direito do mouse javascript - Dicas -Javascript
Assine nossa newsletter!
- Eventos de teclado javascript
- Javascript download mac
- Javascript ps4
- Fila javascript
- Às vezes, você deseja obter um resultado de formatação e não consegue entender por que ele não aparece. pode ser que existam caracteres ocultos em seu documento. ” selecione a alternativa que exibe o comando para visualizar os caracteres ocultos no documento: inspecionar documento. analisar estrutura do documento. visualizar espaços. mostrar tudo