Cách tạo các Phương thức Phần tử jQuery với NameSpace

Đủ để nói, tôi muốn nhánh của tôi viết một chút, và quyết định tôi muốn có thể "không gian tên" của chúng. Cho đến nay, việc viết lại các số $.method đến $.namespace.method thật dễ dàng.Cách tạo các Phương thức Phần tử jQuery với NameSpace

Sự cố tôi đang gặp đang tạo Phương thức phần tử chẳng hạn như $('element').method(), nhưng để sử dụng không gian tên; ví dụ: $('element').namespace.method(). Tôi đã thử một số cách giải quyết và có thể tạo $.fn.namespace.method, tuy nhiên, khi tôi gọi this từ bên trong phương thức đó, tôi chỉ nhận được $.fn.namespace chứ không phải số 'element' mà tôi muốn nhận.

Ví dụ: Nếu tôi gọi $('body').namespace.test(), sau đó bên trong phương pháp test, tôi muốn this là yếu tố <body></body>

Bất kỳ sự giúp đỡ để tìm ra cách để kéo này off nhiều đánh giá cao. Có lẽ chỉ là những suy nghĩ quá mức như thường lệ.

Hiện nay cố gắng quyết có thể có một cái gì đó giống như $('body').namespace().method(), cho đến nay, không hoạt động tốt ...: P

Nguồn

2013-07-17 SpYk3HH

+1 - Tôi không nghĩ rằng điều này là có thể trong JavaScript. Bạn chỉ nên thêm tiền tố cho tên phương thức của mình (ví dụ: 'namespaceTest'). Nếu thực sự không gian tên là rất quan trọng với bạn, thì tôi e rằng bạn không thể sử dụng nguyên mẫu của jQuery. –

Tôi có thể bị mất điểm của bạn, nhưng bạn chỉ cần tìm '$ .fn.myMethod (/ * function code * /);' mà sau đó bạn gọi là '$ (" div "). MyMethod()'? – Archer

@JosephSilber Đó là JavaScript! Tôi chắc chắn có một cách! LoL, sau khi tất cả, đây là ngôn ngữ "tự do" ra khỏi đó! – SpYk3HH

Nếu bạn không cần phải tương thích với IE8, bạn có thể sử dụng Object.defineProperty.

dụ làm việc:

Object.defineProperty($.fn, 'namespace', { 
    get: function(){ 
    var t = this; 
    return { 
     lowercasehtml: function(){ 
     return t.html(function(_,h){ return h.toLowerCase() }); 
     } 
    } 
    } 
}); 

$('#a').namespace.lowercasehtml(); // changes the html of #a to lowercase (yes, it's stupid, I know)

Demonstration

Nhưng tôi không tin đó là một ý tưởng tốt để không gian tên như thế này. Tôi đã chỉ cần xác định

$.fn.namespace_lowercasehtml = function() ...

Đó là những gì cá nhân tôi làm cho các ứng dụng mở rộng cụ thể cho jQuery của tôi.

Nguồn

2013-07-17 15:42:13

đề nghị tốt đẹp, tôi sẽ thử nó ngay sau khi ăn trưa, bất kỳ suy nghĩ về IE8 làm việc xung quanh? – SpYk3HH

Thành thật mà nói tôi nghĩ rằng đề nghị thứ hai của tôi, ngay cả khi không ưa thích, là tốt nhất. –

Trong khi tôi không khuyên bạn nên nó, bạn có thể tạo ra một đối tượng mới cho mỗi cuộc gọi đến namespace():

(function($){ 

    var plugin = { 
     test: function(){ 
      console.log(this); 
     } 
    }; 

    var methods = Object.keys(plugin); 

    $.fn.namespace = function(){ 

     var self = this, 
      localMethods = {}; 

     $.each(methods, function() { 
      localMethods[ this ] = plugin[ this ].bind(self); 
     }); 

     return localMethods; 
    }; 

}(jQuery));

Đây là fiddle: http://jsfiddle.net/WaXzL/

Bạn có thể polyfill Object.keys for older browsers, hoặc chỉ tạo mảng methods theo cách thủ công.

Tương tự, hãy đi theo số bind: hoặc điền vào nó theo cách thủ công hoặc call theo cách thủ công.

Dưới đây là một phiên bản đó sẽ làm việc trong các trình duyệt cũ:

(function($){ 

    var plugin = { 
     test: function(){ 
      console.log(this); 
     } 
    }; 

    var methods = []; 

    for (var i in plugin) { 
     if (plugin.hasOwnProperty(i)) { 
      methods.push(i); 
     } 
    } 

    $.fn.namespace = function(){ 

     var self = this, 
      localMethods = {}; 

     $.each(methods, function (i, method) { 
      localMethods[ method ] = function() { 
       plugin[ method ].call(self); 
      }; 
     }); 

     return localMethods; 
    }; 

}(jQuery));

Và đây là fiddle: http://jsfiddle.net/WaXzL/1/

Nguồn

2013-07-17 15:48:06

Cảm ơn đề xuất của bạn. Tôi đã thêm hỗ trợ cho các đối số truyền vào bất kỳ phương thức cục bộ nào: http://jsfiddle.net/WaXzL/2/ –

Làm thế nào về thay vì thực hiện:

$('element').namespace.method()

bạn đơn giản hóa nó và làm

$('element').namespace('method')

thay thế?Đây là đơn giản hơn nhiều:

(function($){ 
    var methods = { 
     test: function(a, b){ 
      console.log(this, a, b); 
     } 
    }; 

    $.fn.namespace = function(method){ 
     var params = Array.prototype.slice.call(arguments, 1); 
     return methods[method].apply(this, params); 
    }; 
}(jQuery));

Sau đó, bạn muốn làm điều gì đó như: $('body').namespace('test', 1, 2);

Nguồn

2013-07-17 15:59:55

vì intellisense trong IDE của tôi sẽ đọc '$ ('ele'). Namespace.method()' nhưng nó đã thắng ' t đọc một tên phương thức được chuyển thành chuỗi param – SpYk3HH

@ SpYk3HH: Tôi đã cố giữ nó đơn giản. Tôi không sử dụng IDE "ưa thích". –

Một giải pháp tốt hơn là chỉ cần có một phương pháp chính, và vượt qua các tên phương pháp như là một chuỗi:

(function($){ 

    var plugin = { 
     test: function(){ 
      console.log(this); 
     }, 
     otherTest: function(){ 
      console.log(this); 
     } 
    }; 

    $.fn.namespace = function (method){ 
     var args = Array.prototype.slice.call(arguments, 1); 
     return plugin[ method ].call(this, args); 
    }; 

}(jQuery));

Đây là fiddle: http://jsfiddle.net/yYNDH/

Nguồn

2013-07-17 16:05:06

Đó không phải là câu trả lời khác (bằng tên lửa) chưa? –

@dystroy - Yeah. Tôi đã đi qua để JSFiddle để tạo ra fiddle trước khi tôi đăng, và khi tôi trở lại, tôi đã không nhận ra rằng ông đã đăng nó. –

Cách tạo các Phương thức Phần tử jQuery với NameSpace

Trả lời

Các vấn đề liên quan