这里是文章模块栏目内容页
Polymer Web组件构建框架

在2013年的Google I/O大会上,Google发布了Polymer,它是一个使用Web组件构建Web应用的类库,同时也使用了为Web构建可重用组件的新的HTML 5标准。Polymer为大部分Web组件技术提供了polyfills功能,它能让开发者在所有的浏览器支持新特性前创建自己的可重用组件。此外,Polymer提供了一系列的部件的例子,其中包括天气、时钟、股票行情和线型图。

鉴于许多Web框架通过暴露JavaScript API来构建用户界面,而构建用户界面实际上就是生成一堆div和spans标记,Web 组件是原生浏览器的解决方案因此不依赖于一个完整的框架。因此,与现在的一般依赖某个Javscript框架的HTML组件相比,Web组件希望能减少碎片。

尽管Web组件是一项有趣的新技术,但在浏览器们都支持它们(并且大部分用户都开始使用这些浏览器们)之前,其中的大部分功能还派不上用场。解决这个问题的一种方法是使用polyfills(译者注:polyfills原指一种墙面填料)。polyfill指的是一段代码,它能实现期望最终由浏览器自身实现的功能。如果浏览器本身已经实现了该功能,则polyfill什么都不做。否则,它模拟其实现而不依赖API。例如,webshims库实现了HTML5中各种功能,包括canvas、HTML5表格和在某些尚不支持地理位置定位的浏览器中实现地理位置定位功能。

Polymer中的polyfills为需要使用Web组件成功构建应用提供了多种Web技术,包括:

    HTML imports:种在其他HTML document中引入和重用HTML document的方法。
    自定义元素:让开发者定义和使用自定义DOM元素。
    Shadow DOM:在DOM中提供的封装。
    模型驱动视图(Model Driven Views):提供象AngularJS的数据绑定。
    ·Web动画:实现复杂动画的API。
    ·Pointer事件:对鼠标触摸和手写笔事件的封装

这些polyfills可以分开使用而不需要使用Polymer的其他部分。此外,Polymer提供:

  • polymer.js: Polymer的核心运行引擎,能轻易创建自定义属性和事件。

  • 一系列可重用的可视和非可视元素。

下面是一个Polymer 组件的格式样例代码:

/**
 * @fileoverview 'settings-about-page' contains version and OS related
 * information.
 */

Polymer({
  is: 'settings-about-page',

  behaviors: [
    WebUIListenerBehavior,
    settings.MainPageBehavior,
    settings.RouteObserverBehavior,
    I18nBehavior,
  ],

  properties: {
    /** @private {?UpdateStatusChangedEvent} */
    currentUpdateStatusEvent_: {
      type: Object,
      value: {
        message: '',
        progress: 0,
        rollback: false,
        status: UpdateStatus.DISABLED
      },
    },

    /**
     * Whether the browser/ChromeOS is managed by their organization
     * through enterprise policies.
     * @private
     */
    isManaged_: {
      type: Boolean,
      value: function() {
        return loadTimeData.getBoolean('isManaged');
      },
    },

    // <if expr="chromeos">
    /** @private */
    hasCheckedForUpdates_: {
      type: Boolean,
      value: false,
    },

    /** @private {!BrowserChannel} */
    currentChannel_: String,

    /** @private {!BrowserChannel} */
    targetChannel_: String,

    /** @private {?RegulatoryInfo} */
    regulatoryInfo_: Object,

    /** @private */
    hasEndOfLife_: {
      type: Boolean,
      value: false,
    },

    /** @private */
    hasReleaseNotes_: {
      type: Boolean,
      value: false,
    },

    /** @private */
    showCrostini: Boolean,

    /**
     * When the SplitSettings feature is disabled, the about page shows the OS-
     * specific parts. When SplitSettings is enabled, the OS-specific parts
     * will only show up in chrome://os-settings/help.
     * TODO(aee): remove after SplitSettings feature flag is removed.
     * @private
     */
    showOsSettings_: {
      type: Boolean,
      value: () => loadTimeData.getBoolean('showOSSettings'),
    },

    /** @private */
    showCrostiniLicense_: {
      type: Boolean,
      value: false,
    },
    // </if>

    /** @private */
    hasInternetConnection_: {
      type: Boolean,
      value: false,
    },

    // <if expr="_google_chrome and is_macosx">
    /** @private {!PromoteUpdaterStatus} */
    promoteUpdaterStatus_: Object,
    // </if>

    // <if expr="not chromeos">
    /** @private {!{obsolete: boolean, endOfLine: boolean}} */
    obsoleteSystemInfo_: {
      type: Object,
      value: function() {
        return {
          obsolete: loadTimeData.getBoolean('aboutObsoleteNowOrSoon'),
          endOfLine: loadTimeData.getBoolean('aboutObsoleteEndOfTheLine'),
        };
      },
    },