ToolKit JS

工具包V3

好吧，我已经放弃了版本 1 和版本 2，只是因为 ToolKitMin 背后的最终目标是提供一组工具，不一定是一个框架，而是一个库。您可以将 ToolKitMin 视为一个辅助前端应用程序开发的库。 ToolKitMin 是一个适合初学者学习的强大工具，因为它包括以下一些内容：

• 成分
  • 简单的模板引擎
  • 州/省/自治区/直辖市
• 查询
  • 记忆中
• 服务（又名 AJAX）
• 存储控制器
• ETC。

这是一些代码的示例......

 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 顾名思义，它是一组聚集在一起的工具，只有很多工具被剥离到其核心，确保 ToolKitMin-JS 保持尽可能轻量级，同时提供足够的功能的功能。

托多

更新文档等等！

---

特征

• 服务
• 成分
• 实用程序
• 询问
• 路由器
• 模板引擎
• 其他的
  • DOM
  • 日志
  • 会议
  • 店铺

服务

service 方法只是 ToolKit 对 ajax 的实现。

成分

这实现了一个模板，该模板通过模板引擎处理一些 DHTML 模板，它还处理自己的状态，该状态可以在组件外部进行操作，如示例中所示。最后，它可以通过使用“onRender”属性/函数来调度自己的控制器。

实用程序

这只是有用/简单方法的名称空间，仅此而已。

询问

这允许您对对象数组执行“查询”，它通过使用回调来运行，以确保主执行线程永远不会因迭代大型数据集而被阻塞。

路由器

允许您在前端内拥有不同的 URL，从而允许 SPA，目前它仅允许基于哈希的 URL，并且默认情况下不监视 URL 更改，即用户尝试导航到不同的 URL。虽然这样的功能非常简单，我相信这可能取决于开发人员决定是否实现这样的功能，但毕竟它意味着轻量级。

模板引擎

目前它使用的模板引擎有点类似于 EJS，尽管更小、更简单。

其他的

这些只是简单的工具，无论是否需要都可以使用。

DOM

DOM 相关功能的命名空间。

日志

简单的console.log ，尽管它需要将 dev-mode 设置为 true 。

会议

允许您将数据存储到用户的会话中，也称为会话存储的覆盖。

店铺

允许您将数据存储到本地存储中。