亚洲av成人无遮挡网站在线观看,少妇性bbb搡bbb爽爽爽,亚洲av日韩精品久久久久久,兔费看少妇性l交大片免费,无码少妇一区二区三区

  免費注冊 查看新帖 |

Chinaunix

  平臺 論壇 博客 文庫
最近訪問板塊 發(fā)新帖
查看: 4414 | 回復(fù): 1
打印 上一主題 下一主題

[JavaScript] 使用 Polymer 構(gòu)建你的前端應(yīng)用 [復(fù)制鏈接]

論壇徽章:
0
跳轉(zhuǎn)到指定樓層
1樓 [收藏(0)] [報告]
發(fā)表于 2015-03-03 11:53 |只看該作者 |倒序瀏覽
使用 Polymer 構(gòu)建你的前端應(yīng)用

初識
Polyme 是 Google I/O 201 發(fā)布的一個新的  Web UI  框架。 Polymer 的核心原則是  Everything is an element 。它是一款實用、基于事件驅(qū)動、封裝性和互操作性強(qiáng)的  Web UI  開發(fā)框架。

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


安裝 Polymer

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

Bower 安裝，推薦使用此方法安裝。如果您對 bower 不熟悉，可以自行 Google 了解。如果已經(jīng)安 bower ，可以使用命令直接安裝： bower install --save Polymer/polymer
直接下載 zip 包， zip下載地址 。
GitHub Polymer 源碼，Polymer鏈接。

構(gòu)建自己的 Polymer 應(yīng)用

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

1. 引入 Polymer  核心組件， polymer.html
2. 使用 <polymer-element> 聲明自定義元素

下面例子，將創(chuàng)建一個名字為  my-element  的元素：
  1. <link rel="import" href="../bower_components/polymer/polymer.html">
  2. <polymer-element name="my-element">
  3.     <template>
  4.         <span>This is element content</span>
  5.     </template>
  6.     <script>
  7.       Polymer({ ready: function() {
  8.         //...
  9.       }})
  10.     </script>
  11. </polymer-element>
復(fù)制代碼
Polyme 元素主要由倆部分構(gòu)成, <template> 和 <script> ,其中 <template> 是 Polymer 元素的 HTML 模板， <script> 是模板對應(yīng)的  javascript 代碼。
注意到 <script> 標(biāo)簽中的 Polymer 構(gòu)造方法， Polymer 構(gòu)造方法是一個對 document.registerElement 的包裝，并且提供一些特殊的功能，比如數(shù)據(jù)綁定和事件映射， Polymer 構(gòu)造方法接受一個對象參數(shù)，定義該元素的 prototype 。
有些  Polymer 元素并不需要  javascript  代碼，可以使用 noscript 屬性聲明：
  1. <polymer-element name="my-element" noscript>
  2. ...
  3. </polymer-element>
復(fù)制代碼
你可以在這里查看 Polymer 的 API 。

使用自定義的 Polymer 元素
定義好自己的  Polymer 元素之后，就可以通過 import 的方式引入它（通過 import 引入的文件，即使引入多次，瀏覽器也只會請求一次。）。在  HTML 代碼中引入自定義的元素并且使用它。首先需要引入  webcomponents.js 依賴。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="webcomponents.js"></script>
  5. <link rel="import" href="/elements/my-element/my-element.html">
  6. </head>
  7. <body>
  8. <my-element></my-element>
  9. </body>
  10. </html>
復(fù)制代碼
遵循 Everything is an element 的原則，在 HTML 頁面中，我們會很少看到需要寫一些  javascript 代碼，這樣就使得 HTML 文件代碼看起來很清爽。

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

更多功能

Shadow DOM

在 Polymer 可以使用 Shadow DOM 從模板中分離視圖內(nèi)容，創(chuàng)建一個使用 Shadow DOM 的 template 十分簡單，使用  <content></content> 來選擇需要替換的元素即可。
  1. <polymer-element name="my-element" noscript>
  2. <template>
  3. <span>This is content: </span>
  4. <content select="q"></content>
  5. </template>
  6. </polymer-element>
復(fù)制代碼
使用的時候，只需要在`Polymer`標(biāo)簽內(nèi)部嵌入 Light DOM 。
  1. <my-element>
  2. <q>Hello World</q> <!--Light DOM-->
  3. </my-element>
復(fù)制代碼
布局屬性
Polymer 使用 CSS Flexbo 定義了一系列基礎(chǔ)布局樣式。具體可以點擊這里查看。
只需要簡單的在標(biāo)簽上引入布局屬性就可以輕松使用。
  1. <div horizontal layout>
  2. <div>A</div>
  3. <div>B</div>
  4. <div>C</div>
