JSアプリケーション開発の事前学習(mootools)_javascriptスキル

3 つの小さなデモを作成しました。当初は Gmail に似たインターフェイスを作成したかったのですが、マシンに Office がないことに突然気づき、単純に PPT プレゼンテーションに似たガジェットを作成しました。

JS ベースのアプリケーション開発の要点は次のように要約されます。

カプセル化の粒度
共通の関数は再利用可能なコンポーネントにカプセル化されます。コンポーネントのカプセル化の粒度は合理的に選択する必要があります。粒度が大きすぎると再利用が難しくなり、粒度が小さすぎると利益が損失を上回ります。

コード構造の計画
従来のソフトウェア開発のアイデアを吸収し、関数に従ってコードを異なるブロックに分割します: 初期化、イベント バインディング、イベント ロジック処理、外部コールバック呼び出し

Js オブジェクト指向
簡単にするために、コンストラクター (実際には通常の関数) プロトタイプ定義を使用できます。あまり洗練されていませんが、これはより直接的な解決策です。 Mootools クラス ライブラリは、jQuery と比較して、個人的にはより使いやすいです。もちろん、独自のクラス宣言メソッドを使用して独自のクラスを作成することもできます。 >

コードをコピー コードは次のとおりです。

Meta.Controls.Pager = new Class({
実装: [イベント、オプション]、
オプション: {
pageIndex :1, // 1 から始まる現在のページ番号
size : 10, // 各ページに表示されるレコードの数
maxButtons : 5,/ / 表示されるページング ボタンの数
showPageSize:true, // ページング サイズのオプションを表示します。
sizeArray:[10, 25]
},
initialize: function (A) {
this.setOptions(A);
this.pageIndex = this.options.size;
this.maxButtons = this.options.maxButtons;
this.itemCount = 0;
this.pageCount =0;
},
...
}


この方法も良い選択です。コードの論理構造 一目で明確

単体テスト
ブラウザ上での JS アプリケーションの単体テストは、主に DOM と密接に関連しているため、難しいと一般的に考えられていますが、完全に不可能というわけではありません。たとえば、Google の Closure は、Mock オブジェクトを使用して Dom 要素をシミュレートし、コード ロジックと Dom オブジェクトの操作を分離します。
興味がある場合は、次のコードを参照してください。 🎜>ダウンロード
。