ドキュメント、コード サンプル、およびRightJS 2の作業中のものに基づいて、私は非常に感銘を受けました。
@Patrick -ページ全体からほとんどの匿名関数を削除するのに非常に便利な RightJSのCall By Name機能を指摘してくれてありがとう。慣れていない方のために説明すると、匿名コールバックを作成する代わりに、メソッド名と引数をパラメーターとして指定するという考え方です。たとえば、配列から「hello」で始まるすべての単語とフレーズをフィルタリングしようとしている場合、
var words = ['stack', 'hello world', 'overflow', 'hello there'];
配列で filter メソッドを使用すると、次のように記述できます。
words.filter(function(word) {
return word.indexOf('hello') === 0;
});
RightJS で Call By Name を使用して同じことを書くことができます。
words.filter('startsWith', 'hello');
かなり甘いですよね？
また、文字列をセレクターとして直接使用できるというアイデアも気に入っています。現時点では、RightJS はイベントの委譲$のみを行いますが、ほとんどの目的で関数を完全に取り除き、文字列のメソッドを直接呼び出せるようにしたいと考えています。たとえば、ページ上の任意の段落のすべてのクリックを聞くには、次のように記述します。
'p'.on('click', function() {
this.addClass('clicked');
});
または、これを「名前で呼ぶ」と組み合わせて、
'p'.on('click', 'addClass', 'clicked');
RightJS 2 で私が興奮しているのは、ウィジェットをネイティブ要素として使用できることです。
var calendar = new Calendar();
calendar instanceof Calendar; // true
calendar instanceof Element; // true
ここで私の仮定を明確にしてくれた @patrick と @Nikolay に感謝します。_ウィジェットは、オブジェクトのプロパティとして使用できるネイティブ DOM 要素をラップします。
document.body.appendChild(calendar._);
または、フレームワークによって提供されるメソッドを使用します。
calendar.insertTo(document.body)
もう 1 つの優れた機能は、宣言構文のみを使用してウィジェットを初期化する統一された方法です。
<input data-calendar="{format: 'US', hideOnClick: true}" />
自分でオブジェクトを作成してページに追加する代わりに:
var calendar = new Calendar({
format: 'US',
hideOnClick: true
});
calendar.insertTo(document.body);
John Resig によるJavaScript ライブラリの概要というタイトルのプレゼンテーションからスライドを取り出し、jQuery のコード サンプルと RightJS を比較しました。これらのサンプルは、主に両方のフレームワークの基本的な構文を比較していますが、RightJS はその使用法においてより柔軟であるように見えます。
DOM トラバーサル
jQuery
$('div > p:nth-child(odd)')
RightJS
$$('div > p:nth-child(odd)')
DOM の変更
jQuery
$('#list').append('<li>An Item</li>')
RightJS
$('list').insert('<li>An Item</li>')
イベント
jQuery
$('div').click(function() {
alert('div clicked')'
});
RightJS
$$('div').onClick(function() {
alert('div clicked');
});
AJAX
jQuery
$.get('test.html', function(html) {
$('#results').html(html);
});
また
$('#results').load('test.html');
RightJS
Xhr.load('test.html', {
onSuccess: function(request) {
$('#results').html(request.text);
}
}).send();
また
$('results').load('test.html');
アニメーション
jQuery
$('#menu').animate({ opacity: 1 }, 600);
RightJS
$('menu').morph({ opacity: 1 }, { duration: 600 });
配列トラバーサル
jQuery
$.each(myArray, function(index, element) {
console.log(element);
});
RightJS
myArray.each(function(element) {
console.log(element);
});