javascript - comparison between polymer and x-tag and vanilla js - Stack Overflow

admin管理员组

文章数量:1429905

can any one give me some idea about difference between polymer,x-tag and vanilla js ?

I have used polymer in my project, but i want parison of polymer,x-tag and vanilla js.

can any one give me some idea about difference between polymer,x-tag and vanilla js ?

I have used polymer in my project, but i want parison of polymer,x-tag and vanilla js.

• javascript
• polymer
• x-tag

Share Improve this question Follow asked Jun 30, 2014 at 9:38 Nirav AlagiyaNirav Alagiya 72211 gold badge55 silver badges1919 bronze badges 2

• Did you tried to google? – Java_User Commented Jun 30, 2014 at 9:39
• @Java_User Yes, i have tried but don't get any clear parison. Thanks for reply. – Nirav Alagiya Commented Jun 30, 2014 at 9:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

VanillaJS only means using web-ponents without any framework/wrapper in pure JS.

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-ponents that greatly reduce boilerplate code.

IMHO the Polymer library provides the most declerative approach (regarding data-binding, defining templates, etc)

This is how it looks like with x-tag:

xtag.register('x-accordion', {
  // extend existing elements
  extends: 'div',
  lifecycle:{
    created: function(){
      // fired once at the time a ponent
      // is initially created or parsed
    },
    inserted: function(){
      // fired each time a ponent
      // 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-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. Polymer is a library that act as a very thin layer on top of the Web Components technologies. X-Tag is another library that is even thinner because it only relies on one of the four Web Components technologies.

I've written an article about that: http://pascalprecht.github.io/2014/07/21/polymer-vs-x-tag-here-is-the-difference/

本文标签： javascriptcomparison between polymer and xtag and vanilla jsStack Overflow