RightJS javascript库日常使用[关闭]

基于文档、代码示例和正在进行的工作 RightJS 2 ,我印象深刻。

@帕特里克-谢谢你指出 Call By Name RightJS中的一个特性,对于从整个页面中删除大多数匿名函数似乎非常有用。对于那些不熟悉它的人,我们的想法是将方法名和参数指定为参数,而不是创建匿名回调。例如,如果我们试图从数组中筛选所有以“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');

rightjs2让我兴奋的是能够将小部件用作本机元素。

var calendar = new Calendar();

calendar instanceof Calendar; // true
calendar instanceof Element; // true

_

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

我从一个名为 JavaScript Library Overview 并比较了jQuery和RightJS的代码示例。这些示例主要比较两个框架的基本语法,虽然RightJS的用法似乎更灵活,但这两个框架的基本语法更相似而不是不同。

DOM遍历

jQuery查询

$('div > p:nth-child(odd)')

右JS

$$('div > p:nth-child(odd)')

DOM修改

$('#list').append('<li>An Item</li>')

右JS

$('list').insert('<li>An Item</li>')

jQuery查询

$('div').click(function() {
    alert('div clicked')'
});

$$('div').onClick(function() {
    alert('div clicked');
});

AJAX

$.get('test.html', function(html) {
    $('#results').html(html);
});

或

$('#results').load('test.html');

右JS

Xhr.load('test.html', {
    onSuccess: function(request) {
        $('#results').html(request.text);
    }
}).send();

或

$('results').load('test.html');

动画

jQuery查询

$('#menu').animate({ opacity: 1 }, 600);

$('menu').morph({ opacity: 1 }, { duration: 600 });

数组遍历

jQuery查询

$.each(myArray, function(index, element) {
    console.log(element);
});

右JS

myArray.each(function(element) {
    console.log(element);
});

嘿,伙计们,尼古拉,RightJS的作者在这里。

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

然后在正确的js2中,即将于明天发布RC2,您将能够执行以下操作

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

您还可以使用任何自定义事件,就像这样

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

然后是dom包装器和 Calendar ,是的,元素和小部件将位于dom包装器的同一层次结构中,您将能够像这样将它们丢弃

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

您还可以使用对原始dom对象的直接访问在dom级别对它们进行操作,就像这样

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

顺便说一句:帕特里克。如果您碰巧使用了Rails,您还应该检查一下正确的Rails插件,JavaScript和Rails集成有很多非常好的地方。

如果你问起与RightJS合作的真实感受,我会说这要看情况而定。RightJS是为那些习惯于使用类和对象的服务器端人员而构建的,对于快速和敏捷的开发来说,有很多东西可以用简单的方法来解决简单的问题,但是要想充分利用它,你需要考虑对象。如果您碰巧也有使用Prototype或Ruby的经验,那么大多数事情应该非常熟悉,我尝试尽可能多地重用方法名。

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

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

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

就是这样。如果你还有什么问题,就问吧。

我在日常工作中使用jQuery,但发现自己需要将它与下划线.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"}];

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

话虽如此,据我所知,jQuery现在的重点是移动兼容性。如果这是一个主要问题,那么最好还是使用jQuery。

@Nikolay你是prototypeJS用户吗?