精品久久久久久亚洲综合网,特黄特色无码高清视频 ,国产成人小午夜视频在线观看

Polymer 是在 Google I/O 2013 發(fā)布的一個(gè)新的 Web UI 框架。2015-5-29日在Google I/O 2015將Polymer升級(jí)到了1.0版本。Polymer的核心原則是 “Everything is an element”。它是一款實(shí)用、基于事件驅(qū)動(dòng)、封裝性和互操作性強(qiáng)的 Web UI 開發(fā)框架。如果你還不了解，建議你從這篇文章開始學(xué)習(xí)Polymer 。

在了解 Polymer 之前，如果你沒有了解過 Web Components ，推薦去了解下 Web Components 規(guī)范?？梢酝ㄟ^ Web Components Wiki了解，Polymer 用到的有 Shadom Dom,Custom Elements,HTML Imports 等Web Components 技術(shù)。

1、安裝 POLYMER

Polymer 提供幾種方式安裝源碼。

Bower 安裝，推薦使用此方法安裝。如果您對(duì)bower不熟悉，可以自行Google了解。如果已經(jīng)安裝bower，可以使用命令直接安裝：bower install –save Polymer/polymer

直接下載zip包，zip 下載地址。

GitHub Polymer源碼，Polymer 鏈接。

2、構(gòu)建自己的 POLYMER 應(yīng)用

創(chuàng)建一個(gè) POLYMER 元素

Polyer支持創(chuàng)建自定義元素，在外部看來(lái)就像其他的 DOM 元素，但是在內(nèi)部，提供便利的數(shù)據(jù)綁定和其他豐富的功能，使用更加少的代碼，構(gòu)建復(fù)雜的應(yīng)用。

創(chuàng)建一個(gè)新的 Polyer 元素，需要：

引入 Polymer 核心組件，polymer.html

使用<polymer-element>聲明自定義元素

下面例子，將創(chuàng)建一個(gè)名字為 my-element 的元素：

<polymer-element name="my-element">

<span>This is element content</span>

</template>

Polymer({ ready: function() {

//...

}})

</script>

</polymer-element>

Polymer元素主要由倆部分構(gòu)成,<template>和<script>,其中<template>是Polymer元素的HTML模板，<script>是模板對(duì)應(yīng)的 javascript代碼。

注意到<script>標(biāo)簽中的Polymer構(gòu)造方法，Polymer構(gòu)造方法是一個(gè)對(duì)document.registerElement的包裝，并且提供一些特殊的功能，比如數(shù)據(jù)綁定和事件映射，Polymer構(gòu)造方法接受一個(gè)對(duì)象參數(shù)，定義該元素的prototype。

有些 Polymer元素并不需要 javascript 代碼，可以使用noscript屬性聲明：

<polymer-element name="my-element" noscript>

...

</polymer-element>

你可以在這里查看Polymer的 API 。

使用自定義的 POLYMER 元素

定義好自己的 Polymer元素之后，就可以通過import的方式引入它（通過import引入的文件，即使引入多次，瀏覽器也只會(huì)請(qǐng)求一次。）。在 HTML代碼中引入自定義的元素并且使用它。首先需要引入 webcomponents.js依賴。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<my-element></my-element>

</body

</html>

遵循Everything is an element的原則，在HTML頁(yè)面中，我們會(huì)很少看到需要寫一些 javascript代碼，這樣就使得 HTML 文件代碼看起來(lái)很清爽。

雖然上面例子看起來(lái)只有短短幾行簡(jiǎn)單的代碼，但是Polymer支持創(chuàng)建豐富的可復(fù)用的組件，其中Polymer官網(wǎng)就提供許多供使用和學(xué)習(xí)的基礎(chǔ)組件。

3、更多功能

SHADOW DOM

在Polymer可以使用Shadow DOM從模板中分離視圖內(nèi)容，創(chuàng)建一個(gè)使用Shadow DOM的template十分簡(jiǎn)單，使用 <content></content>來(lái)選擇需要替換的元素即可。

<polymer-element name="my-element" noscript>

<span>This is content: </span>

</template>

</polymer-element>

使用的時(shí)候，只需要在Polymer標(biāo)簽內(nèi)部嵌入Light DOM。

<my-element>

<q>Hello World</q>

</my-element>

布局屬性

Polymer使用CSS Flexbox定義了一系列基礎(chǔ)布局樣式。
只需要簡(jiǎn)單的在標(biāo)簽上引入布局屬性就可以輕松使用。

</div>

模板表達(dá)式

Polymer支持在模板中使用 /{/{ /}/}執(zhí)行javascript表達(dá)式，基礎(chǔ)支持有：

標(biāo)示符和路徑。比如：foo 、match.set.game

數(shù)組訪問。比如：array[i]

非邏輯。比如：!

一元表達(dá)式。比如：+i,-a

二進(jìn)制操作。比如：+,-,*,/,%

比較操作。比如：==,<,>,<=,>=,!=,===,!==

邏輯比較。比如:foo && bar,foo || bar

三元表達(dá)式。比如：a ? b : c

分組。比如：(a + b) * (c + d)

字符值（數(shù)字、字符，null,undefined）。

數(shù)組和對(duì)象。如：[foo, 1],{id: 1, foo: bar}

函數(shù)。如：reverse(my_list)

Polymer 還支持以下表達(dá)式：

計(jì)算表達(dá)式?？梢灾苯邮褂妙愃?nbsp;{{ a + b }}的方式，也可以使用如下方式處理比較復(fù)雜的計(jì)算：

<polymer-element name="my-element" >

<span>The result is {{result}}</span>

</template>

Polymer({

computed: {

result: '1 + 100'

}

})

</script>

</polymer-element>

表達(dá)式 Scope

Filter 表達(dá)式。使用 {{expression | filterName }}執(zhí)行 Filter 表達(dá)式，跟 Angular 的Filter有些類似.

數(shù)據(jù)綁定

Polymer 提供多種數(shù)據(jù)綁定方法。

單模板實(shí)例。使用bind屬性綁定一個(gè)對(duì)象到模板實(shí)例。

He's name is /{/{name/}/}.

</template>

還可以使用as為對(duì)象創(chuàng)建一個(gè)命名空間：

He's name is /{/{p.name/}/}.

</template>

模板迭代。使用repeat屬性迭代，詳見這里：

</template>

條件綁定。使用if屬性有條件的綁定模板實(shí)例：

The conditional is true

</template>

Polymer不僅提供以上的方式綁定數(shù)據(jù)，而且提供了很多其他的方法，使得模板之間的復(fù)用十分便利。更多關(guān)于數(shù)據(jù)綁定可以查看官網(wǎng)

總結(jié)

Polymer擁有許多基礎(chǔ)模板和很強(qiáng)的組件模型。作為一款還在成長(zhǎng)中的Web UI框架，其很多設(shè)計(jì)思想值得學(xué)習(xí)和思考。

原文來(lái)自：好JSER

99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

從零學(xué)習(xí)Polymer?前端開發(fā)框架

熱門帖子

Swift 教程

最新帖子

Xcode 9.4下載