8 簡易 jQuery 套件

套件規則

只要透過 $.fn 就可以寫一個基於 jquery 專用外掛。

先參考 IIFE(Immediately Invoked Function Expression) 範例：

(function(a){
  alert(a);
})(5);

步驟一：在 IIFE 裡面寫

(function(){
  // code here...
})();

步驟二：在 IIFE 裡代入 jQuery 參數，這是為了避免跟其它函式庫有命名上的衝突，jQuery 代入，由 $ 變數承接：

(function($){
  // code here...
})(jQuery);

步驟三：在 $.fn 繼續撰寫基於 jQuery 相關的自訂程式，並回傳 jQuery 物件

(function($){

  $.fn.reverseText = function(params){
    // 其它原始碼...
    return this;
  };
  
})(jQuery);

自訂 externalLinkIcon 套件

自訂 .externalLinkIcon()，如果 <a> 標籤有 target="_blank" 的話，在標籤裡的最後面，加上一個 icon 做示意。

icon 路徑：

https://alldata.sgp1.digitaloceanspaces.com/images/external_link.png

提供 html：

<a href="https://tw.yahoo.com">yahoo 連結</a>
<br>
<a href="https://www.google.com" target="_blank">google 開新分頁連結</a>
<br>
<a href="https://www.pinterest.com/" target="_blank">pinterest開新分頁連結</a>

提供 css：

.icon_external{
  width: 12px;
  margin-left: 2px;
}

完成如下圖，有 target="_blank" 的連結，右邊多了小 icon：

參考作法：