2013-07-17 11 views
6

Eklenti, benim eklenti biraz yazı yazmak istiyorum ve onlara "ad alanı" mümkün olmak istedim karar vermek istiyorum. Şimdiye kadar, $.method olanları $.namespace.method'a yeniden yazmak çok kolay oldu.NameSpace ile jQuery Öğesi Yöntemleri nasıl oluşturulur

Yapmakta olduğum problem, $('element').method() gibi Eleman Yöntemleri yapmak, ancak bir ad alanı kullanmak; örneğin $('element').namespace.method(). Birkaç geçici çözüm denedim ve $.fn.namespace.method oluşturabilir, ancak bu yöntem içinde this'u aradığımda, yalnızca almak istediğim 'element' değil $.fn.namespace aldım.

Örnek: i sonra yöntemle test içinde $('body').namespace.test() ararsanız, ben this elemanı <body></body>

çok takdir bu işi nasıl bulmaktan herhangi bir yardım olmak istiyorum. Muhtemelen her zamanki gibi aşırı düşünen şeyler.

anda o kadar iyi çalışmıyor, bugüne kadar, $('body').namespace().method() gibi bir şey için olası alternatif çözüm çalışıyor ...: Eğer IE8 ile uyumlu olacak şekilde gerekmiyorsa P

+0

+1 - Bunun JavaScript’de mümkün olduğunu düşünmüyorum. Sadece yöntem adlarınızı öneklemelisiniz (ör. 'NamespaceTest'). Gerçek adlandırma sizin için çok önemliyse, o zaman jQuery'nin prototipini kullanamazsınız. –

+0

demek istediğini eksik olabilir, ama sadece '$ .fn.myMethod (/ * fonksiyon kodu * /) arıyoruz;.' Sonra '$ ("div") gibi çağrı myMethod()'? – Archer

+1

@JosephSilber Bu JavaScript! Eminim bir yolu vardır! LoL, sonuçta, burası "en özgür" dil! – SpYk3HH

cevap

3

, sen Object.defineProperty kullanabilir.

Çalışma örneği:

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

Ama böyle ad alanı için iyi bir fikir olduğuna ikna olmuş değilim. Ben sadece jQuery uygulamasına özel uzantılarım için kişisel olarak yaptığım şey budur. Ben tavsiye etmiyorum ederken

+0

güzel öneri ederiz, hemen öğle yemeğinden sonra deneyeceğim IE8 üzerinde herhangi bir düşünce geçici? – SpYk3HH

+0

Dürüst olmak gerekirse, ikinci önerim, fantezi olmasa bile, en iyi olanıdır. –

2

, sen namespace() her çağrı için yeni bir nesne oluşturabilir: http://jsfiddle.net/WaXzL/


Sen polyfill Object.keys for older browsers Ya, ya da sadece: Burada

(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)); 

keman var methods dizisini el ile oluşturun.

Aynı bind için de geçerli: it polyfill veya el call onu ya. İşte

eski tarayıcılarda da çalışacak bir sürümü:

(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)); 

Ve burada keman var: http://jsfiddle.net/WaXzL/1/

+0

Öneriniz için teşekkürler. Herhangi bir yerel yönteme karşı argümanlar için destek ekledim: http://jsfiddle.net/WaXzL/2/ –

2

yerine yapmanın nereden:

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

bunu basitleştirmek ve

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

yerine?Bu çok daha kolaydır:

(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)); 

Sonra böyle bir şey yapmak istiyorum: $('body').namespace('test', 1, 2);

+0

IDE'mdeki intellisense '$ (' ele '). Namespace.method() 'yi okuyacaktır. t string param – SpYk3HH

+3

@ SpYk3HH olarak geçilen bir metodun ismini okuyun: Basit tutmaya çalışıyordum. "Fantezi" IDE kullanmıyorum. –

2

Daha iyi bir çözüm sadece bir ana yöntem vardır ve bir dize olarak yöntem adı geçmektir:

(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)); 

İşte keman: http://jsfiddle.net/yYNDH/

+0

Bu başka bir cevap değil mi (Rocket)? –

+1

@dystroy - Evet. Yayınlamadan önce fiddle'i oluşturmak için JSFiddle'a gitmiştim ve geri döndüğümde, daha önce onu yayınladığını fark etmemiştim. –