“dart:html”和“dart:dom”包有什么区别？

Question

我开始学习一些Dart的例子。然后，我想像这里描述的那样用document.query('#someId')查询DOM, 但是document中似乎没有query方法。同时，通过`new Element.tag('p')创建一个新元素也不起作用。

后来我发现，当我把导入的包从dart:dom改成dart:html时，它将会起作用。但是使用两者会给我带来一堆`duplicate definition of _XYZ`的问题。

所以我想知道：

1. dart:html和dart:dom包有什么区别
2. 应该使用哪个
3. 为什么不能同时使用

- Andreas Köberle

Answer 1

有点乱序的回答

1. 应该使用哪个: 你应该使用 dart:html，它提供了最干净的DOM抽象。

2. 为什么不能同时使用: 严格来说不需要，但是你可以通过一种肮脏的方法从dart:html访问底层的dart:dom实现，具体方法在这里描述。更好和更清晰的解决方案是使用Dart重命名导入的能力，即#import('dart:dom', prefix: 'dom');，如下所述：@munificent。

3. dart:html和dart:dom包之间有什么区别。我倾向于认为它们之间的区别类似于JQuery（dart:html）与JS DOM操纵（dart:dom）之间的区别。

Dart团队正在努力使dart:html API易于使用和令人惊喜（以好的方式），就像我们已经习惯的库（如JQuery（DOM操纵），Tree.js（WebGL编程）和D3（SVG图形绘制））。此外，他们也尝试在所有这些功能领域遵循一个API样式，以便SVG或WebGL API使用类似于DOM API的结构，从而确保所有部分相互协调。

更新: 从2012年5月开始，dart:dom已弃用并将被删除。

- Lars Tackmann

Answer 2

Lars已经很好地回答了你的问题。我只想补充一点：

为什么我不能同时使用两个库

实际上，你是可以的。问题在于这两个库对某些东西（主要是window）使用了相同的名称。当你导入它们时，这些名称会发生冲突，而Dart不允许这种情况。为了解决这个问题，你可以给其中一个库添加前缀来导入:

#import('dart:html');
#import('dart:dom', prefix: 'dom');

那么，当你引用从 dart:html 导入的名称时，只需使用该名称。当你需要一个 DOM 名称时，你需要在名称前加上前缀：

window     // dart:html window
dom.window // dart:dom window

- munificent

Answer 3

所有答案的更新，可能使这个问题不再适用的是dart:dom已被弃用。

请参见dartlang网站上的此帖子。

- Chris Buckett

Answer 4

补充之前优秀回答的简短答案：尽可能使用dart:html。必要时使用dart:dom（如果必须使用，请输入错误报告）。

- dma