polymerjs學習筆記——入門篇

首先神凑,知道它也是和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查看所有命令,如下圖:

幾個常用的polymer命令藻三,詳細的就不說洪橘。

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里面完成新的整個新自定義組件的構建绰垂。

完整結構如下:

這是polymer1.0的寫法

* 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的路由和頁面跳轉:

這里使用的是hash路由的例子

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......

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市衍慎,隨后出現(xiàn)的幾起案子转唉,更是在濱河造成了極大的恐慌,老刑警劉巖稳捆,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件赠法,死亡現(xiàn)場離奇詭異,居然都是意外死亡乔夯,警方通過查閱死者的電腦和手機期虾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來驯嘱,“玉大人镶苞,你說我怎么就攤上這事【掀溃” “怎么了茂蚓?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我聋涨,道長晾浴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任牍白,我火速辦了婚禮脊凰,結果婚禮上,老公的妹妹穿的比我還像新娘茂腥。我一直安慰自己狸涌,他們只是感情好,可當我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布最岗。 她就那樣靜靜地躺著帕胆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪般渡。 梳的紋絲不亂的頭發(fā)上懒豹,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天,我揣著相機與錄音驯用,去河邊找鬼脸秽。 笑死,一個胖子當著我的面吹牛蝴乔,可吹牛的內容都是我干的记餐。 我是一名探鬼主播,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼淘这,長吁一口氣:“原來是場噩夢啊……” “哼剥扣!你這毒婦竟也來了?” 一聲冷哼從身側響起铝穷,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤钠怯,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后曙聂,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晦炊,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年宁脊,在試婚紗的時候發(fā)現(xiàn)自己被綠了断国。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡榆苞,死狀恐怖稳衬,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情坐漏,我是刑警寧澤薄疚,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布碧信,位于F島的核電站,受9級特大地震影響街夭,放射性物質發(fā)生泄漏砰碴。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一板丽、第九天 我趴在偏房一處隱蔽的房頂上張望呈枉。 院中可真熱鬧,春花似錦埃碱、人聲如沸猖辫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽住册。三九已至婶博,卻和暖如春瓮具,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背凡人。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工名党, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人挠轴。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓传睹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親岸晦。 傳聞我的和親對象是個殘疾皇子欧啤,可洞房花燭夜當晚...
    茶點故事閱讀 42,762評論 2 345