2011-11-29 13 views
6

Làm thế nào để có thể đưa ra các biến cục bộ riêng lẻ của plugin jquery, có thể truy cập được trong các hàm plugin khác nhau?biến toàn cầu hoặc cục bộ trong một plugin jquery

Tập lệnh của tôi hiển thị cảnh báo với nội dung '123', nhưng tôi đang mong đợi 'abc'. Vì vậy, biến 't' chỉ tồn tại một lần và không hai lần cho mỗi plugin. Vì vậy, đối với mỗi plugin-instance cũng phải có một instance của biến 't'.

<html> 
<head> 
<title></title> 

<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    (function ($) { 
     var t = null; 
     $.fn.doSomething = function() 
     { 
      alert(t); 
     } 
     $.fn.myHtmlControl = function(option) { 
      t = option; 
     } 
    })(jQuery); 

    $(function() { 
     $('#ctrl1').myHtmlControl("abc"); 
     $('#ctrl2').myHtmlControl("123");    
     $('#ctrl1').doSomething(); 
    })   
</script> 

</head> 
    <body> 
     <div id='ctrl1'>Ctrl1</div> 
     <div id='ctrl2'>Ctrl2</div> 
    </body> 
</html> 

Trả lời

7

Cách thông thường để làm điều này là sử dụng data chức năng để lưu trữ thông tin của bạn liên quan đến một yếu tố cụ thể trên chính yếu tố. Vì vậy, trong trường hợp của bạn (live example):

(function ($) { 
    $.fn.doSomething = function() 
    { 
     alert(this.data("myHtmlControl")); 
    } 
    $.fn.myHtmlControl = function(option) { 
     this.data("myHtmlControl", option); 
    } 
})(jQuery); 

Nếu bạn cần lưu trữ nhiều tùy chọn, sau đây là một ví dụ mạnh mẽ hơn (live copy):

(function ($) { 
    var defaults = { 
     msg1: "(msg1)", 
     msg2: "(msg2)" 
    }; 

    $.fn.doSomething1 = function() 
    { 
     alert(getOption(this, "msg1")); 
     return this; 
    } 
    $.fn.doSomething2 = function() 
    { 
     alert(getOption(this, "msg2")); 
     return this; 
    } 

    $.fn.myHtmlControl = function(options) { 
     this.data("myHtmlControl", $.extend({}, defaults, options)); 
     return this; 
    }; 

    function getOption(inst, name) { 
     var obj = inst.data("myHtmlControl"); 
     return (obj || defaults)[name]; 
    } 

    function setOption(inst, name, value) { 
     var obj = inst.data("myHtmlControl"); 
     if (!obj) { 
      obj = $.extend({}, defaults); 
      inst.data("myHtmlControl", obj); 
     } 
     obj[name] = value; 
    } 
})(jQuery); 
jQuery(function($) { 

    $("#theButton").click(function() { 
     $('#ctrl1').myHtmlControl({msg1: "abc"}); 
     $('#ctrl2').myHtmlControl({msg2: "123"}); 
     alert("about to do ctrl1"); 
     $('#ctrl1').doSomething1().doSomething2(); 
     alert("about to do ctrl2"); 
     $('#ctrl2').doSomething1().doSomething2(); 
    }); 

}); 
24

Tất cả bạn cần là ở đây:

// jQuery Plugin Boilerplate 
// A boilerplate for jumpstarting jQuery plugins development 
// version 1.1, May 14th, 2011 
// by Stefan Gabos 

// remember to change every instance of "pluginName" to the name of your plugin! 
(function($) { 

    // here we go! 
    $.pluginName = function(element, options) { 

     // plugin's default options 
     // this is private property and is accessible only from inside the plugin 
     var defaults = { 

      foo: 'bar', 

      // if your plugin is event-driven, you may provide callback capabilities for its events. 
      // execute these functions before or after events of your plugin, so that users may customize 
      // those particular events without changing the plugin's code 
      onFoo: function() {} 

     } 

     // to avoid confusions, use "plugin" to reference the current instance of the object 
     var plugin = this; 

     // this will hold the merged default, and user-provided options 
     // plugin's properties will be available through this object like: 
     // plugin.settings.propertyName from inside the plugin or 
     // element.data('pluginName').settings.propertyName from outside the plugin, where "element" is the 
     // element the plugin is attached to; 
     plugin.settings = {} 

     var $element = $(element), // reference to the jQuery version of DOM element the plugin is attached to 
      element = element;  // reference to the actual DOM element 

     // the "constructor" method that gets called when the object is created 
     plugin.init = function() { 

      // the plugin's final properties are the merged default and user-provided options (if any) 
      plugin.settings = $.extend({}, defaults, options); 

      // code goes here 

     } 

     // public methods 
     // these methods can be called like: 
     // plugin.methodName(arg1, arg2, ... argn) from inside the plugin or 
     // element.data('pluginName').publicMethod(arg1, arg2, ... argn) from outside the plugin, where "element" 
     // is the element the plugin is attached to; 

     // a public method. for demonstration purposes only - remove it! 
     plugin.foo_public_method = function() { 

      // code goes here 

     } 

     // private methods 
     // these methods can be called only from inside the plugin like: 
     // methodName(arg1, arg2, ... argn) 

     // a private method. for demonstration purposes only - remove it! 
     var foo_private_method = function() { 

      // code goes here 

     } 

     // fire up the plugin! 
     // call the "constructor" method 
     plugin.init(); 

    } 

    // add the plugin to the jQuery.fn object 
    $.fn.pluginName = function(options) { 

     // iterate through the DOM elements we are attaching the plugin to 
     return this.each(function() { 

      // if plugin has not already been attached to the element 
      if (undefined == $(this).data('pluginName')) { 

       // create a new instance of the plugin 
       // pass the DOM element and the user-provided options as arguments 
       var plugin = new $.pluginName(this, options); 

       // in the jQuery version of the element 
       // store a reference to the plugin object 
       // you can later access the plugin and its methods and properties like 
       // element.data('pluginName').publicMethod(arg1, arg2, ... argn) or 
       // element.data('pluginName').settings.propertyName 
       $(this).data('pluginName', plugin); 

      } 

     }); 

    } 

})(jQuery); 

Nguồn: http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

+0

trình, cảm ơn. Và tôi tự hỏi tại sao khái niệm cơ bản này không được cung cấp như chức năng dựng sẵn. – TechNyquist