具有數據持久性的jQuery插件模式

Question

我正在研究一個jQuery插件，但是我在設計模式方面遇到了一些麻煩，它將jQuery的的默認值和選項，數據和命名空間技術結合在一起。這裏是我的代碼的抽象版本：

(function($) { 
var defaults = { 
    key1: 'value1', 
    key2: 'value2' 
}; 
var settings = {}; 
var methods = { 
    init: function() { 
     return this.each(function() { 
      var $this = $(this), data = $this.data('pluginname'); 
      console.log('init called'); 
      // If the plugin hasn't been initialized yet 
      if (!data) { 
       //Do more setup stuff here 
       $this.data('pluginname', { 
        key3: 'value3', 
        key4: 'value4' 
       }); 
      } 
      //test for settings and data 
      console.log(settings); 
      console.log(data); 
     }); 
    }, 
    methodname: function() { 
     return this.each(function() { 
      var $this = $(this), data = $this.data('pluginname'); 
      console.log('methodname called'); 
      //test for settings and data 
      console.log(settings); 
      console.log(data); 
     }); 
    } 
}; 
$.fn.pluginname = function(method, options) { 
    settings = $.extend({}, defaults, options); 
    if (methods[method]) { 
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || ! method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist on jQuery.pluginname'); 
    }  
}; 
$(document).ready(function() { 
    $('body').pluginname(); 
    $('body').pluginname('methodname', {key1: 'overriding default value for key 1'}); 
}); 
})(jQuery); 

如果您運行使用jQuery的最新版本，你會看到，我呼籲雙方init和methodname功能，記錄在每個settings和data對象代碼。在撥打methodname時，我可以同時訪問settings和data，但在init調用本身時，data對象返回undefined。如果我在第21行的腳本中設置了斷點，我可以在控制檯中用$this.data('pluginname')回撥data對象。有人看到我在這裏做錯了嗎？我應該可以在init，function裏面寫data.key3對吧？

Answer 1

在您的init方法中，在.each循環的最開始，您將存儲在當前迭代元素中的對象分配給您的data變量。如果指定密鑰沒有可用數據，則data未定義。

然後測試data的真實性，如果它的計算結果爲false您繼續併爲當前元素分配一個數據對象。

然後稍後，您撥打console.log(data);，它會給你undefined。這是預期的，因爲data最初被分配到undefined - 這就是它仍然指的。修復：

// if undefined 
if (!data) { 
    //Do more setup stuff here 


    $this.data('pluginname', { 
     key3: 'value3', 
     key4: 'value4' 
    }); 
    data = $this.data('pluginname'); 
}