SugarをjQueryと併用できるか試してみた

新顔のJavaScriptライブラリSugar.jsが話題になっていたので使ってみた。ざっと見たところ、文字列の操作や日付の扱いに便利そうなメソッドがたくさんあるみたい。

取りあえずjQueryと併用できるかためしてみる。

$("#btn1").click(function(){
	$("#ans").text( $("#str").val().at( $("#num").val() ) );
});

こういうコードを書いてみた。val()はjQueryのメソッドで、フォームに入力された内容を取得する。at()はSugarのメソッドで、文字列から指定したインデックスの文字を取得する。"foobar".at(3)とあれば、foobarの3番目の文字である“b”を取り出す。

ここでは、下に用意したフォームの左側に文字列、右側のフォームに数値を入力しcheckボタンを押すと、指定した番号の文字を下に表示するようにした。コードではval()で取得した文字列を直接at()に突っ込んでいる。

ご覧のように、特に問題なくSugarとjQueryが共存している。

では同じ名前のメソッドは？　jQueryで.has()は引数に指定した要素が存在した場合にオブジェクトを返すメソッド。Sugarで.has()は文字列の中に引数で指定した文字があれば真偽値を返す。この2つが同時に問題なく使えるかどうか。

以下のようなコードを書いてみた。リストの「子なし」をクリックするとfalseが、子ありをクリックするとtrueが表示される。

• 子なし
• 子あり
  • 子要素1
  • 子要素2

$("#test2 li").click(function(){
	var a = $(this).has("li").text().has( /要素2/g );
	$("#ans2").text(a);
});

$(this)の後にある.has()はjQueryの.has()で、.text()の後にある.has()はSugarの.has()として機能している。クリックしたliが子要素にliを持っていれば、その中身の文章をtext()で取得し、.has( /要素2/g )で取得した文章中に要素2という文字列があればtrueを返す。

ということで、同じ名前のメソッドにもかかわらず、jQueryとSugarは問題なく共存しているようだ。