[英]comparison between polymer and x-tag and vanilla js
can any one give me some idea about difference between polymer,x-tag and vanilla js ? 有人能让我对聚合物,x标签和香草js之间的区别有所了解吗?
I have used polymer in my project, but i want comparison of polymer,x-tag and vanilla js. 我在我的项目中使用过聚合物,但我想要比较聚合物,x-tag和vanilla js。
VanillaJS only means using web-components without any framework/wrapper in pure JS. VanillaJS仅意味着在纯JS中使用没有任何框架/包装器的Web组件。
You have to register your custom-element, stamping out the element and taking care of data-binding yourself. 您必须注册自定义元素,标记元素并自行处理数据绑定。
Both x-tag
and Polymer
provide a convenient and opinionated wrapper around web-components that greatly reduce boilerplate code. x-tag
和Polymer
为Web组件提供了一个方便且明确的包装,大大减少了样板代码。
IMHO the Polymer
library provides the most declerative approach (regarding data-binding, defining templates, etc) 恕我直言,
Polymer
库提供了最具说服力的方法(关于数据绑定,定义模板等)
This is how it looks like with x-tag: 这是x-tag的样子:
xtag.register('x-accordion', {
// extend existing elements
extends: 'div',
lifecycle:{
created: function(){
// fired once at the time a component
// is initially created or parsed
},
inserted: function(){
// fired each time a component
// is inserted into the DOM
},
removed: function(){
// fired each time an element
// is removed from DOM
},
attributeChanged: function(){
// fired when attributes are set
}
},
events: {
'click:delegate(x-toggler)': function(){
// activate a clicked toggler
}
},
accessors: {
'togglers': {
get: function(){
// return all toggler children
},
set: function(value){
// set the toggler children
}
}
},
methods: {
nextToggler: function(){
// activate the next toggler
},
previousToggler: function(){
// activate the previous toggler
}
}
});
This is how it would look like with Polymer: 这就是Polymer的样子:
<polymer-element name="polymer-accordion" extends="div" on-click="{{toggle}}">
<template>
<!-- shadow DOM here -->
</template>
<script>
Polymer('polymer-accordion' {
created: function() { ... },
ready: function() { ... },
attached: function () { ... },
domReady: function() { ... },
detached: function() { ... },
attributeChanged: function(attrName, oldVal, newVal) {
},
toggle : function() {....},
get togglers() {},
set togglers(value) {},
nextToggler : function() {},
previousToggler : function() {},
});
</script>
</polymer-element>
Web Components is the native implementation in the browsers. Web Components是浏览器中的本机实现。 Polymer is a library that act as a very thin layer on top of the Web Components technologies.
Polymer是一个库,它作为Web Components技术之上的一个非常薄的层。 X-Tag is another library that is even thinner because it only relies on one of the four Web Components technologies.
X-Tag是另一个更薄的库,因为它只依赖于四种Web组件技术中的一种。
I've written an article about that: http://pascalprecht.github.io/2014/07/21/polymer-vs-x-tag-here-is-the-difference/ 我写过一篇关于此的文章: http : //pascalprecht.github.io/2014/07/21/polymer-vs-x-tag-here-is-the-difference/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.