代码之家 › 专栏 › 技术社区 › Stefano Borini

jquery与雅虎用户界面API设计[关闭]

yui jquery javascript

Stefano Borini · 技术社区 · 16 年前

我对jquery和雅虎用户界面API在设计上的差异感到困惑。免责声明:我非常不喜欢jquery api,但我对web编程和一般的javascript也非常无知,所以我可能会大错特错,回到这里乞求救赎。这么久。。。

我的问题要点如下。这两种设计是不同的。jquery将dom放在中心,并通过对其执行“trigger”增强器方法来修饰dom。例子

$("#flexigrid").flexigrid()

jquery的一个要求是,在某些情况下,您必须事先遵循一个非常特定的HTML常规结构。例子:

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

然后

$("#accordion").accordion();

此外,返回的实体通常不提供任何机制来通过方便的编程方法隐藏DOM。要操作jquery实体,您必须通过选择器访问DOM,在某些情况下,访问那些不保证容易知道的内容,比如内部生成的ID。假设你想以编程方式交换手风琴,你所做的就是

$('#accordion').accordion('option', 'active', 2);

而不是更直观的

myAccordion.setActiveTab(2);

另一方面,雅虎用户界面将重点放在javascript对象上,通过dom节点选择器(例如 myDataTable = new YAHOO.widget.DataTable("container_id") )然后通过对象方法执行所有操作。要添加新行吗?呼叫 myDataTable.addRow() . DOM被隐藏。你不关心幕后发生了什么。

现在,我在Trolltech Qt的经验很好地映射到了雅虎用户界面。清除小部件对象定义的API,最终可以通过继承自由地重新实现它们的一部分,不透明的呈现,除非您想打开盒子并弄脏您的手。Qt是一个成功的API,工作得很好,很容易使用,而雅虎用户界面在设计风格上有点类似。另一方面,jquery以一种违反直觉的(对我来说)非常开放的方式工作,它的对象上有简化的API。

够大声了。关键是我认为我在这个问题上可能是完全错误的,但我想知道为什么。拥有一个类似jquery的接口有什么设计上的优势(其中dom明显暴露,你可能需要寻找jquery插件自动创建的东西,这样你就可以最终$(选择)它们并附加事件或修改它们的内容),而不是像yui那样隐藏对象和商品方法后面的所有东西?

我不是说速度,代码大小,或者输入量。我在讨论封装、关注接口和易访问性等设计概念。什么设计更好,在什么情况下,为什么?

6 回复 | 直到 13 年前

James 16 年前

我不认为你的论点是针对jquery的,但更多的是插件作者提供的API。

不幸的是,没有两个插件作者会用相同的API创建插件。编程访问的级别不受jquery本身的限制,而是受插件作者的限制。

另外,正如您所说,jquery是关于dom的——我认为这是一个好处,因为它意味着jquery不会完全混合在应用程序的“逻辑”(eh,“业务逻辑”)中……在它自己的抽象层次上是非常好的——它处理的是DOM,仅此而已!

您可以为应用程序创建无限数量的数据结构和附加API。jquery不会在这方面妨碍您。

你已经为你的问题添加了更多的细节——这个“编辑”是对这些细节的回应。

我认为,当您使用jquery到达某个阶段时,您所经历的是常见的…API不足。你不想要那个…无论是手风琴还是数据网格,您都需要一个干净的模块API。

就我个人而言不要认为一些东西应该捆绑到“jquery插件”中——这样做通常意味着牺牲API——或者不得不求助于jquery的机制,比如通过“触发器”触发psuedo事件:

var someModule = $('#contain').someCoolModule();
someModule.trigger('initiate');

我明白你所说的,我认为我同意,但我也认为让jquery在一个完全独立的层次上——忘记它——只在需要攻击DOM时使用它是很重要的。

Lilith River 16 年前

jquery不需要任何特殊的标记-您可以为任何对象编写选择器。还可以使用现有的dom引用,并将其转换为jquery对象,如:$(domObject)。实际上比雅虎用户界面更简单、更强大。

如果已经有了一个dom引用,就不需要知道dom选择器了…这可能是你误解的根源。

在处理过雅虎用户界面和jquery之后,让我告诉你它们都是很棒的库。他们有不同的角色,但都有很好的方法。

jquery是一种包装器,它简化了与dom、ajax、选择对象、进行图形相关的所有操作。它有一个非常简洁和非常简单的API,它抽象了所有浏览器兼容的废话。

