住房与建设部网站 2018 128号,南宁江南区网站制作价格,二次开发源代码,有经验的永州网站建设大前端 东南水乡 一叶小舟拂过水面 船上两位大侠把酒言欢 一位是玉真人 另一位是张真人 两人喝到开心处 变作对联起来 上联 前端研究#xff0c;研究个屁~ 下联 前端设计#xff0c;设计个屁~ 横批 前端sb特色 polymer 提供创建自定义和标准dom元素类似的自定义元素功能 可以… 大前端 东南水乡 一叶小舟拂过水面 船上两位大侠把酒言欢 一位是玉真人 另一位是张真人 两人喝到开心处 变作对联起来 上联 前端研究研究个屁~ 下联 前端设计设计个屁~ 横批 前端sb 特色 polymer 提供创建自定义和标准dom元素类似的自定义元素功能 可以使用constructor或者document.createElement创建元素可以配置元素attributes或properties可以在标签内部定义一些dom可以对属性和属性的变化处理可以有一些默认的样式,在外部修内部样式可以提供方法允许你来操纵它的内部状态一个基本的polymer元素定义如下: dom-module idelement-namestyle/* CSS rules for your element *//styletemplate!-- local DOM for your element --div{{greeting}}/div !-- data bindings in local DOM --/template
/dom-modulescript// element registrationPolymer({is: element-name,// add properties and methods on the elements prototypeproperties: {// declare properties for the elements public APIgreeting: {type: String,value: Hello!}}});
/script 像普通标签一样使用 element-name/element-name !-- divhello!/div -- 注册和生命周期 注册自定义元素 使用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() {!-- access a local DOM element by ID using this.$ --this.$.header.textContent Hello!;
} 元素初始化顺序 created callbacklocal DOM constructeddefault values setready callbackcustom 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 link relimport hreffun-mixin.htmlscriptPolymer({is: my-element,mixins: [FunMixin],created: function() {this.funCreatedCallback();}});
/script 类样式的构造函数 如果你想实现你的元素但并不注册他你可以使用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 bCustom Element!/b;}}); keydetailstype(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 映射成 firstnameattribute names 带破折号 转换成 驼峰命名 property namses 比如first-name 映射成 firstNameproperty names 映射成 attribute names时一致 反序列化属性 属性最好设置type scriptPolymer({is: x-custom,properties: {user: String,manager: {type: Boolean,notify: true}},attached: function() {// renderthis.innerHTML Hello World, my user is (this.user || nobody) .\n This user is (this.manager ? : not) a manager.;}});/scriptx-custom userScott manager/x-custom
!--
x-customs innerHTML becomes:
Hello World, my user is Scott.
This user is a manager.
-- attributes dash-case 风格 转换成 camel-case 风格 scriptPolymer({is: x-custom,properties: {userName: String}});/scriptx-custom user-nameScott/x-custom
!-- Sets x-custom.userName Scott; -- 配置默认属性值 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 dompolymer支持创建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 idx-footemplateI am x-foo!/template
/dom-modulescriptPolymer({is: x-foo});
/script scoped styling dom-module idmy-elementstyle: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;}/styletemplatediv idchild-elementIn local Dom!/divdiv classcontent-wrappercontent/content/div/template/dom-modulescriptPolymer({is: my-element});/script Styling distributed children (::content) 在这个例子,这个规则 .content-wrapper ::content .special 翻译为 .content-wrapper special Automatic node finding 内部元素使用id声明 使用this.$ hash选择 DOM (re-)distribution
