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

Question

有人能讓我對聚合物，x標簽和香草js之間的區別有所了解嗎？

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

Answer 1

VanillaJS僅意味着在純JS中使用沒有任何框架/包裝器的Web組件。

您必須注冊自定義元素，標記元素並自行處理數據綁定。

x-tag和Polymer為Web組件提供了一個方便且明確的包裝，大大減少了樣板代碼。

恕我直言， Polymer庫提供了最具說服力的方法（關於數據綁定，定義模板等）

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

這就是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>

Answer 2

Web Components是瀏覽器中的本機實現。 Polymer是一個庫，它作為Web Components技術之上的一個非常薄的層。 X-Tag是另一個更薄的庫，因為它只依賴於四種Web組件技術中的一種。

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