ToolKit JS

Kit de herramientasV3

Bien, entonces eliminé la versión 1 y la versión 2, simplemente porque el objetivo final detrás de ToolKitMin es ofrecer un conjunto de herramientas, no necesariamente un marco en sí, sino más bien una biblioteca. Puede pensar en ToolKitMin como una biblioteca para ayudar en el desarrollo de aplicaciones front-end. ToolKitMin es una poderosa herramienta para que aprendan los principiantes, ya que incluye algunos de los siguientes:

• Componentes
  • Motor de plantillas simplista
  • Estado(s)
• Consultas
  • en la memoria
• Servicios (también conocidos como AJAX)
• Controlador de almacenamiento
• ETC.

Aquí hay un ejemplo de algún 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 es lo que su nombre puede implicar, es un conjunto de herramientas que se han reunido, solo que muchas de las herramientas se han desmontado hasta su núcleo, asegurándose de que ToolKitMin-JS se mantenga lo más liviano posible y, al mismo tiempo, brinde mucho. de funcionalidad.

Hacer

¡Actualice la documentación y todo eso!

---

Características

• Servicio
• Componente
• Utilidades
• Consulta
• Enrutador
• Motor de plantillas
• Otros
  • DOMINGO
  • registro
  • Sesión
  • Almacenar

Servicio

El método de servicio es simplemente la implementación de ajax de ToolKit.

Componente

Esto implementa una plantilla que maneja algunas plantillas DHTML a través del motor de plantillas, también maneja su propio estado que puede manipularse fuera del componente, como en el ejemplo. Finalmente puede enviar su propio controlador haciendo uso de la propiedad/función 'onRender'.

Utilidades

Este es solo un espacio de nombres para métodos útiles/simples, no mucho más que eso.

Consulta

Esto le permite ejecutar una 'consulta' sobre una serie de objetos, se ejecuta mediante una devolución de llamada para garantizar que el hilo de ejecución principal nunca se bloquee al iterar sobre un gran conjunto de datos.

Enrutador

Le permite tener diferentes URL dentro del front-end, lo que permite un SPA; actualmente solo permite URL basadas en hash y no monitorea los cambios de URL de forma predeterminada, es decir, el usuario intenta navegar a una URL diferente. Aunque esta característica es tan simplista que creo que podría depender de la decisión del desarrollador implementarla o no, después de todo, debe ser liviana.

Motor de plantillas

Actualmente hace uso de un motor de plantillas algo similar a EJS, aunque mucho más pequeño, minimalista y simplista.

Otros

Estas son sólo herramientas simples que pueden usarse si es necesario o no.

DOMINGO

Espacio de nombres para funciones relacionadas con DOM.

registro

Simplemente console.log , aunque requiere que dev-mode esté configurado en verdadero.

Sesión

Le permite almacenar datos en la sesión de un usuario, también conocido como una cobertura sobre el almacenamiento de la sesión.

Almacenar

Le permite almacenar datos en el almacenamiento local.