对象引用的问题

Question

如下问题：

我想建立与jQuery一点剪贴板。我尝试了几次，用$（object）.data（'id'，objectToStore）将对象存储在javascript对象的数据中。对象可以存储在那里，工作正常。问题是如果我尝试插入存储的数据，我只能得到该对象的引用。所以当我编辑一个副本时，其他人也会改变。我需要一种方法将html代码复制到一个全局变量中，然后从存储的代码中单独插入代码。希望你们明白我的问题！谢谢！

下面的代码：

对象

/** 
    * Objectdefinition 
    */ 
Clipboard = { 

    //PROPERTIES 
     itemcount: 0,   
     maxItems:10,    

     //Templates 
     tplClipboard:"<div id='GUI_clipboard'><a href='' title='clear&nbsp;clipboard' id='GUI_clipboardClose' class='gritter-close'></a><ul></ul></div>", 
     tplItem:"<li><a href='' class='[[type]] clipboardItem' id='[[id]]'><span class='hidden'>[[text]]</span></a></li>", 
     tplItemHover:"<div class='GUI_clipboard_itemhover' style='width:[[offsetW]]px;height:[[offsetH]]px'><a href='' title='delete&nbsp;container' class='GUI_containerDelete'><span class='hidden'>Delete</span></a></div>", 

     //Clipboarditem 
     item:{ 
      id:null, 
      type:null, 
      content:'', 
      offsetWidth:0, 
      offsetHeight:0 
     }, 

    //FUNCTIONS 
     addItem:function(id,type,text,content,offsetH,offsetW){ 
      if(this.itemcount>=this.maxItems){ 
       return $.gritter.add({ 
        title:'Clipboard', 
        text:'You cannot store more than '+ this.maxItems +' Elements!', 
        image:'warning', 
       }); 
      } 


      var item = {}; 
       item.id=id, 
       item.type=type, 
       item.content=content, 
       item.offsetHeight=offsetH, 
       item.offsetWidth= offsetW; 


      this.verify(); 


      if (!this.checkRed(id)) { 


       this.itemcount++; 


       var tmp = this.tplItem; 


       tmp = this.str_replace(['[[type]]', '[[id]]', '[[text]]'], [type, id, text], tmp); 

       $('#GUI_clipboard ul').append(tmp); 
       var $item = $('a#'+id); 
       var number = this.itemcount; 
       $item.hide().fadeIn('slow',function(){ 

        Clipboard.redraw(); 
       }); 


       this.saveItem(item); 


       var config = { 
        over:function(){Clipboard.hoveringItem($('a',this))}, 
        out:function(){Clipboard.unhoveringItem($('a',this))}, 
        timeout:1 
       }; 
       $item.parent().hoverIntent(config); 


       $item.draggable({ 
        connectToSortable:'.column',       
        helper:'clone',          
        revert:'invalid',         
        cursor:'move',          //Cursor 
        start:function(){ 
         $('body').unbind('mouseover',Content.showContainerMenu); 
         $('body').unbind('mouseout',Content.hideContainerMenu); 
         $('#GUI_clipboard li').trigger('mouseout'); 
        }, 
        stop:function(){ 
         $('body').bind('mouseover',Content.showContainerMenu); 
         $('body').bind('mouseout',Content.hideContainerMenu); 
        } 
       }); 
      }else{ 

       $('#'+id,'#GUI_clipboard').effect("bounce", { times:3 }, 300); 
      } 
     }, 


     saveItem:function(item){    
      $(this).data(item.id,item); 
     }, 


     removeItem: function(id){ 
      $('#GUI_clipbaord').data(id,null); 
      $('a[id='+id+']','#GUI_clipboard').parent().slideUp('slow',function(){$(this).remove()}); 
      this.itemcount--; 

      if(this.itemcount==0)this.remove(); 
     }, 


     verify:function(){ 
      if($('#GUI_clipboard').length == 0){ 
       $('body').append(this.tplClipboard);      

       $('#GUI_clipboard')       
        .css({ 
         top:$(window).height()/2+'px'      
        }) 
        .animate({           
         left:0 
        }).children('.gritter-close').capture({cssClass:'GUI_clipboardClose'});  
      } 
     }, 


     checkRed:function(id){ 
      if($('a[id='+id+']').length==0)return false; 
      else return true; 
     }, 


     remove:function(){ 
      $('#GUI_clipboard').animate({            
       left:'-60px' 
      },function(){ 
       $(this).remove(); 
      }); 
      this.itemcount=0; 
     }, 


     hoveringItem:function(el){ 

      var item = $(this).data($(el).attr('id')), 
       content=item.content, 
       oH=item.offsetHeight, 
       oW=item.offsetWidth, 


      tmp = this.tplItemHover;     
      tmp = this.str_replace(['[[offsetW]]', '[[offsetH]]'], [oW,oH], tmp); 


      $(el).after(tmp); 
      var $element = $('.GUI_clipboard_itemhover').append(content).prepend("<div class='GUI_clipboardArrow'></div>"); 


      $element.position({ my: 'left center', at: 'right center', of: $(el),offset:'14 0',collision:'none fit'}); 
      $('.GUI_clipboardArrow',$element).position({ my: 'left center', at: 'right center', of: $(el),offset:'-2 0',collision:'none fit'}); 


      $('#'+item.id,'#GUI_clipboard').removeClass('borderContainer editable'); 


      $('a.GUI_containerDelete',$element).click(function(){ 
       Clipboard.removeItem($element.children('.container').attr('id')); 
       $element.fadeOut().remove(); 
      }).capture({cssClass:'GUI_clipboardItemClose'}); 

     }, 


     unhoveringItem:function(el){ 
      //Preview entfernen 
      $(el).next().remove(); 
     }, 


     redraw:function(){ 
      if(this.itemcount>1){ 
       $('#GUI_clipboard').animate({ 
        top: '-=20px'      
       }); 
      } 
     }, 


     str_replace: function(search, replace, subject, count) { 

      var i = 0, j = 0, temp = '', repl = '', sl = 0, fl = 0, 
       f = [].concat(search), 
       r = [].concat(replace), 
       s = subject, 
       ra = r instanceof Array, sa = s instanceof Array; 
      s = [].concat(s); 
      if (count) { 
       this.window[count] = 0; 
       } 

      for (i=0, sl=s.length; i < sl; i++) { 
       if (s[i] === '') { 
        continue; 
       } 
       for (j=0, fl=f.length; j < fl; j++) { 
        temp = s[i]+''; 
        repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0]; 
        s[i] = (temp).split(f[j]).join(repl); 
        if (count && s[i] !== temp) { 
         this.window[count] += (temp.length-s[i].length)/f[j].length;} 
       } 
      } 
      return sa ? s : s[0]; 

     } 
} 

在该对象！正如你看到的，当我将鼠标悬停在一个元素上时，Object从内部存储中获取它。但是，当我与下面进入内容领域插入对象

var item = $(Clipboard).data($(ui.sender).attr('id')), 
         newItem = $.extend(true, {}, item); 
         content=newItem.content; 

，然后悬停剪贴板拖动它，并重新插入它的含量 - 面积对象（HTML代码）消失，被插入的预览剪贴板。

任何想法！

请！

Answer 1

得到了我自己的解决方案！感谢来自Leigh Kaszick的杰出JavaScript教程：“面向对象JavaScript的基础知识”。检查出来：http://net.tutsplus.com/tutorials/javascript-ajax/the-basics-of-object-oriented-javascript/

字面对象总是被引用，而功能不是;）这就是诀窍。

文本对象：

var Storage = { 
    id:'one', 
    content:'blah' 
}; 

功能对象：

function Storage(id,content) = { 
     this.id=id; 
     this.content:content; 
} 
var myStorage = new Storage('one','blah'); 

为了解决我的问题，我每次当我通过数据复制到剪贴板时创建的存储对象的新实例。它的工作原理！ ;）