Javascript フロントエンド UI フレームワーク キット使用ガイド - Kitjs_javascript スキルの紹介

Kitjs (http://xueduany.github.com/KitJs) は、2011 年末に Taobao UED を辞めた後、私が自分で構築した HTML5 フロントエンド ウィジェット ライブラリのセットです。その本来の目的は、集中することでした。モバイル HTML ページのインタラクションでは、コンポーネントの使用は、文字通りの意味のキットと同じであり、小さくて実用的で、直接使用でき、二次開発にも簡単に使用できるコンポーネントのセットを作成することです。その後、プロジェクトがどんどん大きくなるにつれ、コンポーネント数も拡大し、PCブラウザ（IE6、FF、chrome coreシリーズなど）のサポートも追加され、当初の携帯電話開発の分野に留まらなくなりました。そして完全なプラットフォームに向けて正式に動き始めました。そのため、最近ではすべてのオリジナルモジュールが jsdoc 仕様に準拠した API ドキュメントに更新され、徐々にオープンソース化され、誰もが使用できるようになってきています。

まず、みんなにキットの基本を理解してもらうために、Kitjs の家系図を載せましょう

どうですか？色々見てちょっとめまいしてきました^_^ 簡単に言うと、kitjsとdojoは似ていて、

に分かれます。 >

1. Kit.js はコアであり、dojo と同様に kit を中心に拡張された JS ツール モジュールです

2. dijit に似た、kit.ui 名前空間のコンポーネント モジュール

3. ここではマークされていませんが、dojoX に似た研究室プロジェクトもあります。

KitJ のコンポーネントの中には、以前にブログで公開したことがある

などの優れたコンポーネントがいくつかあります。

オーディオプレーヤー

iPhone エフェクトのタブ

コンボボックス

3D フォトアルバム

カレンダー

ライトボックス

待ってください

まだ社内で使用されている、または開発中であるさらに優れたコンポーネントもいくつかあり、誰もが使用できるように段階的にリリースされる予定です。すべての KitJs コンポーネントは次のビジョンを満たしています

1. 中国人ユーザーの体験に近づく

2. 中国の開発者に関連したコメントとドキュメント

3. 市場の既存コンポーネントでは提供されない、誰もが必要とする機能を必ず提供する

4. より大きなウィジェットへの組み立てと結合を容易にするのに十分な粒度のモジュール

KitJs ツール モジュールでは、すべてのコードがクラス プロトタイプに基づいて拡張され、インスタンス化されたグローバル オブジェクトが開発者に提供されます。すべてのクラス名は大文字で、すべてのインスタンス オブジェクトは最初の文字が小文字で始まります。 $ 文字を使用すると、他のクラス ライブラリと簡単に区別できます。同時に、ツールモジュールでは、すべてのメソッドが Kissy と同じ関数型プログラミング形式で記述されており、同時に、jQuery での開発に慣れている学生向けに、suger.js をロードするキットが提供されます。 jQuery を使用するのと同じように使用できます。メソッド名と使用方法は jQuery とまったく同じです。

コードをコピーします コードは次のとおりです:

$kit.$(関数($) {
$('.item', $('#gallery')).each(function() {
$(this).css({
トップ : $kit.math.rand($('#gallery').innerHeight()) 'px',
左: $kit.math.rand($('#gallery').innerWidth()) 'px',
'-webkit-transform' : 'rotate(' $kit.math.rand(-40, 40) 'deg)'
});
}).pushStack('a.kitLightBox').each(function() {
new $kit.ui.LightBox({
エル：これ
}).init();
});
});

$kit.$ は、kitjs の dom Ready イベントです。パラメータ匿名メソッドのパラメータ $ は、内部クロージャに $kit.$ メソッドを渡すため、内部クロージャで $kit の代わりに $ を直接使用できます。 .$ (jQuery の $ セレクターに相当) なので、クロージャー内のすべてのコードは jQuery と同じになります。また、JQuery コードと KitJs コードの相互移植も容易になります。

この記事は、KITJS フレームワークの使用ガイド シリーズの最初のものであり、kitjs について簡単に紹介するだけです。この優れたフロントエンド UI フレームワークについては、後ほど詳しく説明します。