首先神凑,知道它也是和react和vue一樣的一種前端框架就行了净神,現(xiàn)在還是比較小眾的吧。
關于這個框架溉委,現(xiàn)在中文方面的資料確實挺少的鹃唯,廢話不多說了。
下面是這個框架的官方網(wǎng)站:
https://www.polymer-project.org/2.0/start/
https://www.polymer-project.org/2.0/docs/devguide/feature-overview
中文文檔網(wǎng)站:https://polymer-zh.cn/2.0/docs/upgrade
1瓣喊、首先安裝:
????????npm install -g polymer
????????npm install -g polymer-cli. ? ?//github上的地址:https://github.com/Polymer/polymer-cli 坡慌。
然后可以在cmd的dos窗口下通過polymer help查看所有命令,如下圖:
4、關于新建一個polymer的項目:
最好是可以使用polymer-cli腳手架工具直接生成一個項目模板棵帽。
記得先在命令行用npm install -g polymer-cli命令安裝該插件熄求。
然后找個目錄新建一個文件夾,然后打開進入該空文件夾里使用命令行工具輸入:polymer init?.然后就可以用polymer serve命令運行了岖寞。
還可以用polymer build命令編譯出兩中類型的項目文件抡四。
2柜蜈、常用命令講解:
怎么運行一個本地靜態(tài)web服務器仗谆?
運行polymer 項目的命令:polymer serve
完整的命令還可以是:polymer serve -o --hostname 195.165.100.112 --port 8088
解釋一下各參數(shù):
????-o:表示服務器啟動完成就自動在默認瀏覽器里打開該項目指巡。
????--hostname: 表示任意指定的項目啟動的ip或者是域名。
????--port指定端口號隶垮。
還有一種運行的方式:
polymer serve --open app.html --browser Safari? ??? ??? ? //指在特定的瀏覽器中打開特定的頁面藻雪,并啟動服務器。而不是默認打開index.html頁面狸吞。
生產(chǎn)環(huán)境的打包部署: 還有個重要的命令勉耀,打包編譯項目的。
polymer build: 這個命令會讀取當前目錄下的polymer.json文件配置來構建蹋偏。
該命令會生成用于生產(chǎn)環(huán)境的完整文件便斥。該過程包含了壓縮HTML、css和項目依賴的js威始,還有重要的是還會生成一個service-worker.js的文件用于緩存該項目的依賴項枢纠。這里多說一句,只有build后的生產(chǎn)環(huán)境才會使用到這個service-worker.js黎棠,但是這里要注意一點的就是晋渺,這個service-worker.js只能用于https的服務器種才有效,不然還會報錯脓斩。
當然也可以不用json配置木西,像下面這樣在命令里直接指明配置參數(shù):
polymer build --entrypoint index.html,參數(shù)--entrypoint是指定入口文件的随静。
關于polymer.json文件的詳細內容后面再講解八千。
3、說說polymer1.0+和polymer2.0+的區(qū)別燎猛。
主要的不同是在js代碼的編寫上叼丑。
1.0版本注冊一個組件是只用全局方法Polymer(options), 傳入一個配置對象來實現(xiàn)邏輯。
2.0版本注冊一個組件是通過使用ES6+的語法定義一個繼承Polymer.Element對象的一個類MyClass扛门。然后最后通過customElements.define(MyClass,is,MyClass);注冊到polymer里面鸠信。 現(xiàn)在polymer2.0也已經(jīng)正式發(fā)布可用了。
5论寨、使用polymerjs創(chuàng)建一個自定義組件(元素)的文件結構:
更準確的說polymerjs創(chuàng)建的都是自定義的HTML元素星立,使用上就和其他常用的html標簽元素一樣。
整體來說只有兩部分:通過link標簽引入其他的自定義組件葬凳、通過在一個已有自定義組件dom-module里面完成新的整個新自定義組件的構建绰垂。
完整結構如下:
* Key information:
標簽dom-module里的id屬性表示新建的組件的名字,即新標簽的名字火焰,外面就可以使用這個新標簽名像使用div標簽一樣使用這個組件了劲装。
標簽定義了元素的local DOM的結構和樣式。
標簽:這里定義的樣式是只限定在當前這個local DOM里的元素的,不會影響到外面的其他組件的元素樣式占业。
style里有個假類樣式(:host{})匹配當前自定義標簽new_module_name的绒怨。
標簽:在js里通過一個全局的方法Polymer()注冊這個組件。
關于:host假類的使用:
:host([pressed]) iron-icon{
? ??fill: currentcolor;
}
由于:host表示的就是頂層的自定義標簽:上面樣式表示在使用該新標簽時當有pressed屬性時在該新標簽里的iron-icon元素上使用該樣式谦疾。<new_module_name pressed></new_module_name>
:host(seletor)括號里的是標準的css選擇器南蹂。
6、polymerjs的路由和頁面跳轉:
iron-selector組件的使用:作用是表示跳轉到哪個路由頁面念恍,直接通過a標簽實現(xiàn)六剥,這里的name和href的名稱必須一樣》寤铮‘#/’:是用來表示使用什么方式的路由方式的,'#’表示是前端hash路由疗疟,這個和react是一樣的。
iron-pages組件的使用:作用是決定展示哪個路由頁面瞳氓,這個自定義組件標簽里放的是每個頁面的自定義組件秃嗜,這里的每個頁面組件的屬性name的值也必須和上面的導航組件標簽iron-selector里的a標簽使用的name值一樣《倥颍可以看到iron-pages組件里有個attr-for-selected屬性锅锨,其實很容易理解,就是它在決定顯示哪個子頁面時該使用子組件的哪個屬性作為識別標識的恋沃。比如下圖就是用的name屬性必搞。
整個流程就是,iron-pages通過外面?zhèn)鹘o他的page變量囊咏,根據(jù)attr-for-selected指定的屬性名稱檢索每個子頁面組件恕洲,然后就只展示和那個屬性值相同的子頁面。
7梅割、全局方法Polymer(options)的講解:polymer1.0
Polymer方法是用來注冊一個自定義的新組件的霜第。他會返回一個新組件的構造函數(shù),參數(shù)options就是一個簡單的對象户辞。
自定義元素的注冊可以參考:https://www.polymer-project.org/1.0/docs/devguide/registering-elements
參數(shù)如下:
is:"module-name" ?,//根據(jù)規(guī)定泌类,自定義組件必須包含一個破折號,雖然不是強制性的底燎。這個is的值也必須和上面dom-module標簽里定義的id的值一致刃榨。
extends?:'原生html標簽名',//可以擴展繼承原生HTML標簽双仍。
properties:{....} ,//數(shù)據(jù)參數(shù)枢希。下面第8點有詳細說明,也可參考網(wǎng)址:http://polymer-zh.cn/1.0/docs/devguide/properties.html
behaviors:[....] ?,//是定義已有定義好的Polymer下的方法名(Polymer.IronResizableBehavior)朱沃;
observers:[....] ? ,// 是字符串數(shù)組苞轿,每個字符串都是一個調用形式的方法茅诱,帶括號的可傳參數(shù)的。這里可添加復雜的可監(jiān)聽多個屬性改變的觀察者(包括以路徑形式表示的子屬性)搬卒。如果只監(jiān)聽單個屬性的改變可用聲明屬性里的observer參數(shù)配置瑟俭。參考網(wǎng)址:http://polymer-zh.cn/1.0/docs/devguide/observers.html
listeners:{.....} ? ,//是鍵值對的對象,添加在該組件上的事件秀睛。
hostAttributes:{.....} ? ,//給該新組件元素添加原生的HTML屬性時用尔当。
created:function(){ ..... } ??,//? 元素被創(chuàng)建后調用莲祸,但是在屬性值被設置前蹂安。此為一次性調用的回調方法。
ready:function(){.....} ? ,//該回調函數(shù)在該自定義元素被初始化完成時調用锐帜,此時屬性值已經(jīng)被賦值田盈,并且local DOM也已經(jīng)初始化完成了。此為一次性調用的回調方法缴阎。
attached:function(){.....} ?,// 當元素已經(jīng)被添加到document上是調用允瞧。可多次調用蛮拔。
detached:function(){.....} ? ,//Called after the element is detached from the document.
attributeChanged:function(){.....} ??,//當元素的attributes屬性發(fā)生改變時調用述暂。
customFunc1:function(){....} ? ,//自定義的方法1。
customFunc2:function(){.....} ??,//
Polymer.Class(options):如果您想設置自定義元素的原型鏈建炫,但不能立即注冊,你可以使用該方法畦韭。他接受的參數(shù)和Polymer(options)方法的參數(shù)一樣。然后在使用的時候通過瀏覽器的API:document.registerElement('my-element', MyElement);注冊該新元素肛跌。
8艺配、To be continue......