赵走x博客 - 开发者的网上家园

Dart语言程序设计：1、入门

资源编号:75717 Dart语言程序设计书籍热度：100

2011 年10月，Google发布了一种新的编程语言—Dart，主要目标是将其作为一种结构化的Web开发语言。Dart语言既让人感觉熟悉，又足够灵活；既适用于快速原型开发，又适用于组织大型的代码库；既可以用在桌面版和移动版的浏览器中，也可以在服务器端使用。

>下一篇文章：

# 开篇说明
>本系列文章来自书籍《Dart语言程序设计》，本人在原有书籍的基础上，进行了部分修改，不涉及商业目的，若发现侵权问题，请与作者留言联系，我会在第一时间下架。

# 第一部分 入门

Dart 有很多特点，但也许最令人印象深刻的是，它让熟悉 JavaScript 的程序员感到非常熟悉。在前面的几章中，我们从头开始，编写一个Dart应用程序。

## 第1章 项目：第一个Dart应用程序

大部分编程书籍都以一个“Hello World！”示例开始。我要说，换种方式——我们这里都是编程达人。让我们开始写代码吧！

首先因为Dart语言写起来感觉比较熟悉，所以我们在深入之前不应该走得太远。让我们直接跳到更有趣的事情上：一个带Ajax的网站。任何一个真正的达人都会收集大量的漫画书（我说的对吗？不是就我一个人这样吧，哈），那么让我们来考虑一个简单的Dart应用程序，通过REST风格的接口来操作一组漫画书。

在某种程度上，这可能有点儿太激进了。别担心，我们会在后续章节中深入细节。

### 1.1 后端部分

作为技术爱好者，我们已经在用Node.js了，所以后端需要Node.js和npm。说明包含在项目的README中。

作为REST风格，这个应用程序应该支持下面这些操作：

• GET /comics（返回漫画书的列表）；

• GET /comics/42（返回一本漫画书）；

• PUT /comics/42（更新一本漫画书）；

• POST /comics（在集合中新建一本漫画书）；

• DELETE /comics/42（删除一本漫画书）。

我们不用太关心除此之外的后端部分的细节。
> 本章的示例代码可以在https://github.com/eee-c/dart-comics 的“your_first_dart_app”分支上找到。

### 1.2 Dart的HTML部分

我们的整个应用程序将遵循最近的客户端 MVC 框架的惯例。因此，我们只需一个Web页面。

your_first_dart_app/index.html
```

<!DOCTYPE html>

<html>

<head>

<title>Dart Comics</title>

navigator.webkitStartDart();

</script>

type="application/dart"></script>

</head>

<body>

<h1>Dart Comics</h1>

<p>Welcome to Dart Comics</p>

Add a sweet comic to the collection.

</p>

</body>

</html>
```
对于大家而言，这个Web页面的大部分应该很熟悉。它包含了简单的HTML、CSS的链接和脚本。

**1．HTML头部**

唯一要注意的有点儿奇怪的地方是第一个`<script>`标签。在这个标签中，用JavaScript来启动Dart脚本引擎。

```

navigator.webkitStartDart();

</script>
```

**要点：**在写这本书时，在Dartium上必须用navigator.webkitStartDart()来启用Dart VM，Dartium是包含Dart语言支持的Chrome版本①。这个要求可能会在不久的将来去除。

【注】① http://www.dartlang.org/dartium/。

接下来，我们加载了实际代码的内容。这里唯一的变化是`<script>`标签的type属性，用来表示这是Dart代码。

```

type="application/dart"></script>
```

第10章还有更多关于Dart加载库和包含代码的内容。现在只要知道它会按照我们期望的方式加载Dart即可。

**2．HTML主体**

作为HTML的主体部分，没什么新东西，不过我们应该注意一下将附加上行为的两个元素的ID。

