ToolKit JS

Kit de ferramentas V3

Ok, então descartei a versão 1 e a versão 2, simplesmente porque o objetivo final por trás do ToolKitMin é oferecer um conjunto de ferramentas, não necessariamente uma estrutura em si, mas sim uma biblioteca. Você pode pensar no ToolKitMin como uma biblioteca para auxiliar no desenvolvimento de aplicativos front-end. ToolKitMin é uma ferramenta poderosa para iniciantes aprenderem, pois inclui alguns dos seguintes:

• Componentes
  • Mecanismo de modelo simplista
  • Estado(s)
• Consultas
  • Na memória
• Serviços (também conhecido como AJAX)
• Controlador de armazenamento
• ETC.

Aqui está um exemplo de algum código ...

 var app = ToolKit ;
app . DOM . ready ( function ( ) {
  console . log ( app ) ;
  app . Session . set ( 'user_id' , { user_id : 1 } ) ;
  console . log ( app . Session . get ( 'user_id' ) ) ;

  // Query demo.
  var queryString = "age GTE 20" ;
  var queryCols = [ "age" , "name" ] ;
  var queryData = [ { "age" : "30" , "name" : "Jack" } , { "age" : "20" , "name" : "Jay" } , { "age" : "12" , "name" : "Stacy" } ] ;

  app . Query . setColumns ( queryCols ) ;
  app . Query . setTable ( queryData ) ;
  app . Query . select ( queryString ) ;

  app . Query . onComplete ( function ( records ) {
    console . log ( 'Complete query' ) ;
    console . log ( records ) ;
  } ) ;

  // AJAX demo.
  app . Service ( {
    url : window . location . href ,
    method : "GET" ,
    success : function ( data ) {
      console . log ( data ) ;
      app . Query . exe ( ) ;
    }
  } ) ;

  // Component demo.
  window . appState = {
    name : 'Will I Am'
  } ;

  var component = {
    name : 'demo' ,
    state : window . appState ,
    root : app . Utils . $one ( "body" ) ,
    template : '<h1><% data.name %></h1>' ,
    onStateChange : function ( ) {
      console . log ( "State changed!" ) ;
    } ,
    onRender : function ( ) {
      console . log ( "Rendered!" ) ;
    }
  } ;

  app . Component . registerComponent ( component ) ;

  app . Router . add ( / home / , function ( ) {
    console . log ( 'Home page.' ) ;
  } ) ;
  app . Router . add ( / about / , function ( ) {
    console . log ( 'About page' ) ;
  } ) ;
  app . Router . add ( function ( ) {
    console . log ( '404 Error?!' ) ;
  } ) ;
} ) ;

// Wait 2 seconds to see the component update.
setTimeout ( function ( ) {
  window . appState . name = "Will Smith" ;
} , 2000 ) ;

// Test the router.
setTimeout ( function ( ) {
  app . Router . navigate ( 'home' ) ;
} , 1000 ) ;

setTimeout ( function ( ) {
  app . Router . navigate ( 'about' ) ;
} , 2000 ) ;

setTimeout ( function ( ) {
  app . Router . navigate ( '404test' ) ;
} , 3000 ) ;

ToolKitMin é o que o nome pode indicar, é um conjunto de ferramentas que foram reunidas, apenas muitas das ferramentas foram reduzidas ao seu núcleo, garantindo que o ToolKitMin-JS permaneça o mais leve possível, ao mesmo tempo que oferece bastante de funcionalidade.

Pendência

Atualize a documentação e outros enfeites!

---

Características

• Serviço
• Componente
• Utilitários
• Consulta
• Roteador
• Mecanismo de modelo
• Outros
  • DOM
  • registro
  • Sessão
  • Loja

Serviço

O método de serviço é simplesmente a implementação do ajax no ToolKit.

Componente

Isto implementa um modelo que lida com algum modelo DHTML através do mecanismo de modelo, mas também lida com seu próprio estado que pode ser manipulado fora do componente, como no exemplo. Finalmente, ele pode despachar seu próprio controlador usando a propriedade/função 'onRender'.

Utilitários

Este é apenas um espaço de nomes para métodos úteis/simples, não muito mais do que isso.

Consulta

Isso permite que você execute uma 'consulta' em uma matriz de objetos, ela é executada usando um retorno de chamada para garantir que o thread de execução principal nunca seja bloqueado pela iteração em um grande conjunto de dados.

Roteador

Permite que você tenha URLs diferentes dentro do front end, permitindo um SPA, atualmente só permite URLs baseadas em hash, e não monitora alterações de URL por padrão, ou seja, o usuário tenta navegar para uma URL diferente. Embora tal recurso seja tão simplista que acredito que possa ser uma decisão do(s) desenvolvedor(es) implementar ou não tal recurso, afinal ele significa ser leve.

Mecanismo de modelo

Atualmente faz uso de um mecanismo de template um tanto semelhante ao EJS, embora muito menor, mínimo e simplista.

Outros

Estas são apenas ferramentas simples que podem ser usadas se necessário ou não.

DOM

Namespace para recursos relacionados ao DOM.

registro

Simplesmente console.log , embora exija que o modo dev seja definido como verdadeiro.

Sessão

Permite armazenar dados na sessão de um usuário, também conhecido como cobertura do armazenamento da sessão.

Loja

Permite armazenar dados no armazenamento local.