聚合物与x-tag和香草js的比较

comparison between polymer and x-tag and vanilla js

本文关键字：js 比较 香草 x-tag 聚合物      更新时间：2023-09-26

谁能给我一些关于聚合物，x-tag和香草js的区别的想法?

我在我的项目中使用了聚合物，但我想比较聚合物，x-tag和香草js。

VanillaJS只意味着在纯JS中使用web组件而不使用任何框架/包装器。

您必须注册自定义元素，冲压元素并自己处理数据绑定。

x-tag和Polymer都为web组件提供了一个方便而又固执己见的包装器，大大减少了样板代码。

IMHO 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-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是浏览器中的本机实现。Polymer是一个库，它是Web组件技术之上的一个非常薄的层。X-Tag是另一个更薄的库，因为它只依赖于四种Web组件技术之一。

我写过一篇关于这个的文章:http://pascalprecht.github.io/2014/07/21/polymer-vs-x-tag-here-is-the-difference/

相关文章：