開坑,寫點Polymer 1.0 教程第1篇——安裝篇

書接上回
上一篇咱們介紹了神馬是Polymer,這一篇咱們來作些正式編碼前的準備工做,順便也扯一扯Polymer的真面目javascript

如何安裝Polymer

有兩種方式:
第一種是bower安裝,不要問我bower是什麼,不會bower的話,也不建議你如今開始學習Polymer
圖片描述java

bower init
bower install --save Polymer/polymer#^1.1.0

安裝成功後會在bower.json中生成以下依賴配置web

{
  "name": "my-project",
  "version": "0.0.0",
  "dependencies": {
    "polymer": "Polymer/polymer#^1.1.0"
  }
}

若是往後Polymer發佈了新版本,你只需執行如下命令就能更新chrome

bower update

第二種就是最原始的下載js庫的方式,適合不會bower,卻硬要如今就開始學習Polymer要強的同窗。
圖片描述
地址請戳 polymer_1.1.0.zipjson

無論你使用的是那種方式,load下來的庫都是以下結構
圖片描述segmentfault

細心的朋友會以爲比較奇怪,爲何polymer庫裏面的核心庫不叫polymer.js,而是存放在webcomponentsjs下的webcomponents.js或者
webcomponentsjs-lite.js瀏覽器

這裏要來講一說Polymer的真面目了。

圖片描述
Polymer其實真正意義上來講並非一個類庫,它嚴格上來說應該是web components native化的規範的項目代號,它是構建在web components技術最前沿的一個東西,因爲太過超前,目前市面上不少瀏覽器都不能支持web components的規範特性。因此Polymer又以一個js庫的身份出如今世人面前,它現階段要作的就是使用web components的規範來進行開發,而且提供了一套底層實現來填補了各大瀏覽器暫不支持的gap,咱們稱爲polyfills(填充物),也就是webcomponents.js要乾的事情。將來在理想狀態下(等web components規範成熟,各大瀏覽器都原生支持了),咱們能夠在不須要引入webcomponents.js的狀況下,實現現階段全部的工做。也就是說你如今的依賴webcomponents.js寫出的代碼,之後將被瀏覽器原生支持。app

好比下圖:google自家的chrome就以原生支持web component規範,因此不須要導入polyfills(填充物)就能直接運行Polymer代碼。可是其它瀏覽器卻不能work
圖片描述
必定要引入Polyfills,FF和IE才能夠work
圖片描述學習

扯遠了,繼續安裝

這個誰都會,引入核心類庫,準備工做作好下一章節,咱們就能夠開始幹活了。google

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

本篇完,在下一節咱們會具體跑一個hello world來感覺下polymer的魅力

相關文章
相關標籤/搜索