jQuery UI1.5→1.6での変更点(1.6RC2時点)

JavaScript jQuery jQueryUI

Download Builder | jQuery UIで1.6RC2をダウンロードできる。
以下変更点

widget pluginが5つ追加された

興味のある人は落としてきてデモを触ってみるとよいかと。
以下簡単なせつめー

  • ui.autocomplete.js
    • オートコンプリート
  • ui.colorpicker.js
    • グラデーションしてるのをクリックしたりドラッグしたりして色を選択する奴
  • ui.magnifier.js
    • 並んでるアイコンにマウスオーバーするとなだらかに拡大する奴。要はMacの下のアレみたいの。
  • ui.progressbar.js
  • ui.spinner.js
    • 数字の横に▲と▼があってクリックすると数値が増減する奴

widget plugin実装時にprivateなメソッドを実装できるようになった(UI Coreの変更点)

1.5の場合

例えばUI Dialogは1.5.2では以下のように実装されている。

// 前略
$.widget("ui.dialog", {// 30行目
	init: function() {
// 中略
	},// 157行目
	
	setData: function(key, value){
// 中略
	},// 187行目
	
	position: function(pos) {
// 中略
	},// 238行目

	size: function() {
// 中略
	},// 248行目
	
	open: function() {
// 中略
		this.position(this.options.position);// 255行目
// 中略
	},// 269行目
});// 332行目(30行目のカッコの閉じ)
// 後略

$.widget関数の第一引数に「名前空間.メソッド名」、第二引数に使いたいメソッドを定義したオブジェクトを渡している。
この場合第一引数が「ui.dialog」なので$(someExpression).dialog();でUI Dialogの機能を使用できる。
第二引数で渡したオブジェクトのメソッドはどのように使われるかというと、

  • initメソッド
    • 初期化処理
    • $(someExpression).dialog();もしくは$(someExpression).dialog(options);で呼び出したときに実行。
  • その他メソッド
    • 初期化後に$(someExpression).dialog(メソッド名);で呼び出し可能。例：$(someExpression).dialog('open');
    • 他メソッド内でメソッドとして呼ばれる。例：上記コード255行目this.position(this.options.position);

jQuery UI1.5.2においては内部で使用するメソッドと、jQueryUI特有の方法で呼び出せるようAPIを公開したメソッドの区別がない。

1.6の場合

同じくUI Dialogは以下のように実装されている。(1.6RC2)

// 前略
$.widget("ui.dialog", {// 30行目
	_init: function() {
// 中略
	},// 161行目
	
	open: function() {
// 中略
		this._position(this.options.position);// 168行目
// 中略
	},// 289行目
	
	_position: function(pos) {
// 中略
});// 396行目(30行目のカッコの閉じ)
// 後略

ぱっと目に付く変更点は

  • 初期化メソッドがinit→_initになっている
  • 他にも_のprefixが付いたメソッドがある(_position)

_positionも「他メソッド内でメソッドとして呼ばれる」という点では1.5のpositionと変わらない。

_positionメソッドは内部でしか使用できない。

1.5のpositionメソッドはおそらく内部でのみ使用するものとして書かれたものだが、
他のメソッドと同じように呼び出すことができる。
例えば、
$('.ui-dialog-content').dialog('position','top');
などとやってやれば、Dialogを画面の一番上に移動することが出来る。
一方1.6では以下のどちらを実行してもピクリともしないのだ。
$('.ui-dialog-content').dialog('position','top');
$('.ui-dialog-content').dialog('_position','top');

1.5系前提のコードの1.6移行の際の注意点

  • $('.ui-dialog-content').dialog('position','top');のように、中の人的にprivateなメソッドを外で呼んでるコードは動かなくなる。
  • 独自widget pluginを書いていた場合はinitメソッドの_initへのリネームが必要

こんなところかなー