聚合物與x-tag和香草js之間的比較

Question

任何人都可以給我一些關於聚合物，x-tag和香草js之間區別的想法嗎？

我在我的項目中使用過聚合物，但我想要比較聚合物，x-tag和香草js。

Answer 1

VanillaJS只意味着在純JS中沒有任何框架/包裝的情況下使用web組件。

您必須註冊您的自定義元素，衝出元素並自己處理數據綁定。

x-tag和Polymer都提供了一個方便和周到的Web組件封裝，大大減少了樣板代碼。

恕我直言Polymer庫提供了最declerative方法（有關數據綁定，定義模板等）

這是怎麼看起來像X-標籤：

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 
    } 
    } 
}); 

這是怎麼回事看起來像聚合物：

<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> 

Answer 2

Web Components是瀏覽器中的本地實現。 聚合物是一種庫，它充當Web組件技術之上的一個非常薄的層。 X-Tag是另一個更薄的庫，因爲它僅依賴於四種Web組件技術之一。

我寫過一篇文章：http://pascalprecht.github.io/2014/07/21/polymer-vs-x-tag-here-is-the-difference/