原文地址：blog.sethladd.com/2012/11/you…

原文作者：www.blogger.com/profile/139…

发布时间：2012年11月6日

随着我们从HTML5和现代Web平台中获得的所有力量，你不能轻易地做一些简单的事情，比如扩展<button>。幸运的是，这种情况正在改变，Web平台正在经历一场声明式的复兴。由于不同浏览器厂商和规范委员会的许多团体和个人的辛勤工作，Web Components正在成为为现代Web开发者带来结构和封装的方式。最好的消息是：你不需要等待多年来这些新标准的实施，你现在就可以使用Dart来构建Web Components。

网络组件基础知识

Web的组件模型，又称Web Components，是一个规范的集合，它允许开发人员构建可重用的、封装的和声明式的小部件。

当人们说到 "Web Components "时，一般指的是这四个概念。

模板，它定义了惰性的标记块，但可以被激活以备以后使用。
装饰器，应用模板让CSS影响文档丰富的视觉和行为变化。
自定义元素，让作者定义自己的元素，包括新的表现形式和API，可以在HTML文档中使用。
影子DOM，它定义了装饰者和自定义元素在DOM树中的表现和行为如何结合在一起。

自定义元素

我对自定义元素最感兴趣，因为它们允许我在我的应用程序中构建、分享和使用<x-fancy-button>。

自定义元素可以封装用户定义标签的结构、样式和行为。该结构或所有嵌套的div和空格都隐藏在自定义元素内部，而不是立即在页面的DOM中可见。CSS样式可以被限定在这个新元素上，以防止泄漏到文档的其他部分。自定义行为，通过JavaScript或Dart，可以被附加到元素的API上，以进一步专业化。

数据绑定

大多数开发人员都希望有一种方法来更新视图（也就是HTML页面），当模型（也就是普通的Dart对象）发生变化时，反之亦然。这种技术被称为数据绑定，大多数现代MVC式的框架都有一些支持，使之变得简单。

虽然不是Web组件页面'o技巧的具体部分，但模型驱动的视图是新兴的现代Web应用程序堆栈的一个重要方面。MDV，也就是人们常说的MDV，使用一种声明式的语法来实现数据和视图的单向和双向数据绑定。

今天使用Web Components

Dart团队一直在努力在Dart中构建Web UI，它建立在Web组件之上，并使它们适用于当今的现代浏览器。编写你的第一个组件很容易，让我来告诉你如何编写。

(下面的内容假设你已经安装了Dart Editor并且可以使用。虽然这不是一个要求，但由于它的自动构建系统，编辑器使事情变得更容易。)

1) 创建一个新项目

在Dart Editor中创建一个新的项目，同时勾选 "生成基本Web应用的内容 "和 "添加Pub支持"。

2) 添加Web Components包

打开pubspec.yaml文件，将依赖关系添加到web_components包中。

name: App  
 description: A sample application  
   
 dependencies:  
  web_ui: any

3）安装依赖关系

在编辑器中选择pubspec.yaml文件，然后进入Tools | Pub Install。假设它成功了，你将会在你的应用程序中看到一个新的包文件夹，里面有web_components和所有的依赖关系。

4) 添加构建脚本

Web Components需要被编译成vanilla Dart（然后，JavaScript）和HTML。为了使这一过程更容易，编辑器可以在文件改变时运行一个构建脚本。别担心，它的速度非常快。

将这个文件作为 build.dart 添加到你的应用程序的根目录下（与 web/ 和 packages/ 并行）。

import 'package:web_components/component_build.dart';  
 import 'dart:io';  
   
 void main() {  
  build(new Options().arguments, ['web/App.html']);  
 }

5) 添加自定义组件

这个例子为一个可点击的按钮及其输出使用了一个自定义组件。虽然不是世界上最激动人心的东西，但它很小，而且自成一体。

在web/目录下创建一个click.html文件，并添加以下内容。

 <html><body>  
  <element name="x-click-counter" constructor="CounterComponent" extends="div">  
   <template>  
    <div>  
     <button on-click="increment()">Click me</button>  
     <span>(click count: {{count}})</span>  
    </div>  
   </template>  
   <script type="application/dart">  
    import 'package:web_ui/web_ui.dart';  
   
    class CounterComponent extends WebComponent {  
     int count = 0;  
     void increment() { count++; }  
    }  
   </script>  
  </element>  
 </body></html>

<element>标签定义了新的自定义元素，在这种情况下，它扩展了<div>元素。这个新元素的结构可以在<template>标签中找到。

当<button>被点击时，会在这个元素上调用increment方法。这个自定义行为在Dart代码中定义在<script>标签里面。

{{count}}语法是元素的count字段（同样在<script>代码中定义）和DOM输出之间的数据绑定。当元素的count字段发生变化时，DOM就会更新。

6）清理编辑器的默认模板

从你的项目中删除以下文件，它们在本例中不需要。

web/App.dart
App.html
App.css

7) 使用自定义元素

创建一个web/App.html并使用以下代码。

 <!DOCTYPE html>  
   
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>App</title>  
   <link rel="components" href="click.html">  
  </head>  
  <body>  
   <h1>Web Components FTW!</h1>  
     
   <x-click-counter></x-click-counter>  
     
   <script type="application/dart">main() {}</script>  
   <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>  
  </body>  
 </html>

请注意Web组件本身是如何通过<head>中的<link>标签被包含在这个文档中的。我最喜欢的部分是文档中间的<x-click-counter>。

注意<script>标签中的空的main()函数，这也是必须的。

8）运行应用程序

构建脚本应该已经生成了所有必要的代码，但如果没有，你可以右键点击build.dart并选择运行。

你应该看到一个web/out目录，里面有一个web/out/App.html.html文件。右键点击App.html.html并选择 "Run in Dartium"。

这里有一个嵌入式的演示。

sethladd.github.com/dart-web-co…

点击按钮，点击次数就会更新。

如果你看不到上面的嵌入式演示，你可以尝试现场演示。

9) 在Firefox中运行应用程序

当然，在虚拟机上原生运行Dart代码是很有趣的，但在其他现代浏览器中使用Web组件运行Dart应用则更加有趣。

右键点击App.html.html并选择 "Run as JavaScript"。这将你的应用程序编译成JavaScript并启动你的默认浏览器。然后你可以复制URL并将其粘贴到其他现代浏览器中。我在稳定的Chrome、Firefox和Safari中试过。

总结

还有更多的内容，但希望你能看到，用Dart构建Web Components并编译成可以在现代浏览器上运行的代码是很容易的。

你可以阅读更多关于Web Components的内容，或者更多关于Dart + Web Components的内容，或者更多关于Dart + Web Components + Tools的内容。你可以访问开源的Dart Web UI项目，甚至可以看到用Dart + Web Components构建的TodoMVC。

[Web翻译]你的第一个Web Component与Dart