在插件外部訪問和更改jQuery插件變量

Question

我寫了一個小型jQuery插件，它可以查找頁面上輸入形式的任何更改，並在用戶離開頁面時提醒用戶而不保存。

插件看起來是這樣的：

(function ($) { 
    $.extend({ 
     unsaved: function() { 
      var unsaved = false; 

      $("form").find("input").on("change", function() { 
       unsaved = true; 
      }); 

      $("form").on("submit", function() { 
       unsaved = false; 
      }); 

      function unloadPage(){ 
       if (unsaved){ 
        return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?"; 
       } 
      } 
      window.onbeforeunload = unloadPage; 
     } 
    }); 
}(jQuery)); 

我這樣稱呼它：

// Look out for unsaved data 
$.unsaved(); 

不過，我現在加入/使用Ajax刪除一些數據，我將手動喜歡將unsaved標記爲true，以便用戶在嘗試不保存時離開頁面時收到警報。

我想我希望做的是一樣的東西

// Call the plugin as normal 
var unsaved = $.unsaved(); 

// Do some stuff with ajax here 
// ... 

// Manually mark the page as unsaved 
unsaved.markAsUnsaved(); 

我已經盡了各種不同的方式插件中創建一個markAsUnsaved()功能，但不能讓它開始工作。

Answer 1

你必須返回你的markAsUnread功能：

(function ($) { 
    $.extend({ 
     unsaved: function() { 
      var self = this; 
      self.isUnsaved = false; 

      $("form").find("input").on("change", function() { 
       self.isUnsaved = true; 
      }); 

      $("form").on("submit", function() { 
       self.isUnsaved = false; 
      }); 

      function unloadPage(){ 
       if (self.isUnsaved){ 
        return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?"; 
       } 
      } 
      window.onbeforeunload = unloadPage; 
      return { 
       markAsUnsaved: function() { 
        self.isUnsaved = true; 
       }; 
      }; 
     } 
    }); 
}(jQuery)); 

我們使用self爲unsaved插件類的引用，也unsaved布爾變量從插件名稱重命名爲不同的。那麼插件會返回一個包含markAsUnread函數的對象。