2019年12月31日 星期二

擴充 jQuery 的工具函數

之前測試過 jQuery 內建的工具函數, 例如 $.each(), $.grep() 等好用函數, 但這些函數的功能並不能滿足所有的應用, jQuery 提供了兩種方法可讓我們自行擴充工具函數. 此篇測試參考了下面兩本書中的範例 :

超詳解 jQuery 開發範例大全 (陳佳新譯, 悅知文化) 10-2-2 節
打造 jQuery 網頁風暴 (張子秋, 佳魁) 10.5 節


在之前的 jQuery 測試中, 如果要在網頁中顯示執行結果有下列方法 :
  1. 使用 alert() 函數
  2. 使用 document.write() 直接覆蓋 body 原內容
  3. 使用 console.log() 輸出到瀏覽器的控制台 
  4. 在網頁中設置一個 div 或 p 元素, 以選擇器選取後呼叫 html() 輸出
第一種方法會彈出是顯示, 資料多時要捲動視窗不方便; 第二種方法每一次呼叫 document.write() 都會覆蓋前一次呼叫輸出之內容, 必須將輸出字串串接後一次輸出; 第三種方法則需要在網頁中額外放一個元素.

下面用擴充工具函數方式只要在網頁中添加程式碼即可呼叫 $.print() 直接於網頁中輸出訊息.


1. 利用 Javascript 本身的擴充功能 :

只要在網頁中加入下列擴充函數即可 :

$.print=function(msg){$("<div></div>").html(msg).appendTo('body');};

此程式先建立一個空的 div 元素, 將其內容設為要顯示的資料後呼叫 appendTo() 將 div 插入到 body 元素後面.

例如 :


範例 1 : 擴充 Javascript 函數來輸出訊息 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
    </style>
  </head>
  <body>
  <input type="button" id="Hello" value="Hello">
  <script> 
    $(function(){
      $.print=function(msg){$("<div></div>").html(msg).appendTo('body');};
      $("#Hello").click(function(){
        $.print("Hello World");
        });
      });
  </script>
  </body>
</html>

此例按下 Hello 按鈕就會呼叫 $.print() 函數於網頁中輸出訊息, 結果如下 :




2. 使用 $.extend() 工具函數擴充 : 

jQuery 本身有一個 $.extend() 工具函數可用來擴充自訂的工具函數 :

$.extend({functionName: function() {}});

以上面在網頁中輸出訊息為例, 擴充函數如下 :

      $.extend({print: function(msg){
        $("<div></div>").html(msg).appendTo('body');
        }});

此處 functionName 為 print, 表示呼叫時要用 $.print(), 上面的範例可以改寫為如下程式 :


範例 2 : 使用 $extend() 擴充工具函數來輸出訊息 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
    </style>
  </head>
  <body>
  <input type="button" id="Hello" value="Hello">
  <script> 
    $(function(){
      $.extend({print: function(msg){
        $("<div></div>").html(msg).appendTo('body');
        }});
      $("#Hello").click(function(){
        $.print("Hello World");
        });
      });
  </script>
  </body>
</html>

結果與上面範例 1 相同.

沒有留言 :