在插件外部访问和更改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函数的对象。