復(fù)制代碼
模板表達(dá)式
Polymer 支持在模板中使用 {{}} 執(zhí)行 javascript 表達(dá)式，基礎(chǔ)支持有：

  • 標(biāo)示符和路徑。比如： foo  、 match.set.game
  • 數(shù)組訪問。比如： array
  • 非邏輯。比如： !
  • 一元表達(dá)式。比如： +i , -a
  • 二進(jìn)制操作。比如： + , - , * , / , %
  • 比較操作。比如： == , < , > , <= , >= , != , === , !==
  • 邏輯比較。比如: foo && bar , foo || bar
  • 三元表達(dá)式。比如： a ? b : c  
  • 分組。比如：`(a + b) * (c + d)`
  • 字符值 （數(shù)字、字符，null,undefined） 。
  • 數(shù)組和對象。如： [foo, 1] , {id: 1, foo: bar}         
  • 函數(shù)。如： reverse(my_list)


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

  
  • 計算表達(dá)式�？梢灾苯邮褂妙愃�  {{a + b}} 的方式，也可以使用如下方式處理比較復(fù)雜的計算：
  1. <link rel="import" href="../bower_components/polymer/polymer.html">
  2. <polymer-element name="my-element" >
  3. <template>
  4. <span>The result is {{result}}</span>
  5. </template>
  6. <script>
  7. Polymer({
  8. computed: {
  9. result: '1 + 100'
  10. }
  11. })
  12. </script>
  13. </polymer-element>
復(fù)制代碼
  • 表達(dá)式  Scope  詳見  (請到 blog.coding.net 閱讀原文)
  •   Filter  表達(dá)式。使用 {{expression | filterName }} 執(zhí)行 Filter表達(dá)式，跟  Angular 的 Filter 有些類似。詳見 (請到 blog.coding.net 閱讀原文)



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

    • 單模板實例。使用 bind 屬性綁定一個對象到模板實例,詳見 。 (請到 blog.coding.net 閱讀原文)
    1. <template>
    2. <template bind="{{person}}">
    3. He's name is {{name}}.
    4. </template>
    5. </template>
    復(fù)制代碼
    還可以使用 as 為對象創(chuàng)建一個命名空間：
    1. <template>
    2. <template bind="{{person as p}}">
    3. He's name is {{p.name}}.
    4. </template>
    5. </template>
    復(fù)制代碼
    模板迭代。使用`repeat`屬性迭代， 詳見 (請到 blog.coding.net 閱讀原文) ：
    1. <template>
    2. <template repeat="{{user in users}}">
    3. {{user.name}}
    4. </template>
    5. </template>
    復(fù)制代碼
    • 條件綁定

    使用 if 屬性有條件的綁定模板實例：
    1. <template>
    2. <template if="{{conditional}}">
    3. The conditional is true
    4. </template>
    5. </template>
    復(fù)制代碼
    Polymer 不僅提供以上的方式綁定數(shù)據(jù)，而且提供了很多其他的方法，使得模板之間的復(fù)用十分便利。更多關(guān)于數(shù)據(jù)綁定可以查看官網(wǎng) API

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

    ---

    Coding 是個云端開發(fā)協(xié)作平臺，極簡的一站式開發(fā)服務(wù)包括了項目協(xié)作，代碼托管，質(zhì)量檢測，演示部署，代碼在線閱讀等功能。Coding 官方博客 ( blog.coding.net)，是團(tuán)隊小伙伴在開發(fā)過程中的學(xué)習(xí)與分享，如需轉(zhuǎn)載，請注明出處與作者哦 !

論壇徽章:
1
2015小元宵徽章 日期:2015-03-06 15:58:18
2樓 [報告]
發(fā)表于 2015-03-05 11:53 |只看該作者
提示: 作者被禁止或刪除 內(nèi)容自動屏蔽
您需要登錄后才可以回帖 登錄 | 注冊

本版積分規(guī)則 發(fā)表回復(fù)

  

北京盛拓優(yōu)訊信息技術(shù)有限公司. 版權(quán)所有 京ICP備16024965號-6 北京市公安局海淀分局網(wǎng)監(jiān)中心備案編號：11010802020122 niuxiaotong@pcpop.com 17352615567
未成年舉報專區(qū)
中國互聯(lián)網(wǎng)協(xié)會會員  聯(lián)系我們：huangweiwei@itpub.net
感謝所有關(guān)心和支持過ChinaUnix的朋友們 轉(zhuǎn)載本站內(nèi)容請注明原作者名及出處

清除 Cookies - ChinaUnix - Archiver - WAP - TOP