小朱® 的技術隨手寫

今天為了要處理 JavaScript 的 HTML encoding 與 decoding 的問題，上網去找了一下，發現在 jQuery 中有這樣的方法可以用：

// encoding HTML $("<div />").text("<b>HTML</b>").html(); // decoding HTML $("<textarea />").html(&lt;b&gt;HTML&lt;/b&gt;").val();

不過每次都要這樣寫太麻煩了，索性就來試寫一下 jQuery 的 extend 吧。後來我用了這樣的方法：

(function($) { $.fn.extend( HTMLEncode: function(stringForEncode) { return $("<div/>").text(stringForEncode).html(); }, HTMLDecode: function(stringForDecode) { return $("<textarea/>").html(stringForDecode).val(); } ); })(jQuery);

然後用這樣的方式呼叫，可以正常工作：

alert($().HTMLEncode("<b>Student Movie:</b><br /><embed src='movie.wmv'><noembed>Unsupported EMBED tag</noembed></embed>")); alert($().HTMLDecode($().HTMLEncode("<b>Student Movie:</b><br /><embed src='movie.wmv'><noembed>Unsupported EMBED tag</noembed></embed>")));

以上是 jQuery Plug-in 的作法，其實很簡單，只要使用：

(function($) { })(jQuery);

來包在你要放的 JavaScript 函數，然後使用 $.fn.extend() 來註冊你的物件的成員們（通常是方法），就可以完成一個最簡單的 Plug-in 了。

不過後來想想，不如把它放到 jQuery 命名空間中，不是更好用嗎？所以我改用這樣：

// This code cannot work. jQuery.fn.extend({ HTMLEncode: function(stringForEncode) { return $("<div/>").text(stringForEncode).html(); }, HTMLDecode: function(stringForDecode) { return $("<textarea/>").html(stringForDecode).val(); } });

但在測試時卻說 "物件不支援此屬性或方法"，當場傻眼，因為很多網路上的說明都是說 jQuery.fn.extend()... 後來我查了一下 jQuery 的官方網站，發現有個 jQuery.extend() 可以用，後來就改成：

// This code can work fine. jQuery.extend({ // remove "fn" HTMLEncode: function(stringForEncode) { return $("<div/>").text(stringForEncode).html(); }, HTMLDecode: function(stringForDecode) { return $("<textarea/>").html(stringForDecode).val(); } });

再以下列程式測試，果然正常：

alert($.HTMLEncode("<b>Student Movie:</b><br /><embed src='movie.wmv'><noembed>Unsupported EMBED tag</noembed></embed>")); alert($.HTMLDecode($.HTMLEncode("<b>Student Movie:</b><br /><embed src='movie.wmv'><noembed>Unsupported EMBED tag</noembed></embed>")));

以上就是小弟我的 jQuery extend 初體驗~謝謝收看~。