當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

polymer web componets 大前端

發布時間：2023/12/19 HTML 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 polymer web componets 大前端小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

大前端

東南水鄉一葉小舟拂過水面船上兩位大俠把酒言歡一位是玉真人另一位是張真人兩人喝到開心處變作對聯起來上聯前端研究，研究個屁~ 下聯前端設計，設計個屁~ 橫批前端sb

特色

polymer 提供創建自定義和標準dom元素類似的自定義元素功能

可以使用constructor或者document.createElement創建元素
可以配置元素attributes或properties
可以在標簽內部定義一些dom
可以對屬性和屬性的變化處理
可以有一些默認的樣式,在外部修內部樣式
可以提供方法允許你來操縱它的內部狀態

一個基本的polymer元素定義如下:

<dom-module id="element-name"><style>/* CSS rules for your element */</style><template><div>{{greeting}}</div> </template> </dom-module><script>// element registrationPolymer({is: "element-name",// add properties and methods on the element's prototypeproperties: {// declare properties for the element's public APIgreeting: {type: String,value: "Hello!"}}}); </script>

像普通標簽一樣使用

<element-name></element-name>

注冊和生命周期

注冊自定義元素

使用polymer注冊一個元素，使用is屬性指明要注冊元素的名稱

// register an element MyElement = Polymer({is: 'my-element',// See below for lifecycle callbackscreated: function() {this.innerHTML = 'My element!';}});// create an instance with createElement: var el1 = document.createElement('my-element');// ... or with the constructor: var el2 = new MyElement();

polymer function 將元素注冊到瀏覽器上并且返回一個創建新實例的元素構造函數

定義一個自定義構造函數

polymer function返回一個基本的構造函數，可用于實例化自定義元素，如果你想要向構造函數傳遞參數配置新元素，您可以指定一個自定義構造函數原型。

MyElement = Polymer({is: 'my-element',constructor: function(foo, bar) {this.foo = foo;this.configureWithBar(bar);},configureWithBar: function(bar) {...}});var el = new MyElement(42, 'octopus');

自定義函數只當使用構造函數時調用，作為html標記解析時不調用
自定義函數在元素初始化后調用

擴展html元素

MyInput = Polymer({is: 'my-input',extends: 'input',created: function() {this.style.border = '1px solid red';}});var el1 = new MyInput(); console.log(el1 instanceof HTMLInputElement); // truevar el2 = document.createElement('input', 'my-input'); console.log(el2 instanceof HTMLInputElement); // true

回調生命周期

MyElement = Polymer({is: 'my-element',created: function() {console.log(this.localName + '#' + this.id + ' was created');},attached: function() {console.log(this.localName + '#' + this.id + ' was attached');},detached: function() {console.log(this.localName + '#' + this.id + ' was detached');},attributeChanged: function(name, type) {console.log(this.localName + '#' + this.id + ' attribute ' + name +' was changed to ' + this.getAttribute(name));}});

準備回調和元素初始化

ready: function() {this.$.header.textContent = 'Hello!'; }

元素初始化順序

created callback
local DOM constructed
default values set
ready callback
custom constructor (if any)
attached callback

注冊回調

Polymer.Base also implements registerCallback, which is called by Polymer() to allow Polymer.Base to supply a layering system for Polymer features.

標簽靜態屬性

如果一個自定義標簽需要標簽上出現attributes要在hostAttrbuites下寫值為true會被轉變為空
false 該屬性不會添加

mixins屬性

fun-mixin.html

FunMixin = {funCreatedCallback: function() {this.makeElementFun();},makeElementFun: function() {this.style.border = 'border: 20px dotted fuchsia;';}};});

my-element.html

類樣式的構造函數

如果你想實現你的元素，但并不注冊他，你可以使用Polymer.class function Polymer.class和Polymer有著相同的屬性配置，設置原型鏈，沒有注冊元素，可以用document.registerElement 注冊。

申明屬性

你可以在你的元素上聲明有哪些properties通過在polymer構造函數原型properties寫
可以聲明那些配置
屬性類型
默認值
屬性改變觀察者
只讀
出發事件
基于別的屬性計算屬性
屬性值改變時跟新相關

Polymer({is: 'x-custom',properties: {user: String,isHappy: Boolean,count: {type: Number,readOnly: true,notify: true}},ready: function() {this.innerHTML = 'Hello World, I am a <b>Custom Element!</b>';}}); keydetails

type	(Boolean,Date,Number,String,Array,Object)
value	(Boolean,Number,String,Function) 默認值
reflectToAttribute	(Boolean)
readyOnly	(Boolean)
notify	(Boolean)
computed	(String)
observer	(String) 屬性觀察者函數名

property name 和 attribute name 映射

當映射 attribute name 到 property names

attribute names 轉換成小寫 property names 比如firstName 映射成 firstname
attribute names 帶破折號轉換成駝峰命名 property namses 比如first-name 映射成
firstName

property names 映射成 attribute names時一致

反序列化屬性

屬性最好設置type

attributes dash-case 風格轉換成 camel-case 風格

配置默認屬性值

properties 的默認值可以再properties對象使用value屬性可以是一個原始值或者一個function的返回值

Polymer({is: 'x-custom',properties: {mode: {type: String,value: 'auto'},data: {type: Object,notify: true,value: function() { return {}; }}}});

屬性更改回調（觀察者）

Polymer({is: 'x-custom',properties: {disabled: {type: Boolean,observer: 'disabledChanged'},highlight: {observer: 'highlightChanged'}},disabledChanged: function(newValue, oldValue) {this.toggleClass('disabled', newValue);this.highlight = true;},highlightChanged: function() {this.classList.add('highlight');setTimeout(function() {this.classList.remove('highlight');}, 300);}});

觀察多個屬性更改

Polymer({is: 'x-custom',properties: {preload: Boolean,src: String,size: String},observers: {'preload src size': 'updateImage'},updateImage: function(preload, src, size) {// ... do work using dependent values}});

觀察更改子屬性

local Dom

我們叫把可以創造和管理的dom叫local dom
polymer支持創建multiple local dom 在支持shadow dom的瀏覽器上 shadow dom用來創建local dom
在其他瀏覽器 polymer通過自定義實現的shadow dom提供local dom

local dom template

使用<dom-module>元素表現local <dom-module>的id元素對應元素 is property在dom-module內放置<template> polymer會自動拷貝模板內容為元素的local dom

<dom-module id="x-foo"><template>I am x-foo!</template> </dom-module><script>Polymer({is: 'x-foo'}); </script>

scoped styling

<dom-module id="my-element"><style>:host {display: block;border: 1px solid red;}#child-element {background: yellow;}/* styling elements distributed to content (via ::content) requires *//* using a wrapper element for compatibility with shady DOM */.content-wrapper > ::content .special {background: orange;}</style><template><div id="child-element">In local Dom!</div><div class="content-wrapper"><content></content></div></template></dom-module><script>Polymer({is: 'my-element'});</script>

Styling distributed children (::content)

在這個例子,這個規則

.content-wrapper ::content > .special

翻譯為

.content-wrapper > special

Automatic node finding

內部元素使用id聲明使用this.$ hash選擇

DOM (re-)distribution

總結

以上是生活随笔為你收集整理的polymer web componets 大前端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： LL-verilog-HDLBitSim
下一篇： Traceback (most rece