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

有谁能告诉我聚合物、x-tag和香草js之间的区别吗

---

我在我的项目中使用了polymer，但我想比较polymer、x-tag和vanilla 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>

聚合物（“聚合物手风琴”{
已创建：函数（）{…}，
就绪：函数（）{…}，
附件：函数（）{…}，
domReady:函数（）{…}，
分离：函数（）{…}，
attributeChanged:函数（attrName、oldVal、newVal）{
},
切换：函数（）{…}，
获取触发器（）{}，
设置触发器（值）{}，
nextToggler:function（）{}，
previousToggler:function（）{}，
});

Web组件是浏览器中的本机实现。 Polymer是一个在Web组件技术之上充当非常薄的层的库。 X-Tag是另一个更薄的库，因为它只依赖于四种Web组件技术中的一种

---

我写了一篇关于这方面的文章：

你试过谷歌吗？@Java\u User是的，我试过了，但没有得到任何明确的比较。谢谢回复。当我试图在你发布的链接中查看你的博客文章时，我得到了“404页面未找到”嘿！是的，这是因为这篇文章已经有5年多的历史了，不再代表今天的景观了。我从来没有使用过聚合物，正在尝试确定它是否还有用途。从历史的角度来看它的好处，然后将其与现代用途和观点进行比较，可能会有所帮助。