Chức năng không gian tên jQuery Plugin

Question

Tôi đang tạo một plugin jQuery có phạm vi khá lớn. Trong thực tế, các plugin kỹ thuật bao gồm một vài plugin mà tất cả làm việc cùng nhau.

(function($){ 
    $.fn.foo = function(){ 
     //plugin part A 
    } 
    $.fn.bar = function(){ 
     //plugin part B 
    } 
    $.fn.baz = function(){ 
     //plugin part C 
    } 
}(jQuery)) 

Có thể không gian tên plugin jQuery như vậy mà các plugin nhỏ có thể là chức năng của plugin lớn

$.fn.foo.bar = function(){} 
$.fn.foo.baz = funciton(){} 

Điều này sẽ tránh gây ô nhiễm chức năng namespace jQuery. Sau đó, bạn có thể gọi các plugin như

$('#example').foo() 
$('#other_example').foo.bar() 

Vấn đề này tôi đã chạy vào khi cố gắng này ra bản thân mình là các chức năng khai báo là thuộc tính của foo() plugin function không có tài liệu tham khảo của họ để 'này' đặt đúng. 'this' kết thúc đề cập đến đối tượng cha và không phải đối tượng jQuery.

Bất kỳ ý tưởng hoặc ý kiến ​​nào sẽ được đánh giá cao.

-Matt

Answer 1

Ngay sau khi bạn sử dụng $.fn.foo.bar() - this điểm để $.fn.foo, đó là những gì bạn mong đợi ở Javascript (this là đối tượng mà hàm được gọi vào.)

tôi đã nhận thấy trong các plugin từ jQuery UI (như sắp xếp được), nơi bạn gọi các chức năng như:

$(...).sortable("serialize"); 
$(...).sortable({options}); 

Nếu bạn đang làm một cái gì đó như thế này - bạn có thể mở rộng j Truy vấn bản thân:

$.foo_plugin = { 
    bar: function() {}, 
    baz: function() {} 
} 

$.fn.foo = function(opts) { 
    if (opts == 'bar') return $.foo_plugin.bar.call(this); 
    if (opts == 'baz') return $.foo_plugin.baz.call(this); 
} 

Answer 2

Vâng, tôi chắc chắn có nhiều cách để làm da mèo này. Các thư viện jQuery UI sử dụng một mô hình như thế này:

// initialize a dialog window from an element: 
$('#selector').dialog({}); 

// call the show method of a dialog: 
$('#selector').dialog('show'); 

Answer 3

Tôi biết điều này đã được trả lời nhưng tôi đã tạo ra một plugin mà thực hiện chính xác những gì bạn muốn:

http://code.google.com/p/jquery-plugin-dev/source/browse/trunk/jquery.plugin.js

tôi đã bao gồm một ví dụ nhỏ dưới đây, nhưng kiểm tra trong bài đăng của Nhóm nhà phát triển jQuery này để có ví dụ chi tiết hơn: http://groups.google.com/group/jquery-dev/browse_thread/thread/664cb89b43ccb92c/72cf730045d4333a?hl=en&q=structure+plugin+authoring#72cf730045d4333a

Nó cho phép bạn tạo một đối tượng với nhiều phương pháp như bạn muốn:

var _myPlugin = function() { 
    // return the plugin namespace 
    return this; 
} 

_myPlugin.prototype.alertHtml = function() { 
    // use this the same way you would with jQuery 
    alert($(this).html()); 
} 

$.fn.plugin.add('myPlugin', _myPlugin); 

bây giờ bạn có thể đi:

$(someElement).myPlugin().alertHtml(); 

Có, tất nhiên, nhiều, rất nhiều khả năng khác với điều này như được giải thích trong bài nhóm dev.

Answer 4

Tôi là người hâm mộ mẫu mà tôi đã xem trên số SimpleModal của Eric Martin. Điều này hoạt động tốt khi tôi KHÔNG hành động trên các phần tử DOM - trong trường hợp này là một trình bao bọc để sử dụng localStorage.

Bằng cách này tôi có thể dễ dàng tham khảo các nhà xây dựng:

$.totalStorage('robo', 'cop'); 

... hoặc một phương pháp công cộng:

$.totalStorage.getItem('robo'); //returns 'cop' 

Đây là internals:

;(function($){ 

/* Variables I'll need throghout */ 

var ls; 
var supported = true; 
if (typeof localStorage == 'undefined' || typeof JSON == 'undefined') { 
    supported = false; 
} else { 
    ls = localStorage; 
} 

/* Make the methods public */ 

$.totalStorage = function(key, value, options){ 
    return $.totalStorage.impl.init(key, value); 
} 

$.totalStorage.setItem = function(key, value){ 
    return $.totalStorage.impl.setItem(key, value); 
} 

$.totalStorage.getItem = function(key){ 
    return $.totalStorage.impl.getItem(key); 
} 

/* Object to hold all methods: public and private */ 

$.totalStorage.impl = { 

    init: function(key, value){ 
     if (typeof value != 'undefined') { 
      return this.setItem(name, value); 
     } else { 
      return this.getItem(name); 
     } 
    }, 

    setItem: function(key, value){ 
     if (!supported){ 
      $.cookie(key, value); 
      return true; 
     } 
     ls.setItem(key, JSON.stringify(value)); 
     return true; 
    }, 

    getItem: function(key){ 
     if (!supported){ 
      return this.parseResult($.cookie(key)); 
     } 
     return this.parseResult(ls.getItem(key)); 
    }, 

    parseResult: function(res){ 
     var ret; 
     try { 
      ret = JSON.parse(res); 
      if (ret == 'true'){ 
       ret = true; 
      } 
      if (ret == 'false'){ 
       ret = false; 
      } 
      if (parseFloat(ret) == ret){ 
       ret = parseFloat(ret); 
      } 
     } catch(e){} 
     return ret; 
    } 
}})(jQuery);