```

<h1>Dart Comics</h1>

<p>Welcome to Dart Comics</p>

Add a sweet comic to the collection.

</p>
```
对#comics-list UL 元素，我们将附加上后端数据存储中的漫画书列表。#add-comic段落标签上将附加上一个表单处理程序。那么，我们就开始吧。

### 1.3 Dart的Ajax部分

在scripts/comics.dart中，我们的Dart应用程序以两个Dart库的加载和一个main()函数开始。

```

import 'dart:html';

main() {

load_comics();

}

load_comics() {

// 在这里具体实现

}
```
正如我们将在第10章看到的，import语句有很多功能。现在我们只要简单地认为它导入了Dart核心行为之外的其他功能即可。

所有的Dart应用程序都是以main()作为执行的入口点。在JavaScript中，我们只要直接写代码然后就可以运行，但在Dart中这样不行。起初这可能看起来类似C系列的语言，但这确实是有意义的，难道要让遍布于各处的 JavaScript 源文件和 HTML文件中的所有代码都立刻执行？①在 Dart 语言中，main()入口点不只是约定，它是由这一语言强制的最佳实践。

【注】① 在一个页面中，出现的所有独立js文件或嵌入在HTML文件中的JavaScript都会立即被解析执行。但我们往往需要一个开始执行的入口点，一般是在文档准备好时执行一个函数，如jQuery的$(document).ready(handler)。—译者注

至于load_comics()函数，我们一步步来。首先我们需要标识出列表需要附加的DOM元素（#comics-list），接着我们需要一个Ajax调用来填充这个DOM元素。为了实现这两件事，我们最初的Dart代码看上去大概像下面这样：

```

load_comics() {
//在这里具体实现
  var list_el=document.querySelector('#comics-list');
  ajax_populate_list(list_el);
}
```
除了明显地忽略了function关键字之外，这个例子就像是JavaScript代码！在第3章，我们将介绍更多差异。Dart语言仍然用我们熟悉和喜欢的分号和大括号——语言设计者有意让人对这门语言感到很熟悉，至少在表面上看起来很熟悉。

**注意：**和JavaScript不同，在Dart中分号不是可选的。

除了熟悉，这段代码一看就很容易阅读和理解。没有怪异的、遗留的DOM方法。我们用document.query()而不是用document.findByElementId()来查找元素，并且用#comics-list这种CSS选择器的方式，正如我们在jQuery中已经习惯的那样。

现在已经找到了需要填充的UL元素，让我们来看看如何产生一个Ajax请求。就像在JavaScript中一样，我们要创建一个新的XHR对象①，并添加了一个请求加载完成的处理程序，然后打开并发送这个请求。

【注】① 为了减少名称中的冗余信息，在新版的Dart中，过去的XMLHttpRequest已改为HttpRequest，相关的名称也是如此，如XMLHttpRequestException已改为HttpRequestException。—译者注

```
ajax_populate_list(container) {

var req = new HttpRequest();

req.on.load.add((event) {

var list = JSON.parse(req.responseText);

container.innerHTML = graphicNovelsTemplate(list);

});

// 动作, 资源, 异步模式

req.open('get', '/comics', true);

req.send();

}
```
对于过去做过Ajax编程的人，对大部分代码应该立刻就能看懂。我们打开创建的XHR对象，指定要获取的资源，然后实际发送请求。

当添加事件处理程序时，我们看到与JavaScript的使用方式有所不同。XHR对象有一个 on 属性，它列出了所有支持的事件处理程序。我们访问其中的一个 load 处理程序类型，这样我们就能用add()方法添加一个处理程序。在这种情况下，我们解析获得的JSON数据为一个散列值的列表。它大概就像这样：

```
[

{"title":"Watchmen",

"author":"Alan Moore",

"id":1},

{"title":"V for Vendetta",

"author":"Alan Moore",

"id":2},

{"title":"Sandman",

"author":"Neil Gaiman",

"id":3}

]
```
然后，我们要实现这个简单的Dart应用程序的最后一部分——一个填充漫画书列表的模板。

