ToolKit JSダウンロード - ToolKit JSソースコードのダウンロード

ToolKit JS

その他のカテゴリー

1.0.0

ダウンロード

ツールキットV3

さて、私はバージョン 1 とバージョン 2 を破棄しました。ToolKitMin の背後にある最終的な目標は、必ずしもフレームワークである必要はなく、むしろライブラリであるツールのセットを提供することだからです。 ToolKitMin は、フロントエンドアプリケーション開発の開発を支援するライブラリと考えることができます。 ToolKitMin は、以下のいくつかが含まれているため、初心者が学習するための強力なツールです。

コンポーネント
- シンプルなテンプレートエンジン
- 州
クエリ
- 記憶の中で
サービス (別名 AJAX)
ストレージコントローラー
等。

コードの例を次に示します...

 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 が可能な限り軽量でありながら、十分な機能を提供できるようにしています。機能性のこと。

藤堂

ドキュメントなどを更新してください!

特徴

サービス
成分
ユーティリティ
クエリ
ルーター
テンプレートエンジン
その他
- ドム
- ログ
- セッション
- 店

サービス

サービスメソッドは、単純に ToolKit の ajax 実装です。

成分

これは、テンプレートエンジンを介して DHTML テンプレートを処理するテンプレートを実装します。例のように、コンポーネントの外部で操作できる独自の状態も処理します。最後に、「onRender」プロパティ/関数を使用して、独自のコントローラーをディスパッチできます。

ユーティリティ

これは便利で単純なメソッドの名前空間にすぎず、それ以上の意味はありません。

クエリ

これにより、オブジェクトの配列に対して「クエリ」を実行できます。コールバックを使用して実行され、大規模なデータセットの反復処理によってメイン実行スレッドがブロックされることがなくなります。

ルーター

フロントエンド内で異なる URL を使用できるようにし、SPA を許可します。現在はハッシュベースの URL のみを許可し、デフォルトでは URL の変更を監視しません。つまり、ユーザーが別の URL に移動しようとすることです。このような機能は非常に単純なので、そのような機能を実装するかどうかは開発者の決定に委ねられると思いますが、結局のところ、軽量であることが重要です。