Loading
Dojo
piroto
Apr 26, 2012
Download
Map Outline
Dojo
概念
Base
Dojo Toolkit の中核
基本機能一式
DOMへのクエリ
DOM操作
クロスブラウザAjax
イベント処理
データAPI
など
Core
Baseに含まれていない関数
一般にBaseに含まれるものほど多用されない
高度なアニメーション
ドラッグ・アンド・ドロップ
I/O
データ管理
国際化対応など
Dijit
Dojo Toolkit の最も際立った特色の一つ
コンポーネントライブラリ
レイアウト
メニュー
ツリー
ダイアログ
フォーム
強力なUIを最小限の手間と作業で作成
JavaScriptコンポーネントを宣言型で作成可能
利用方法
1.JavaScript によるプログラムで使用
2.HTML要素に dojyoType 属性を指定
DojoX
Base および Dijit に含まれない機能
コミュニティ主導の実験的拡張ライブラリ
基本
ユーティリティ関数
dojo.byId
document.getElementByIdの別名
dojo.query
CSS3のセレクタを引数にとりオブジェクトを返す
dojo.create
新規要素を作成
dojo.body
<body>への参照を返す
dojo.empty
DOM要素の中身を空に
dojo.destroy
ノードと子要素を一緒に除去
dojo.place
要素を文書の任意の場所に配置
配列とNodeList
ヘルパー関数により拡張された配列があり、NodeListと呼ぶ
dojo.query の戻り値はNodeList
NodeListで利用できる関数
dojo.forEach
dojo.forEach(dojo.query(".hoge"),function(item,i){})
dojo.indexOf
特定の値が配列内のどの位置にあるかを調べる
dojo.indexOf(list,"hoge);
dojo.filter
別の配列をフィルタして、新しい配列をつくる
dojo.map
既存の配列を変更して新しい配列をつくる
dojo.some
指定された基準を満たす要素が1つ以上含まれているか
dojo.every
すべての要素が指定された基準を満たすか
イベント処理
イベントトリガー時に呼ぶ関数をアタッチできる様にクロスブラウザのイベント処理
dojo.connect
トピックのパブリッシュとサブスクライブ
Dojoコンポーネントは互いの存在を意識せずとも相互に対話できる
dojo.subscribe
dojo.publish
dojo.xhr*によるAjaxの実現
xhrGet
xhrPost
xhrPut
xhrDelete
引数
url
handleAs
form
content
オブジェクト指向
プロトタイプベースのOOP
必要に応じてオブジェクトを宣言
継承が必要な場合、プロトタイプオブジェクトの機能を単純に複製
オブジェクトプロトタイプを実行時に変更できる
クラスベースのOOPをシミュレートした機能を提供
dojo.declare
クラスを作成
dojo.declare("Car",null,{});
引数
1.クラス名
2.スーパークラス
3.プロパティ、メソッドからなるオブジェクト
パッケージ化、およびモジュール開発
Dojoクラスのパッケージ化
dojo.provide("info.typea.dojo.Car"); dojo.declare("info.typea.dojo.Car",null,{});
クラスの完全なパッケージパスを指定
dojo.require を使用してクラスをロードするときに、場所を決定するのもパッケージパス
上記例は、info/typea/dojo/Car.js に保管されるはず
ビルドシステムを使用して、パッケージ化する
クラスをそれぞれのファイルに区別するが、多数の小さなファイルをロードするとパフォーマンスに深刻な影響
1つのファイルの方がパフォーマンスは良いが、不要なコードが大量に含まれたり、バージョン管理やコード編成が複雑になってしまう
縮小化プロセス
不要なホワイトスペース、コメントの削除
ローカル変数を短縮名に変更
ローカル変数の使い方をリファクタリング
Dijit
最大の特徴は、リッチなインターフェースコンポーネントが揃っている
DoojoX拡張ライブラリには追加コンポーネントがある
基本的な使用方法法
1.HTML文書のbody要素にDojoライブラリそのものと、使用するテーマのCSSファイル、テーマへの参照を含める
2.アプリケーションに組み込むDijitコンポーネントをdojo.require 関数でロード
Dijitをインクルードするためには、基本のDojo Toolkit の他に一覧のJavaScriptファイルをインクルードする必要は無い
Dojo のロードシステムを使用して、動的にロード可能
Dojoをロードするタグに djConfig="parseOnLoad:true" 属性を追加
Dojo のHTMLパーサーを使用して、dojoType属性を持つHTML要素を検索するように指示
コンポーネントの操作
2つの方法
1.宣言型で追加
Dijitの便利な特徴の一つ
通常のHTML要素を使ってウィジェットを操作できる
2.JavaScriptwo使用
More Maps From User
Embed Code
Copy the code to embed this map into your article. The embeded map can even be zoomed in / out