jquery – RightJS JavaScript库日常使用

前端之家收集整理的这篇文章主要介绍了jquery – RightJS JavaScript库日常使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
想知道有没有人可以提供任何关于使用 RightJS库的起伏的洞察力,特别是与jQuery相比,通常与您认为图书馆应该提供的内容进行比较。

我不是那么寻找功能进行比较,而是一般的日常使用感。

像:

>使用感觉自然,还是感觉像一场艰苦的战斗?
> API是否以可理解的方式表达自己,或者您是否发现自己想知道3周前写的代码是什么意思?
>你发现自己希望它具有jQuery的一些功能(或一般的功能),或者反过来,您是否喜欢其他库没有的特定功能
>你认为一般哲学考虑使RightJS优越。

不是像:

> Mindshare / marketshare / plugins / CDN /注意事项(获胜者是明显的)
为什么你会打扰…(moot)
> jQuery是x,y和z,而RightJS并没有提供洞察如何影响日常使用(可能有哲学的原因使x,y和z不必要)

解决方法

根据文档,代码示例以及 RightJS 2的工作原理,我非常深刻的印象。

@Patrick – 感谢您指出RightJS中的Call By Name功能,这对于从页面删除大多数匿名函数来说非常有用。对于那些不熟悉它的人来说,想法是将方法名称和参数指定为参数,而不是创建匿名回调。例如,如果我们尝试过滤从数组开始的所有单词和开头的“hello”

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

在数组上使用过滤方法,我们会写:

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

我们可以使用RightJS中的按名称来编写相同的东西,

words.filter('startsWith','hello');

很甜呃

我也喜欢直接使用字符串作为选择器的想法。虽然RightJS目前只适用于event delegation,但我希望能够完全摆脱大多数用途的$函数,并直接在字符串上调用方法。例如,要收听页面上任何para的所有点击,请写:

'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);
});
原文链接:https://www.f2er.com/jquery/181736.html

猜你在找的jQuery相关文章