Библиотека javascript RightJS в повседневном использовании

Ответ 1

На основе документации, образцов кода и того, что уже работает в RightJS 2, я очень впечатлен.

@Patrick - Спасибо, что указали функцию Call By Name в RightJS, которая кажется чрезвычайно полезной для удаления большинства анонимных функций со всей страницы, Для тех, кто не знаком с этим, идея заключается в том, чтобы указать имя метода и аргументы как параметры вместо создания анонимного обратного вызова. Например, если мы пытаемся отфильтровать все слова и фразы, начинающиеся с "hello" из массива,

var words = ['stack', 'hello world', 'overflow', 'hello there'];

Используя метод фильтрации на массивах, мы будем писать:

words.filter(function(word) {
    return word.indexOf('hello') === 0;
});

Мы можем написать то же самое, используя Call By Name в RightJS as,

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

Я взял слайды из презентации под названием Обзор библиотеки 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);
});

Ответ 2

Привет, ребята, Николай, автор RightJS.

Благодаря Анурагу он довольно хорошо описал RightJS. И пару нот.

На самом деле вы уже можете смешивать строку String и звонить по имени так же, как описано

"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

Это о нем. Спросите, есть ли у вас еще вопросы.

Ответ 3

Я конвертер RightJS. Я впечатлен философией, он, кажется, признает, что элементы DOM - это просто данные, где jQuery, кажется, основывает всю свою идентичность на DOM.

Я использую jQuery в своем dayjob, но мне нужно использовать его в сочетании с underscore.js, чтобы делать приятные функциональные функции программирования. В RightJS вы получаете много приятных фишек FP, доступных как методы для собственных объектов.

Вот небольшое сравнение, показывающее, как один и тот же метод работает на простых массивах и dom-коллекциях в правом js:

Некоторые 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" или "ООП", поэтому я могу использовать RightJS исключительно. Думаю, мне лучше внести свой вклад:)

Сказав это, как я понимаю, большой упор в jQuery в наши дни - мобильная совместимость. Если это является серьезной проблемой, все же лучше всего пойти с jQuery.

Ответ 4

Я думаю, что это лучший возможный вариант естественным образом изменить от prototypeJS. Очень симпатично.

@Nikolay, вы были прототипом JS-пользователя?