RightJS javascript库在日常使用中

Question

想知道这里是否有人可以提供任何关于使用RightJS库的起伏的见解,特别是与jQuery相比,并且通常与您认为库应该提供的相比.

我不是在寻找功能比较的功能,而是一般的日常使用感.

像:

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

不是这样的:

• Mindshare/marketshare/plugins/CDN /考虑(赢家很明显)
• 你为什么要打扰......(模拟)
• jQuery执行x,y和z,而RightJS没有,没有提供它如何影响日常使用的洞察(可能有哲学原因使x,y和z不必要)

Answer 1

基于文档,代码示例以及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');
});

或者可以将其与Call By Name结合使用,

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

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);
});

Answer 2

嘿伙计们,RightJS的作者Nikolay就在这里.

感谢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-object来在dom级别上操作它们,就像那样

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

顺便说一句:Patrick.如果您有任何机会使用Rails,您还应该查看right-rails插件,JavaScript和Rails集成上有很多非常好的东西.

然后,如果你问与RightJS合作的真实感觉,我会说这取决于.RightJS是为曾经使用类和对象的服务器端人员构建的,有很多东西可以快速灵活地开发,以简单的方式解决简单的问题,但是为了充分利用它,你需要在对象中思考.如果您也碰巧有使用Prototype或Ruby的经验,那么大多数事情都应该非常熟悉,我试图重用尽可能多的方法名称.

如果你所知道的只是jQuery,从一开始有些事情可能看起来有点奇怪,但我看到几个人乐意从jQuery迁移.所以我想你会没事的.

至于代码可读性,imho它绝对踢屁股.可读性是RightJS开发中的主要问题之一,您可以像普通英语一样阅读大部分代码

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

一个人.如果您还没有http://rightjs.org/philosophy,请查看此页面

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

Answer 3

我是RightJS转换.我对这个哲学印象深刻,他似乎承认DOM元素只是数据,jQuery似乎将其整个身份基于DOM.

我在我的dayjob中使用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一起使用.