```

graphic_novels_template(list) {

var html = new StringBuffer();

list.forEach((graphic_novel) {

html.add(_graphic_novel_template(graphic_novel));

});

return html.toString();

}

_graphic_novel_template(graphic_novel) {

return """

${graphic_novel['title']}

${graphic_novel['author']}

</li>

""";

}
```
第一个函数简单迭代这个漫画书列表（在心里，我把它们当做漫画小说），构建为一个HMTL字符串①。

【注】多行字符串和字符串变量插值。多行字符串由3个引号表示（单引号或双引号）。在字符串中，我们可以用美元符号插入值（甚至一个简单表达式）。对于简单的变量插入，大括号是可以省略的：$name和${name}是一样的。而对更复杂的插入，如散列查找，大括号就是必需的。

就是这样！我们准备好了一个功能完备的、带Ajax的Web应用程序。汇总的代码如下：

```
import 'dart:html';

main() {

load_comics();

}

load_comics() {

var list_el = document.query('#comics-list');

ajax_populate_list(list_el);

}

ajax_populate_list(container) {

var req = new HttpRequest();

req.on.load.add((event) {

var list = JSON.parse(req.responseText);

container.innerHTML = graphicNovelsTemplate(list);

});

// 动作, 资源, 异步模式

req.open('get', '/comics', true);

req.send();

}

graphic_novels_template(list) {

var html = new StringBuffer();

list.forEach((graphic_novel) {

html.add(_graphic_novel_template(graphic_novel));

});

return html.toString();

}

_graphic_novel_template(graphic_novel) {

return """

${graphic_novel['title']}

${graphic_novel['author']}

</li>

""";

}
```
页面加载后看上去像这样：

![image.png](https://img.hacpai.com/file/2019/08/image-577b4e00.png)

这便是我们探索Dart语言的良好开端。的确，我们这里掩饰了许多成就Dart语言的地方。但是这样做，让我们有了一个使用Ajax的Web应用程序的良好开始。最棒的是，我们写的代码看起来似乎与 JavaScript 没有什么不同。一些语法比我们使用JavaScript 更整洁一点（没人会抱怨整洁的代码），并且这些字符串特性也很不错。但是总的来说，可以肯定的是，使用相对更短的Dart语言是有生产力的。

### 1.4 这个应用程序还无法运行

在写作本书时，这个应用还不能在（几乎）任何地方实际运行。

任何浏览器（甚至Chrome）都还不支持Dart语言。为了原生地运行这个Web应用程序，我们需要安装Dartium——一个嵌入Dart VM的Chrome分支版本。Dartium可以从Dart语言网站获得 ① 。

【注】① http://www.dartlang.org/dartium/。

即使在Chrome支持Dart语言之后，我们仍然面临着只能被市场上个别浏览器支持的情况。这有点儿糟糕。

好在Dart能够编译为JavaScript，这意味着你可以在利用Dart能力的同时对所有平台可用。为了更容易实现这一点，我们添加一个小的 JavaScript 库，用来探测浏览器是否支持Dart语言，如果不支持就加载编译成JavaScript的等价物。

your_first_dart_app/_index_src_js_fallback.html
```

第5章中将讨论这个帮助文件的细节。目前，只要知道我们的Dart代码不是锁定在一个浏览器厂商那里就足够了。我们肯定不会回到VBScript那样。

### 1.5 下一步做什么

不可否认，这是对Dart语言的快速入门。能够如此快速地搭建和运行真是太棒了。仿佛我们此刻就获得了生产力。

尽管如此，我们才刚刚开始学习Dart语言，别搞错了，我们的Dart代码还可以改进。因此，让我们用下面的几章来熟悉Dart语言中的一些重要概念。之后，在第6章中，我们将准备好把这个Dart应用转变成MVC的方式。