Globals in Polymer

作者：王納米

責任編輯：《代碼指南》編輯部

首發於《代碼指南》（daimazhinan.com）

0 Introduction

Polymer 中 element（component）主宰一切。一個自然的需求是，在 element 間進行通訊與數據共享。

1 Communication

1.1 Published property

Polymer 會自動根據 element 的 attributes="valueA"生成相應的 getter，setter，以及 change watcher（即@valueAChanged(oldValue, newValue)），這就是所謂的published property。這實質上就是 element 的 public API。

通過調用其它 element 的 API 就是最基本的通訊方式。即，在 elementA 中：

@.$.elementB.valueB = 'foo'

而在 elementB 中使用 watcher：

Polymer
  valueBChanged: (oldValue, newValue) ->
    console.log "valueB changed from #{oldValue} to #{newValue}"

1.2 core-signals

上述通過 public attribute 進行通訊的方式十分繁瑣。Polymer 中提供了core-signals用以進行通訊：

TIPS: 代碼並不嚴謹，比如沒有 import element，而且實際上也不能直接在

其中 child-element 有 attributes="valueFoo"。

2.2 A custom global element

文檔中此處介紹了一種在全局共享數據的方式。具體來講，可以定義一個名爲 app-globals 的 element，通過 closure，使得所有的的 instance 都共享同樣的數據：

（TIPS：如果使用 coffee 的話，默認即有此 closure wrapper。）

此時在其它任何 elemet 中，只要引入即可獲取其中的數據。

但是，這裏還有兩個問題：

目前只能支持一個名爲userName的變量。更多的變量就要寫成諸如attributes="valueA valueB valueC"的形式。
基於 javascript 的特性，如果此處共享一個字符串變量，那麼在一個 element 中對其進行修改是無法傳遞到全局的，即這隻是一個全局共享的只讀變量。

這兩個問題的答案是一樣的：使用一個 object 來包裝共享的數據：

如此，我們便構造了一個全局共享的，可讀可寫的 object。

此時，我們已經可以通過{{ globals.values.userName }}來在頁面中直接獲取全局共享的值。但若要修改其中的值，還需要使用代碼（雖然本刊名爲《代碼指南》，但我們依然不喜歡寫無用的重複的代碼）。我們希望可以隨時直接使用來修改全局變量。顯然，爲達此目的，我們需要能夠獲取 element 的 attributes，此時需要的是 Polymer 在 element 上維護的this.attributes值。我們作出如下修改：

此時，我們既可以在頁面中使用，也可以在代碼中使用@.$.globals.values.userName = 'Farmer John'來修改全局變量。

更多的討論：

其中的@attributes，即是 Polymer 在 element 上維護的this.attributes。對於，其this.attributes大致形如：

{
    0: { nodeName: 'vertical', value: '' },
    1: { nodeName: 'layout', value: '' },
    2: { nodeName: 'foo', value: 'bar' }
}

同一樣，可以定義，在其中引入，其它 elements 對 base 進行 extend。

實踐中，可能需要在 values 有修改的時候進行操作。比如，實時地將其值存入 localStorage。

此時如果要使用一個change watcher（即@valuesChanged）來監視values的變化，那麼一定要注意：如果 watch 的對象是一個 object，那麼對 object 進行修改@values.foo = 'bar'，是不會觸發 watcher 的。只有修改 values 本身（@values = 'new value as a string'，纔會觸發 watcher。

而 Polymer 中的observe雖然可以 watch「某 object 某 attr」的變化，但是這需要我們事先知道該 attr 的名稱，通用性不足。

因此實踐中，可以在上手動定義 getter 與 setter 作爲操作數據的接口：，然後在set_values method 中進行其它操作，舉例如下：

set_values: (hash) ->
   new_values = @.$.localStorage.value
   for key of hash
     new_values[key] = hash[key]
   @.$.localStorage.value = new_values
   @.$.localStorage.save()

2.3 core-meta

Polymer 提供了core-meta來進行簡單的數據存儲。其在功能上類似於我們在上一節中實現的全局共享的變量，但是更加輕量：

要添加或修改一個全局變量，可以在任意位置引用：

要讀取一個值，也要先有一個，可以是直接添加在 html 中的，也可以在需要讀取數據時動態添加：

meta = document.createElement('core-meta');
# 通過 id 來讀取一個值：
console.log meta.byId 'user' # Farmer John
# 列出所有定義過的
console.log meta.metaArray
# 列出所有定義過的 meta 值
console.log meta.metaData

一個中還可以包含更多的值：

（注意：目前，這種方式定義的 property，要得到其值似乎有些繁瑣，需要手動遍歷meta.metaArray所返回的 DOM）

2.4 core-shared-lib

項目變得複雜之後，需要共享的往往不止有數據，還有代碼本身。

core-shared-lib用於引用支持 JSONP 的 javascript 代碼：

在實踐中不推薦使用此方法，應儘量使用，因爲它會破壞 Polymer（實際上是 webcomponents，以後應該是由瀏覽器）所維護的 imports。

更多內容參見文檔：

https://www.polymer-project.org/docs/elements/core-elements.html#core-shared-lib
https://github.com/Polymer/core-shared-lib/blob/master/core-shared-lib.html