例えば、WebアプリのUIを作っていて、特定のタグ要素群を纏めてディープコピーしたいことも多々あるだろう。しかし、JavaScriptの標準APIではそれが実現出来ないようなので、今回はdankogai氏が作成した clone.js を利用させてもらった。
以下はサンプルコードだ。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script type="text/javascript" src="clone.js"></script> <script type="text/javascript"><!-- $(function() { // ディープコピーボタンクリック $("#deepcopyBtn").click(function(){ // クローン生成 clonedTag = $("#div_src p").clone(); // 貼り付け $("#div_dst").append(clonedTag); }); // シャローコピーボタンクリック $("#shallowcopyBtn").click(function(){ // タグの参照を取得 tag = $("#div_src p"); // 貼り付け(というか移動) $("#div_dst").append(tag); }); }); --></script> <p>↓コピー元</p> <div id="div_src"> <p ><b>ほげ。</b></p> </div> <p>↓コピー先</p> <div id="div_dst"></div> <button id="deepcopyBtn">ディープコピー</button> <button id="shallowcopyBtn">シャローコピー</button>
実際に試してみよう。
↓コピー元
ほげ。
↓コピー先
clone.js を読み込み、object.clone() するだけ。
このように clone.js を使えば、かくも簡単にオブジェクトのクローンが実現できるのだ。dankogai氏に感謝である。
それにしても、JavaScriptの標準APIに clone が実装されていないのが不思議でならない。