UIライブラリとして、私は誰もが私のキットのコアを学び、私のAPIを覚えさせるつもりはありません。この種のフォローアップ学習方法には、まったく意味がありません。今日、JQueryは人気があり、誰もがJQを学び、明日のSeajsが人気を博し、誰もがSeajsを歌います。したがって、KITJSでは、JQ APIを完全にシミュレートするJQユーザー向けに特別に調製しました。実装に加えて、インターフェイスは同じです。これは、誰もがキットコンポーネントを直接変換するのにも便利です。もちろん、純粋に技術的なファンとして、イデオロギーに使用するよりもテクノロジーがどのように実装されているかを詳細に理解する方がはるかに興味深いです。もちろん、KPIの考慮事項やKPIを完了するためのボスのプロジェクトボーナスについて、キットコンポーネントコードを直接盗用する場合、そのような動作は気にしません。あなたが水を飲んで、井戸を掘ることを忘れずに、同僚と一緒に水を吹くときにキティを宣伝することができる限り、私はあなたにとても感謝しています。同時に、キットも非常に若いライブラリです。継続的な開発により、いくつかのバグとブラウザの互換性の問題がありますが、これは避けられません。私は一人で、エネルギーが限られています。フロントエンドでのこの戦争の時代には、より志を同じくする友人が彼を大きくし、一緒に進歩することを歓迎します。
同時に、KITJSダイアログコンポーネントが本日リリースされ、デモアドレスはhttp://xueduany.github.com/kitjs/kitjs/demo/dialog/demo.htmlです。
(i)キットディレクトリ形式
トピックに戻ると、kitjsでは、kit.jsはコアコアファイルの存在です。最も一般的に使用されるDOMとオブジェクト、継承された操作、string.js、math.jsなどのバッチが含まれています。同じレベルのディレクトリの機能部門に従って拡張されます。各独立したJSファイルには、クラスコンストラクターとグローバルオブジェクトのインスタンスが含まれています。
kit.jsを例にとると、$ kitクラスと$ kitインスタンス$ kitが含まれます($から始めることは、一般的に使用される変数との競合を回避するためです)。
他のすべてのタイプは、$ kit.mathクラスと$ kit.mathインスタンスを含むMath.jsなど、$ kitおよび$ kitインスタンスインスタンスにリンク方法で吊り下げられているため、グローバル範囲には2つの汚染物質しかありません。同時に、kit.jsでは、$ kit.uiと呼ばれる名前空間を定義します。物理ディレクトリでは、kit.jsと同じレベルのウィジェットディレクトリを使用し、複数の初期文字を持つディレクトリが連続して配置されます。
ウィジェットディレクトリの下のすべてのディレクトリは、KITJSコンポーネントディレクトリです。各独立したJSファイルには、独立したコンポーネント用のクラスコンストラクターのみが含まれています(非インスタンス)。また、CommonJSのモジュールモードと互換性があります(CommonJSおよびAMD変換のモジュール/1.1仕様に準拠することができます。特定の変換方法については、後で詳しく説明します)
(ii)キットコンポーネントのデフォルトのコードテンプレート、注釈はJSDOC仕様に準拠しています
ダイアログコンポーネントを例として、各コンポーネントは次のものに似ています
まず第一に、JSDOCのコメント、@Class宣言とは@Require XXX.js、どのコンポーネントが依存していると宣言されているか
(iii)コンストラクターと初期化方法
各クラスは、標準関数(config){}方法でコンストラクターを定義します。ここで、各KITJSコンポーネントのコンストラクターは、パーソナライズされた構成の入力としてデフォルトで構成パラメーターを留保することに注意する必要があります。
同時に、クラスコンストラクターには、KITJSコンポーネントのデフォルト構成を保存するために使用される静的メンバー、DefaultConfigオブジェクトがあります
KITJSコンポーネントを使用する場合、最初に行う必要があるのは、新しいインスタンスを介して新しいインスタンスオブジェクトを初期化することです。これは、JSコンポーネントオブジェクトを初期化するためだけです。まだHTMLはありません。 initメソッドを実行し、HTMLを作成し、それをdocに追加する必要があります。これは、魂に肉と血を注ぐのと同等です ^_ ^。
一部の学生は、INITメソッドをコンストラクターに直接配置して個別にリリースしてみませんか?
1.親クラスは、継承中にインスタンス化する必要があるためです。子クラスが親クラスから継承すると、子クラスのプロトタイプオブジェクトが親クラスの新しいインスタンスに設定されます。 initの初期化方法がコンストラクターに配置されている場合、親クラスのHTMLが直接実行され、ゴミコードが生成されます。
2怠zyなロードのため、HTMLコードは、初期化が初期化されたときではなく、適切なタイミングで実行する必要があります
したがって、KITJSコンポーネントを使用するデフォルトの方法は次のとおりです
インスタンス化後、initメソッドを実行します(initメソッドは、戻りコード7で現在のコンポーネントオブジェクトを返します)
上記の図に示すように、ダイアログ内のすべてのAPIメソッドはプロトタイプに掛けられ、プロトタイプ拡張を介してインスタンスオブジェクトに継承して渡されます。
$ kit.ui.dialog.yesornoコンポーネントのコンストラクターコードを観察します。
(iv)kitjsの継承
彼は、$ kit.inheritメソッドを使用して、$ kit.ui.dialogオブジェクトとの相続関係を宣言しました。ここでは、尋ねたいクラスメートがいるでしょう。なぜ彼はそれを直接外に書くのではなく、コンストラクターにそれを継承すべきなのでしょうか?
その理由は次のとおりです。
1.KITJSは、プロトタイプベースの相続関係です
2。KITJSコンポーネントを使用するには、コンポーネントオブジェクトをインスタンス化する必要があります。各コンポーネントは、新しいインスタンスを通じてコンストラクターを通じて作成されます。
そのため、コードコンストラクターに継承関係の実行を行い、新しいコンポーネントをインスタンス化すると、現在のコンポーネントのコンストラクターの継承方法に従って、親クラスのメンバーと方法を段階的に継承します。
子クラスが親クラスの方法を変更する必要がある場合、親クラスの継承方法をオーバーライドするために、子クラスのプロトタイプで同じ名前のメソッドを定義する必要があります。
命名に関しては、kitjsが続き、サブクラスは上記の図に示すように、親クラス名を名前空間として継続し、チェーンを保持します。
KITJS継承の実装も非常に簡単です
親クラスオブジェクトをインスタンス化し、親クラスインスタンスのすべてのメンバーをサブクラスプロトタイプにコピーし、サブクラスプロトタイプコンストラクターをサブクラスコンストラクターとしてリセットし、サブクラスコンストラクターにリンクを掛けて親クラスを指します。 $ kit.inheritメソッドを介して、subclass $ kit.ui.dialog.yesornoのインスタンス化プロセスでは、親クラス$ kit.ui.dialogのすべてのメンバーを継承し、静的言語に似た継承を実現できます。
(v)構成パラメーター、HTMLおよびCSSのカップリング分解/皮膚除去?
キットコンポーネントコンストラクターは、マップタイプのパラメーターを渡すことに慣れており、常にコンポーネントをパーソナライズします。キットコンポーネントが初期化されると、ユーザーが送信されたConfigパラメーターを使用してデフォルトのDefaultConfigを自動的に上書きし、初期化を開始します。
任意のコンポーネントについては、HTML構造の変更とCSSスタイルの変化を取り除くことは不可能です
キットは、このカップリングを構成パラメーター構成に分解します。
まず、HTMLテンプレートテクノロジーを使用します。 $ kit.newhtmlメソッドを使用してHTML文字列を直接ルート化し、HTML DOMを生成し、ドキュメントストリームを挿入するキットの支持者キットを支持します。
そのため、コンポーネントの近似HTMLコンテンツを抽出し、HTML文字列テンプレートにカプセル化し、コンポーネントのDefaultConfigに保存します。ユーザーがHTMLテンプレートを変更する必要がある場合は、初期化時にカスタム構成を使用し、デフォルトのデフォルトConfigのテンプレートフィールドをオーバーライドします。
HTMLテンプレートとCSSの結合と分解では、KitはJSテンプレートを使用してクラス名を分解するためのトリックを使用します。
$ kit.tpl in the initメソッドで$ {xxx}の形式で構成のHTMLを置き換えます
同時に、すべてのスタイルはCSSで設定されます。
スイッチを切り替える必要があるスキンの複数のセットがある場合、初期化中に$ {cls}に対応する実際のクラス名を指定して、皮膚の交換の効果を実現することにより、テンプレートのクラス名を変更することを選択できます。
(vi)概要
基本的に、$ kit.ui.dialog.yesornoコンポーネントのコード分析を通じて、kitjsのコンポーネント実装構造を大まかに理解しています。実際、ページコンポーネントを設計することは難しくありませんが、さまざまな要件に適応できるページコンポーネントを設計し、さまざまな機会に迅速に変形して開発に適応できます。キットはHTMLテンプレートとCSSを分割し、構成パラメーターとDefaultConfigをカスタマイズし、サブクラスは継承を通じて親クラスのプロパティと方法を取得し、同時に、さまざまなビジネスニーズに応じて関連するコードを参照します。
KITJSには、基本的なライブラリとUIライブラリが含まれています。
基本ライブラリ:セレクター関数、DOM操作機能、アニメーション関数、DOMイベントの強化、ハッシュツリーデータ構造の増加、IO機能、ローカルストレージ機能、マルチスレッド、範囲など。
jQuery操作形式をシミュレートするsuger.jsもあります
UIライブラリには、拡張フォーム要素、ポップアップレイヤー、メディアプレーヤー、検証フレームワーク、滝の流れ、リンケージ、スライドショー、カレンダー、アップロードコンポーネント、テンプレートエンジンなどが含まれます。