jquery - 日常使用的RightJS javascript库

Closed. This question is opinion-based。它当前不接受答案。












想改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。

4年前关闭。



Improve this question




想知道这里是否有人可以提供有关RightJS库使用过程的深入了解，特别是与jQuery相比，以及与您认为应该提供的库相比。

我不是在寻找一种功能进行功能比较，而是一般日常使用的感觉。

之类的东西:

使用起来感觉自然还是感觉像一场艰苦的战斗？

API是否以一种易于理解的方式表达自己，或者您是否想知道3周前编写的代码意味着什么？

您是否希望自己具有jQuery的某些功能(或总体上具有某些功能)，或者相反，您是否喜欢其他库所没有的某些特定功能？

您认为使RightJS优越/劣等的一般哲学考虑。

不是这样的:

Mindshare / marketshare / plugins / CDN /注意事项(获胜者显而易见)

你为什么要打扰...(模拟)

jQuery会执行x，y和z，而RightJS则不会，如果不深入了解它如何影响日常使用(可能出于哲学原因，使x，y和z不再需要)

最佳答案

基于文档，代码示例以及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目前仅针对event delegation进行此操作，但我希望能够在大多数情况下完全摆脱$函数，并直接在字符串上调用方法。例如，要收听页面上任何段的所有点击，请编写:

'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)

另一个不错的功能是仅使用声明性语法的统一初始化小部件的方式:

<input data-calendar="{format: 'US', hideOnClick: true}" />

而不是自己创建一个对象，然后将其添加到页面中:

var calendar = new Calendar({
    format: 'US',
    hideOnClick: true
});

calendar.insertTo(document.body);

我从John Resig的名为JavaScript Library Overview的演示文稿中提取了幻灯片，并将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);
});