Không gian tên Plugin jQuery

Question

Làm cách nào để tạo plugin jQuery để tôi có thể sử dụng không gian tên trong plugin của mình?

$("#id1").amtec.foo1(); 
$("#id1").amtec.foo2(); 

Không có cách nào trong số này có hiệu quả.

(function($) { 
    var amtec = { 
     $.fn.foo1 : function(){ return this.each(function(){}); }, 
     $.fn.foo2 : function(){ return this.each(function(){}); } 
     }; 

    })(jQuery); 

(function($) { 
    $.fn.amtec = function(){ 
     var foo1 = function(){ return this.each(function(){}); }; 
     var foo2 = function(){ return this.each(function(){}); }; 
     } 
    })(jQuery); 

Answer 1

(function($) { 
    $.fn.amtec = function() { 
     var jq = this; 
     return { 
      foo1: function(){ 
       return jq.each(function(){}); 
      }, 

      foo2: function(){ 
       return jq.each(function(){}); 
      } 
     } 
    }; 
})(jQuery); 

Answer 2

(function($){ 
    $.namespace = function(ns, functions){ 
    $.fn[ns] = function() {return this.extend(functions)}; 
    }; 
    $.namespace('$', $.fn); // the default namespace 
})(jQuery); 

Vì vậy, bây giờ bạn có thể có một plugin:

$.fn.func = function(){alert('plugin'); return this'}; 

và tạo plugins trong một không gian tên:

$.namespace ('mynamespace', { 
    func: function() {alert('namespaced plugin'); return this;}, 
    otherfunc: function() {return this.css('color', 'yellow');} 
}); 

Và nếu bạn làm

$('div').func(); // alerts 'plugin' -- no namespace 

Nhưng

$('div').mynamespace().func(); // alerts 'namespaced plugin' 

Và

$('div').mynamespace().func().$().func(); // alerts 'namespaced 

Plugin', sau đó reset đến jquery bình thường và cảnh báo 'cắm'

Answer 3

Tôi biết đó là một câu hỏi cũ ... Nhưng tại sao viết tất cả mã phụ này khi bạn chỉ có thể thay thế . bằng _?

$.fn.amtec_foo1 = function(){ return this.each(function(){}); } 
$.fn.amtec_foo2 = function(){ return this.each(function(){}); } 

Tốt hơn, hãy đặt tên cho plugin của bạn là tên gốc & dự báo bất khả tri.

$.fn.fooize = function(){ return this.html('Element has been Fooized!'); } 

Answer 4

Tôi biết tôi đã trễ gần ba năm, nhưng hy vọng các độc giả tương lai của câu hỏi này có thể hưởng lợi từ câu trả lời của tôi. Câu trả lời của GSto trông tuyệt vời từ quan điểm thiết kế plugin jQuery, nhưng có một vấn đề nhỏ: gọi mynamespace() ghi đè trường hợp jQuery đã trả về bằng các phương thức mới. Dưới đây là một ví dụ về điều đó trở thành một vấn đề:

$myDiv = $('.mydiv'); 
$myDiv.mynamespace().height(); // this will be `height' from mynamespace 
$myDiv.height();    // this will STILL be `height' from mynamespace 
           // because it has overwritten $myDiv.height 

Câu trả lời được lựa chọn không có vấn đề này bởi vì có amtec() không phải là một trường hợp jQuery và là thay vì một đối tượng mà các cuộc gọi phương thức của nó với các trường hợp jQuery như bối cảnh. Tôi đã lấy khái niệm của cả hai câu trả lời và viết các plugin không gian tên dưới đây:

(function($) { 
    $.namespace = function(namespaceName, closures) { 

    if ($.fn[namespaceName] === undefined) { 
     $.fn[namespaceName] = function executor(context) { 
     if (this instanceof executor) { 
      this.__context__ = context; 
     } 
     else { 
      return new executor(this); 
     } 
     }; 
    } 

    $.each(closures, function(closureName, closure) { 
     $.fn[namespaceName].prototype[closureName] = function() { 
     return closure.apply(this.__context__, arguments); 
     }; 
    }); 

    }; 
})(jQuery); 

Ví dụ sử dụng:

$.namespace('milosz', { 
    redify: function() { 
     $(this).css('color', '#ff0000'); 
    }, 
    greenify: function() { 
     $(this).css('color', '#00ff00'); 
    } 
}); 

$.namespace('milosz', { 
    blueify: function() { 
     $(this).css('color', '#0000ff'); 
    } 
}); 

$('.mydiv').milosz().redify(); // The HTML elements with class `mydiv' are now red 

Mã này sử dụng một số chi tiết ở mức độ thấp khá JavaScript đều được giải thích bởi John Resig's Advanced JavaScript tutorial, nhưng nói một cách lỏng lẻo những gì đang xảy ra trong ví dụ này là:

Khi milosz (nội bộ $.fn[namespaceName]) được gọi, this trỏ đến trường hợp jQuery được trả về b y $('.mydiv').Do đó, câu lệnh if rơi qua khối else và phiên bản hàm xây dựng của milosz được gọi (được gọi nội bộ là executor vì các lý do sắp trở nên rõ ràng). Hàm khởi tạo được chuyển một tham số duy nhất: this, một con trỏ đến jQuery trường hợp sẽ là ngữ cảnh thực thi cho tất cả các thành viên của không gian tên milosz. Chúng ta nhập trở lại câu lệnh if, lần này thực hiện khối đầu tiên, trong đó phiên bản jQuery được chuyển vào được lưu trữ trong biến thành viên được gọi là __context__ (hy vọng có khả năng bị ghi đè thấp). Đối tượng được xây dựng được trả lại, hoàn chỉnh với tham chiếu đến phiên bản gốc jQuery và bất kỳ trình bao bọc nào được thêm vào mẫu thử nghiệm của nó bằng cách gọi số $.namespace. Những trình bao bọc này chỉ thực hiện các phương thức được truyền vào không gian tên milosz với đối tượng jQuery gốc dưới dạng ngữ cảnh, như xảy ra khi redify được thực hiện.

Bah, tôi biết nó là một ngụm, dù sao vấn đề là nó hoạt động giống như câu trả lời được chấp nhận nhưng trông giống như câu trả lời jQueryish, mà với tôi là tốt nhất của cả hai thế giới.

Answer 5

$.cg = { 
    foo1: function(weq){ 
     return console.log(weq); 
    }, 
    foo2: function(rw){ 
     return console.log(rw); 
} 
}; 
$.cg = { // will result in error because $.cg is already declared above 

    foo4: function(rw){ // will result in error 
     return console.log(rw); // will result in error 
} // will result in error 
}; // will result in error 

$.cg.foo3 = function(weq){ //to add anything new to $.cg , you have to do it this way. 
     return console.log(weq); 
    } 

$.cg.foo1("12"); 
$.cg.foo2("22"); //works fine. 
$.cg.foo3("112"); //works fine.