jQuery使用的设计概念与大多数新手程序员所使用的设计概念截然不同。它确实是Javascript 应该使用。几年前,人们对JavaScript的强大功能一无所知。主要是因为互联网上的大多数javascript都很糟糕。现在,我认为大多数人已经意识到JavaScript是最能使用的语言之一。它支持几个范例:功能性的、命令式的、面向对象的(原型,而不是基于类的)、数据文本……

jquery充分利用了javascript的能力,利用其设计的各个方面以最有效的方式解决每个问题。

我告诉所有学习javascript的人一遍又一遍地阅读jquery源代码,直到他们理解它……这将是困难的,但他们最终将成为更好的程序员,工具箱中有更大的各种工具。

这与Java/.net洗脑垂直,这是给每个开发者一个螺丝刀(OOP),并告诉他们这是编程和生活中每个问题的完美解决方案。

但事实并非如此。每个问题都需要不同的工具。OOP是个好主意,但对于某些问题通常是个坏主意。

jquery的mixin风格的插件架构非常好。不同,但高效、快速、易用。

jquery之所以是1,是因为它使用简单,功能强大。

对于不同的问题,雅虎用户界面是一种不同的方法。它是一个UI工具箱,从DOM(与jquery的轻量级方法相比)中进行了大量抽象。如果你想做些超出常规的事情,你会发现自己在花很多时间修改它。(这是重量级方法的缺点)。

它不是开发应用程序的框架。这是一堆GUI小部件。

我两个都用过。你没有理由不能在同一个页面上同时使用jquery和yahoo-ui,它们是解决不同问题的两种不同工具。

我建议包括jquery站点/应用程序范围,然后根据需要包括jquery UI插件。如果你需要重量级的东西,添加雅虎用户界面。但请坚持使用jquery来获取管道代码…

学习jquery。了解数组编程、回调、数据文本、将代码视为数据并保持简洁的功能。对每个问题使用正确的工具意味着代码要短得多,简单得多。

Gabriel McAdams 16 年前

在我看来,Yui在DOM操作方面比较弱,但在设计方面却遥遥领先。

jquery是为那些没有或很少有javascript(或一般编码)经验的用户设计的。很容易启动和运行应用程序。

Yui的可读性更强,任何程序员都可以很快地理解它,因为它广泛使用了最佳实践方法。

user42507 16 年前

jquery是一个很好的DOM操作库,它的API以选择器为中心,这也是它今天如此流行的原因之一。问题是,如果浏览器domAPI更一致、更容易使用,就不需要jquery。我同意Robert Harvey的观点(在上面评论过),作为dom jquery上的抽象层,它的功能非常强大。

但据我所知,您不喜欢jquery插件系统和jquery用户界面,而不是核心库本身。就个人而言,我更喜欢组件和小部件的yui风格的API,因为在更高的抽象级别上,DOM元素变得不那么重要。我认为jquery ui作者选择这种设计的原因是为了使api更符合他们的主要产品jquery库。但我不同意这是个好决定。

Rob Grant 16 年前

jquery是为使用DOM而设计的(也就是说,它是一种围绕网页高度优化的语言)。
您可能需要寻找jquery插件自动创建的东西。

如果合适的话,插件会返回一个jquery对象,您可以操作它,除非它写得不好。在这种情况下,这显然是插件的错误。
如果您使用的是自动生成ID的方法,那么jquery可能不适合您。但是,例如我用过 jQuery with Google Maps 没有太多麻烦。
如果您想自动向表中添加一行,我肯定有一个插件。如果不是,它 wouldn't take much to write one .

lorefnon 14 年前

我同意计算机语言学家的观点。OOP并不是解决所有问题的完美工具。对于Web开发,首先必须决定必须设计的解决方案类型。该解决方案本质上是一个在增强交互性的地方嵌入交互式小部件的网页,还是一个完整的RIA。jquery,我认为它适合第一种情况,它的主要目标是易于处理DOM。对于RIA应用程序,最好使用更高抽象级别的工具包,因为在这种情况下,开发人员处理的是小部件和布局,而不是下面的HTML和CSS。在这种情况下,使用面向对象的工具包(如yui、dojo或extjs)更为方便,因为它们将桌面应用程序开发方法(及其相关优势)引入到Web域中。