微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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.jb51.cc/jquery/181736.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