ToolKit JS

Boîte à outilsV3

D'accord, j'ai donc abandonné les versions 1 et 2, simplement parce que le but ultime de ToolKitMin est d'offrir un ensemble d'outils, pas nécessairement un framework en soi, mais plutôt une bibliothèque. Vous pouvez considérer ToolKitMin comme une bibliothèque pour faciliter le développement d'applications frontales. ToolKitMin est un outil puissant pour les débutants, car il comprend certains des éléments suivants :

• Composants
  • Moteur de modèles simpliste
  • État(s)
• Requêtes
  • En mémoire
• Services (alias AJAX)
• Contrôleur de stockage
• ETC.

Voici un exemple de code...

 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 est ce que son nom peut impliquer, c'est un ensemble d'outils qui ont été rassemblés, seul un grand nombre d'outils ont été dépouillés, garantissant que ToolKitMin-JS reste aussi léger que possible, tout en fournissant beaucoup de fonctionnalité.

Faire

Mettre à jour la documentation et ainsi de suite !

---

Caractéristiques

• Service
• Composant
• Utilitaires
• Requête
• Routeur
• Moteur de modèles
• Autres
  • DOMAINE
  • enregistrer
  • Session
  • Magasin

Service

La méthode de service est simplement l’implémentation d’ajax par ToolKit.

Composant

Ceci implémente un modèle qui gère certains modèles DHTML via le moteur de modèles, il gère également son propre état qui peut être manipulé en dehors du composant, comme dans l'exemple. Enfin, il peut distribuer son propre contrôleur en utilisant la propriété/fonction 'onRender'.

Utilitaires

Ceci est juste un espace de noms pour des méthodes utiles/simples, pas grand-chose de plus que cela.

Requête

Cela vous permet d'exécuter une « requête » sur un tableau d'objets, elle s'exécute en utilisant un rappel pour garantir que le thread d'exécution principal n'est jamais bloqué en itérant sur un grand ensemble de données.

Routeur

Vous permet d'avoir différentes URL dans le front-end, permettant un SPA, actuellement, il n'autorise que les URL basées sur le hachage et il ne surveille pas les modifications d'URL par défaut, c'est-à-dire que l'utilisateur essaie de naviguer vers une URL différente. Bien qu'une telle fonctionnalité soit si simpliste que je pense que cela pourrait dépendre du ou des développeurs de la décision de l'implémenter ou non, après tout, elle est censée être légère.

Moteur de modèles

Actuellement, il utilise un moteur de modèles quelque peu similaire à EJS, bien que beaucoup plus petit, minimal et simpliste.

Autres

Ce ne sont que des outils simples qui peuvent être utilisés si nécessaire ou non.

DOMAINE

Espace de noms pour les fonctionnalités liées au DOM.

enregistrer

Simplement console.log , bien que cela nécessite que dev-mode soit défini sur true.

Session

Vous permet de stocker des données dans la session d'un utilisateur, c'est-à-dire une couverture sur le stockage de session.

Magasin

Vous permet de stocker des données dans un stockage local.