Prototype.js 1.5.0_pre0

最新が 1.5.0_pre0 になってたので調査 (自分用のメモなので読みにくくてもゴメンなさいってことで)

Prototype.js 1.4.0 からの変更点

CHANGELOG より

• String.prototype.truncateを追加
• String.prototype.gsub, String.prototype.sub, String.prototype.scan を追加。
• Template クラスを追加。
• $$ 関数を追加。
• Selector クラスを追加。
• Element.childOf を追加。
• String.prototype.inspect を修正。
• String.prototype.strip を追加。

String

String.prototype.truncate

文章を短くする。

var text = 'とっても長い文章です。読むのがわずらわしいです。概要だけを捕らえたいため短くしたいと思います。';

// 元の文章を確認
alert(text.inspect());
alert(text.length);

// 短くする。('...' を含んで30文字)
alert(text.truncate().inspect());
alert(text.truncate().length);

// 短くする。('...' を含んで10文字)
alert(text.truncate(10).inspect());
alert(text.truncate(10).length);

// 短くする。('<以下略>' を含む10文字
alert(text.truncate(10, ' <以下略>').inspect());
alert(text.truncate(10, ' <以下略>').length);

String.prototype.gsub

文字列全体を置換する。

var text = '天野 山下 勝野 天野 山下 勝野';

alert(text);

var replacer1 = function(t){ return '<b>' + t + '</b>';};
var replacer2 = '<b>天野</b>';
var replacer3 = '<b>#{1}</b><b>#{2}</b>';
alert(text.gsub('天野', replacer1));
alert(text.gsub('天野', replacer2));
alert(text.gsub('(天)(.)', replacer3));

String.prototype.sub

文字列の最初にマッチする箇所を置換する。

var text = '天野 山下 勝野 天野 山下 勝野';

alert(text);

var replacer1 = function(t){ return '<b>' + t + '</b>';};
var replacer2 = '<b>天野</b>';
var replacer3 = '<b>#{1}</b><b>#{2}</b>';
alert(text.sub('天野', replacer1));
alert(text.sub('天野', replacer2));
alert(text.sub('(天)(.)', replacer3));

String.prototype.scan

文章からマッチする文字列を抽出する。

var text = '天野 山下 勝野 天野 山下 勝野';

text.scan('天.', alert);

String.prototype.strip

文章の前後のスペース (改行、タブ、スペース) を削除する。

var text = ' \n\t \n\ttext \n\t \n\ttext \n\t \n\t';

// 元の文章を確認
alert(text);
alert(text.length);

// スペースを削除
alert(text.strip());
alert(text.strip().length);

$$

CSS ライクのセレクタで要素を選択する。

Event.observe(window, 'load', function() {

	//	CSS ライクなセレクタを指定する(複数可)。
	var elements = $$('div.class1 div.class2', '#id .class3');

	for(var i = 0, len = elements.length; i < len; i ++) {
		alert(elements[i]);
	}

});

Selector

CSS ライクのセレクタ(ひとつのトークン)で要素を選択する。

Event.observe(window, 'load', function() {

	//	CSS ライクなセレクタを指定する(ひとつのトークンだけ)。
	var selector = new Selector('div.class1.class2');

	//	selector にスコープとなる要素を指定する。(省略時はスコープを document とする。)
	var elements = selector.findElements(document.body);

	for(var i = 0, len = elements.length; i < len; i ++) {
		alert(elements[i]);
	}

});

Template

簡易テンプレートエンジン

var template1 = new Template('僕の名前は#{name}です。趣味は#{hobby}です。\\#{gufufu}');

var message1 = template1.evaluate({
	name: '天野',
	hobby: '勉強'
});

var message2 = template1.evaluate({
	name: '山下',
	hobby: '遊ぶこと'
});

alert(message1);
alert(message2);

var template2 = new Template('僕の名前は*nameです。趣味は*hobbyです。\\*gufufu', /(^|.|\r|\n)(\*([a-zA-Z_]+))/);

var message3 = template2.evaluate({
	name: '勝野',
	hobby: 'バンド'
});

var message4 = template2.evaluate({
	name: '龍之介',
	hobby: '女と遊ぶこと'
});

alert(message3);
alert(message4);

Element

Element.childOf

要素がある要素の子孫に当たるかを調べる。

Event.observe(window, 'load', function() {

	//	要素の ID を指定する。
	var result = Element.childOf('element_id', 'parent_id');
	alert(result);

	var element = $('element_id');
	var parent  = $('parent_id');

	//	要素のオブジェクトを指定する。
	result = Element.childOf(element, parent);
	alert(result);

});