jquery-toad

<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery TOAD</title> <link rel="icon" href="images/jquery-toad-icon.png"> <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.2/dist/css/bootstrap.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"> <link rel="stylesheet" href="https://unpkg.com/highlightjs@9.10.0/styles/github-gist.css"> <link rel="stylesheet" href="style/toad.css"> <script> var __TOAD__ = 'TOAD'; </script> </head> <body data-controller="main"> <main role="main"> <div class="container"> <div class="toad-main-box bg-light border-dark"> <div class="toad-logo-box"><img class="img-fluid" src="images/jquery-toad-logo.png" alt="Logo jQuery TOAD"></div> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"><a class="navbar-brand" href="index.html">Home</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Alterna navegação"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="main-menu"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"><a class="nav-link" href="motivacao.html">Qual a motivação?</a></li> <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="submenu-documentacao" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Documentação</a> <div class="dropdown-menu" aria-labelledby="submenu-documentacao"> <h6 class="dropdown-header">TUTORIAIS</h6><a class="dropdown-item" href="tutorial-quickstart.html">Guia de início rápido</a><a class="dropdown-item" href="tutorial-mvc.html">O padrão MVC</a> <div class="dropdown-divider"></div> <h6 class="dropdown-header">CONCEITOS</h6><a class="dropdown-item" href="conceito-variavel-toad.html">A variável <kbd>__TOAD__</kbd></a><a class="dropdown-item" href="conceito-modulo.html">Modularização</a><a class="dropdown-item" href="conceito-componente.html">Componentes</a><a class="dropdown-item" href="conceito-utilitario.html">Utilitários</a><a class="dropdown-item" href="conceito-configuracao.html">Configurações</a><a class="dropdown-item" href="conceito-constante.html">Constantes</a> </div> </li> </ul> </div> </nav> <div class="toad-content-box col-md-10 offset-md-1"> <h1 class="display-4 text-center">A variável <code>__TOAD__</code></h1> <p class="lead"> Uma das nossas regras é <i>"Não misture HTML com JavaScript"</i>, e com isso queremos dizer que você não deve incluir nenhum código JavaScript nas páginas HTML. Porém tudo deve ser dosado, e por isso abrimos uma exceção. </p> <p class="lead"> Toda aplicação <i>jQuery TOAD</i> requer que antes de chamar a biblioteca <code>jquery-toad.js</code> em si, precisa-se definir qual será o nome do módulo principal, onde estarão aninhados todos os outros módulos, e isso é feito definindo uma variável global chamada <code>__TOAD__</code>. </p> <div data-gui="code-block" data-lang="html" data-file-path="samples/snippets/var-toad/var-toad-snippet-1.html"></div> <p class="lead"> O nome que for definido aqui ditará como serão construídos os demais scripts, pois tudo será acessado à partir dessa variável global. Isso também corrobora com nosso outro objetivo, <i>"Modularize"</i>, visto que se trata de um módulo principal. </p> <p class="lead">Ex:</p> <div data-gui="code-block" data-lang="js"></div> <p class="lead"> Tanto os objetos da própria biblioteca <i>jQuery TOAD</i> quanto os objetos da aplicação que está sendo desenvolvida serão acessados à partir desse módulo inicial. </p> <p class="lead"> Durante um tempo consideramos disponibilizar uma variável global, tipo <code>$toad</code>, assim como a própria jQuery faz com o uso de <code>$</code>, <a href="https://angularjs.org" target="_blank">AngularJS</a> faz com <code>angular</code>, ou <a href="https://vuejs.org" target="_blank">VueJS<a> faz com <code>Vue</code>. </p> <blockquote class="blockquote"> PS: Aqui não estamos falando de <a href="https://github.com/umdjs/umd" target="_blank">UMD</a>, <a href="https://github.com/amdjs/amdjs-api/wiki/AMD" target="_blank">AMD</a>, <a href="http://www.commonjs.org/" target="_blank">CommonJS</a> & Cia. Depois falamos disso. </blockquote> <p class="lead"> Pensamos até em usar algo como <code>App</code> ou <code>$App</code> ou <code>ClientApp</code>, porque consideramos que se por um lado teríamos o módulo da própria <i>jQuery TOAD</i> a aplicação em si também poderia ter o seu próprio espaço de nomes. </p> <p class="lead"> Por fim, entendemos que o nome da aplicação tem muito significado quando estamos lendo o código, e como a nossa proposta é de simplesmente auxiliar no desenvolvimento da sua aplicação, preferimos ficar como coadjuvante. Então deixamos você dizer que nome prefere para sua aplicação, e então preparamos o mínimo necessário de utilitários que você precisará e o resto é contigo. </p> <p class="lead">Como resultado, nós temos uma forma bem simples pra desenvolver nossa aplicação, visto que o ponto central já está definido.</p> <p class="lead"> <strong>Um exemplo:</strong> Caso você queira acessar um utilitário que a própria <i>jQuery TOAD</i> disponibiliza como a função <code>setPageTitle</code> (que define o título da página) ou um outro utilitário que você mesmo definiu, você fará isso da mesma forma: </p> <div data-gui="code-block" data-lang="js" data-file-path="samples/snippets/var-toad/var-toad-snippet-2.js"></div> <p class="lead"> Isso é bom porque o foco é sua aplicação, então deixamos tudo em volta dela. Você só precisa saber que sem definir essa variável a <i>jQuery TOAD</i> se recusará a continuar. </p> <p class="lead"> Você pode definir qualquer string válida para o nome de sua aplicação, mas recomendamos um nome curto e significativo, como o nome de sua aplicação ou sigla dela, e apesar de não fazer diferença, sugerimos usar tudo em maiúsculo (só pra esse nome). É só uma sugestão porque achamos bonito, mas você é quem manda. </p> </div> </div> </div> </main> <footer class="text-secondary bg-light border-dark toad-footer-box"> <div class="container"> <p class="lead text-center" data-gui="copyright"></p> <div class="my-2 my-lg-0 text-center"><a class="btn btn-secondary" target="_blank" href="https://github.com/e5r/jquery-toad" role="button" title="@e5r/jquery-toad"><i class="fab fa-github"></i></a> <a class="btn btn-info" target="_blank" href="https://erlimar.wordpress.com" role="button" title="erlimar.wordpress.com"><i class="fab fa-wordpress-simple"></i></a> <a class="btn btn-primary" target="_blank" href="https://twitter.com/erlimar" role="button" title="@erlimar"><i class="fab fa-twitter"></i></a> <a class="btn btn-danger" target="_blank" href="https://www.youtube.com/channel/UC6zPtVBfcAdkzq7-dpSlhdw" role="button" title="E5R Development Team"><i class="fab fa-youtube"></i></a>  </div> </div> </footer> <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script> <script src="https://unpkg.com/bootstrap@4.1.2/dist/js/bootstrap.js"></script> <script src="https://unpkg.com/highlightjs@9.10.0/highlight.pack.js"></script> <script src="lib/jquery-toad.js"></script> <script src="app/components/code-block-component.js"></script> <script src="app/components/copyright-component.js"></script> <script src="app/components/demo-component.js"></script> <script src="app/controllers/main-controller.js"></script> </body> </html>