15

想知道这里是否有人可以对使用RightJS库的优缺点提供任何见解，特别是与 jQuery 相比，并且通常与您认为库应该提供的相比。

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

像：

  • 使用起来感觉自然，还是感觉像是一场艰苦的战斗？
  • API 是否以易于理解的方式表达自己，或者您是否发现自己想知道您 3 周前编写的代码是什么意思？
  • 您是否发现自己希望它具有 jQuery 的某些功能（或一般的某些功能），或者相反，您是否喜欢其他库没有的某些特定功能？
  • 您认为使 RightJS 优越/劣等的一般哲学考虑。

不是这样的：

  • Mindshare/marketshare/plugins/CDN/注意事项（胜者明显）
  • 你为什么要打扰......（无意义）
  • jQuery 有 x、y 和 z，而 RightJS 没有，没有深入了解它如何影响日常使用（可能有哲学上的原因使 x、y 和 z 变得不必要）
4

4 回答 4

14

基于文档、代码示例以及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)

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

<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);
});
于 2010-08-29T21:00:49.473 回答
10

大家好，Nikolay，RightJS 的作者在这里。

感谢 Anurag，他很好地描述了 RightJS。不过还有一些注意事项。

您实际上已经可以按照您的描述混合 String#on 和按名称调用

"div.boo".on('click', 'toggleClass', 'marked');

然后在 RightJS2 中，它将在明天发布 RC2，您将能够执行以下操作

"div.boo".onClick('toggleClass');
"div.boo".observes('click'); // true
"div.boo".stopObserving('click');

而且您还可以将任何自定义事件与这些事件一起使用，就像那样

"div.boo".on('something', 'addClass', 'something-happened');

RightJS2 气泡中的自定义事件，有目标和你需要的一切。

然后关于 dom 包装器和Calendar，是的，元素和小部件将位于 dom-wrappers 的同一层次结构中，您将能够像那样折腾它们

$(document.body).insert(new Calednar(...));

您还可以通过直接访问原始 dom 对象在 dom 级别上操作它们，就像这样

var calendar = new Calendar();
document.body.appendChild(calendar._);

顺便说一句：帕特里克。如果你有任何机会使用 Rails，你还应该查看 right-rails 插件，在 JavaScript 和 Rails 集成方面有很多非常好的东西。

然后，如果您询问与 RightJS 一起工作的真实感受，我会说这取决于。RightJS 是为过去使用类和对象的服务器端人员构建的，有很多东西可以用于快速和敏捷的开发来以简单的方式解决简单的问题，但要充分利用它，您需要在对象中思考。如果你碰巧也有使用 Prototype 或 Ruby 的经验，那么大部分内容应该都非常熟悉，我尝试尽可能多地重用方法名称。

如果你只知道 jQuery，有些事情从一开始可能看起来有点奇怪，但我看到有几个人很高兴地从 jQuery 迁移过来。所以我想你会没事的。

至于代码的可读性，恕我直言，它绝对是踢屁股。可读性是 RightJS 开发的主要关注点之一，您可以像阅读普通英语一样阅读大部分代码

"div.zing".on('click', 'toggleClass', 'marked');
$('my-element').update('with some text').highlight();
$$('li').each('onClick', 'toggleClass', 'marked');

等等。检查这个页面，如果你还没有http://rightjs.org/philosophy

这是关于它的。询问您是否还有其他问题。

于 2010-08-30T16:12:17.700 回答
5

我是 RightJS 转换者。我对这种哲学印象深刻，他似乎承认 DOM 元素只是数据，而 jQuery 似乎将其整个身份建立在 DOM 之上。

我在日常工作中使用 jQuery，但发现自己需要将它与 underscore.js 结合使用来做一些很好的函数式编程事情。在 RightJS 中，您会获得许多不错的 FP 好东西，它们可用作原生对象的方法。

这是一个小比较，展示了相同的方法如何在正确的 js 中处理普通数组和 dom 集合：

一些html：

<ul id="test">
    <li data-id="one">one</li>
    <li data-id="two">two</li>
    <li data-id="three">three</li>
</ul>

数组：

var test = [{"data-id":"one"},{"data-id":"two"},{"data-id":"three"}];

过滤html，非常相似：

//jQuery:
var filtered = $("#test li").filter(function(element) {
    return $(element).attr("data-id") == "one";
});

//RightJS
var filtered = $$('#test li').filter(function(element) {
    return element.get("data-id") == "one";
});

过滤数组：

//you can't do this with jquery because it is DOM-specific.
//you need something like underscore:

//underscore:
var filtered = _.select(test, function(element) {
    return element["data-id"] == "one";
});

//RightJS << uses the same .filter() method as used on the html!
var filtered = test.filter(function(element) {
    return element["data-id"] == "one";
});

在 RightJS 中，我希望看到下划线具有的一些附加内容，例如 .range() 以及以“FP”或“OOP”样式编写的选项，因此我可以专门使用 RightJS。猜猜我最好贡献:)

话虽如此，据我了解，如今 jQuery 的重点是移动兼容性。如果这是一个主要问题，那么最好还是使用 jQuery。

于 2010-09-19T20:33:50.527 回答
0

我认为这是从prototypeJS以自然方式进行更改的最佳选择。非常相似。

@Nikolay 你是prototypeJS 用户吗？

于 2011-12-01T16:22:07.703 回答