聚合物克隆对象答案

【问题标题】：Polymer Clone Objects聚合物克隆对象
【发布时间】：2015-02-19 06:16:40
【问题描述】：

我们如何在 Polymer 中克隆一个对象？

例子

this.colorsAsc.push({color: 'red'});
this.colorsDesc = this.colorsAsc.reverse();

this.colorsDesc[0].color = 'blue'; // Both will be blue doing this

我可以在这么多功能中做到这一点What is the most efficient way to deep clone an object in JavaScript?，但我想知道 Polymer 中是否有办法做到这一点？

Angular 做到了https://docs.angularjs.org/api/ng/function/angular.copy

【问题讨论】：

您可以使用lodash。
Polymer 不是一个完整的框架，它是一个 Web 组件库。因为它，它没有原生的深拷贝功能（因为它没有很多原生功能）。正如@MohammadWalid 所说，例如lodash 是一个很好的解决方案。
最后我做了不同的事情，所以我不再需要这个了。谢谢大家。
@Shadowbob 您能否分享您的解决方案，因为很多人可能需要像我这样的您背后的帮助。谢谢
@발렌탕 你可以看到我在github.com/hwebb/hwebb-load-bar上做了什么。但这适用于 Polymer 0.5，而不是 Polymer 1.0，我还不需要它，所以没有检查是否有其他方法。

标签： object clone polymer

【解决方案1】：

通过 Polymer 克隆实用程序

完整实现：

  (function(callBackFn) {
      Polymer({

          //Component Name
          is: 'my-cloner',

          properties: {
              //Declare a published property 
              cloneableObject: { //Placeholder for Object to be cloned 
                  reflectToAttribute: true,
                  type: Object,
                  notify: true
              }
          },

          attached: function() {
              //Hide if this component got attached
              this.hidden = true;
          },

          getClone: function(incomingcloneableObject) { //Will be called to get the Clone

              this.cloneableObject = this.cloneableObject || incomingcloneableObject;

              switch (typeof this.cloneableObject) {
                  case "undefined":
                      return null;
                      break;
                  case "object":
                      var localClone = this.cloneNode();
                      return (localClone.cloneableObject);
                      break;
                  case "boolean":
                      return new Boolean(this.cloneableObject).valueOf();
                      //Other possible way 
                      //return(this.cloneableObject ? true : false);
                      break;
                  case "number": //NaN is taken care of 
                      return new Number(this.cloneableObject).valueOf();
                      //Other possible way
                      //return(this.cloneableObject * 1);
                      break;
                  case "string":
                      return new String(this.cloneableObject).valueOf();
                      //Other possible way
                      //return(this.cloneableObject + '');
                      break;
                  default:
                      return null;
              }
          }
      });

      //adding Util into window
      callBackFn();

  })(function() {
      window.cloneUtil = document.createElement('my-cloner');
  });
  //To use this util
  //window.cloneUtil.getClone();

【讨论】：

【解决方案2】：

您可以尝试以下技巧：

this.colorsDesc = JSON.parse(JSON.stringify(this.colorsAsc.reverse());

【讨论】：

【解决方案3】：

我有the same question here，我终于也找到并发布了答案。

短版：

newElement = element.cloneNode(true);
for(var i in element.properties) {
        newElement[i] = element[i]
      }

【讨论】：

如果您尝试在顶级元素中克隆轻量级 DOM 元素，这将不起作用。