2009-02-09 17 views

Odpowiedz

4

jQuery ma kilka wtyczek, które rozszerzają podstawową funkcjonalność. Istnieje this plugin dla łatwych obszarów nazw.

38

lpfavreau oferuje rozwiązanie przedłużyć obiekt jQuery z własnych metod (tak, aby ich funkcjonalność stosuje się od rzeczywistego kontekstu obiektu jQuery).

Jeśli szukasz po prostu przestrzeni nazw kodu można użyć symbolu dolara takiego:

$.myNamespace = { .. }; 

lub „jQuery”:

jQuery.myNamespace = { .. }; 

być ostrożnym z nazw wybrać ponieważ może to zastąpić istniejące metody jQuery (sugerowałbym najpierw przeszukać kod jQuery, aby tego nie robić).

Możesz śledzić ten link: http://www.zachleat.com/web/2007/08/28/namespacing-outside-of-the-yahoo-namespace/

zobaczyć, jak łatwo jest stworzyć własną funkcję do replikacji co YUI robi:

// include jQuery first. 
jQuery.namespace = function() { 
    var a=arguments, o=null, i, j, d; 
    for (i=0; i<a.length; i=i+1) { 
     d=a[i].split("."); 
     o=window; 
     for (j=0; j<d.length; j=j+1) { 
      o[d[j]]=o[d[j]] || {}; 
      o=o[d[j]]; 
     } 
    } 
    return o; 
}; 

// definition 
jQuery.namespace('jQuery.debug'); 
jQuery.debug.test1 = function() 
{ 
    alert('test1 function'); 
}; 
jQuery.debug.test2 = function() 
{ 
    alert('test2 function'); 
}; 
// usage 
jQuery.debug.test1(); 
jQuery.debug.test2(); 
2

W zależności od tego, co próbujemy zrobić, plugin jQuery architektura może być to, czego szukasz:

$.fn.myPlugin = function() { 
    return $(this).each(function() { 
    // do stuff 
    }); 
}; 

lub ...

$.fn.myPlugin = function() { 
    var myNamespace = { 
    // your stuff 
    }; 
}; 

tak naprawdę to zależy od tego, co próbujesz zrobić.

http://docs.jquery.com/Plugins/Authoring

4

nazw Wtyczka jest całkowicie zbędne! Najstarsza sztuczka na świecie, użycie arguments.callee, Function.prototype, a następnie wywołanie nowej instancji Function, pozwala tworzyć zagnieżdżone przestrzenie nazw za pomocą $ .fn.extend!

Oto zwykły i prosty przykład:

;(function($){ 
    var options= { 
     root: function(){ //you don't have to call it 'root', of course :) 
      //identify the function from within itself with arguments.callee 
      var fn= arguments.callee; 

      //'this' at this level is the jquery object list matching your given selector 
      //we equate fn.prototype to this 
      //thus when we call a new instance of root, we are returned 'this' 
      fn.prototype= this; 

      fn.value= function(){ 
       //Note: "new this" will work in the below line of code as well, 
       //because in the current context, 'this' is fn; 
       //I use fn to make the code more intuitive to understand; 
       var context= new fn; 

       console.log(context, fn.prototype); //test 
       return context.html(); //test 
      } 

      return this; 
     } 
    } 

    //you can obviously append additional nested properties in this manner as well 
    options.root.position= function(){ 
     var context= new this; //in this context, fn is undefined, so we leverage 'this' 

     console.log(context, this.prototype); //test 
     return context.offset(); //test 
    } 

    //don't forget to extend in the end :) 
    $.fn.extend(options); 

})(jQuery); 

;$(function(){ 
    var div= $('div#div') 
     .root(); 

    console.log(div.root.value()); 
    console.log(div.root.position()); 
}); 
+7

'' arguments.caller' arguments.callee' i są przestarzałe i spowoduje błędy w "trybie ścisłym" od ECMAScript 5. [MDN] (https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope/arguments/callee) – ObjectiveCat

+13

Spieram się z twierdzeniem, że jest to najstarszy podstęp na świecie. – mxcl

+0

@MaxHowell Zdecydowanie nie starszy niż wyciągnięcie królika z kapelusza. – Yatrix

2

sprawdzić ten blog: http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/

na własny powołując dynamiczny Przestrzenie nazw to co ja używałem wcześniej:

var myApp = {}; 
(function(context) { 
    var id = 0; 

    context.next = function() { 
     return id++; 
    }; 

    context.reset = function() { 
     id = 0; 
    } 
})(myApp); 

window.console && console.log(
    myApp.next(), 
    myApp.next(), 
    myApp.reset(), 
    myApp.next() 
); //0, 1, undefined, 0 
+0

To nie odpowiada na pytanie operatora. – Madbreaks

4

Jeśli chcesz użyć jQuery w ten sposób:

$("*").namespace.do(); 

Obecnie nie ma tam wtyczek. (Nie mogę znaleźć ani wtyczki jquery.space Johna Resiga, która najwyraźniej przestała działać w jQuery 1.4, ani wtyczki Gilberto Saraiva, która najwyraźniej nie działała zgodnie z oczekiwaniami).Z przyjemnością przyjrzę się funkcji Johna, aby zobaczyć, dlaczego przestało działać i co można zrobić, aby działało i szczerze mówiąc, byłoby to najlepsze podejście do tworzenia niezakłóconych przestrzeni nazw.

Zgodnie http://malnotna.wordpress.com/2009/01/12/jquery-namespace-support/ Innym podejściem jest zrobić jak przestrzenie nazw (korzystając jQuery.Modularize Ariel Flesler):

$("*").namespace().do() 

ale taka składnia nie jest "dość". Przekazujemy również wyniki z jednej funkcji do drugiej.

Moje podejście do tworzenia nazw nie jest wprowadzenie nazw w końcu, ale na początku $, więc nasi $ („*”) składnia nazw staje.

$.namespace("*").do() 

Niesamowicie, nie wiem wiedzieć, dlaczego takie podejście nie jest wspomniane, ponieważ pozwala ono łatwo tworzyć nieuporządkowane przestrzenie nazw bez nadpisywania istniejących funkcji (za pomocą $ .sub()). Również sprawienie, by działało, nie wymaga niczego. A więc:

(function($){ 
    $.namespace = $.sub(); 
    $.fn.test = function(){ return 1 };    
    $.namespace.fn.test = function() { return 2}; 
})(jQuery); 

console.log($('*').test(), $.namespace('*').test()); 

I jesteś gotowy do pracy.

+1

Niestety $ .sub zostało usunięte z jQuery w wersjach większych niż 1.9:/ –

1

Wszystko kredytowej @Diego Fluery, po prostu wziął pokładu slajdów i wykonał prototyp runnable kodu, ale może to zaoszczędzić kilka minut, jeśli tę drogę:

<!DOCTYPE html> 
<html> 
<head> 
<script type="application/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="application/javascript"> 

    $(document).ready(function() { 
     (function() { 
      $.fn.AppRedirect = function() { 
       this.sendRequest = parts.sendRequest; 
       this.doRedirect = parts.doRedirect; 

       return this; 
      } 

      var parts = { 

       doRedirect: function() { 
        console.log('doRedirect'); 
       }, 

       sendRequest: function() { 
        console.log('sendRequest'); 
       } 

      }; 
     })(); 

     $("body").AppRedirect().sendRequest(); 
     $("body").AppRedirect().doRedirect(); 
    });  

</script> 
</head> 
<body> 
</body> 
</html> 
10

ten sposób tworzę nazw dla moich wtyczek:

(function ($) { 
    // do not overwrite the namespace, if it already exists 
    $.MyNamespace = $.MyNamespace || {}; 
    $.MyNamespace.MyPlugin = function() {/*here's the logic*/} 
})($); 

a potem:

$.MyNamespace.MyPlugin(); 
+0

To wszystko, czego naprawdę potrzebujesz. Czasami może to być trochę ciężkie/ręczne ... Prawdopodobnie będziesz chciał zautomatyzować niektóre z nich, jeśli potrzebujesz definicji do wielu plików. – 1nfiniti

+0

W kontekście jQuery istnieją dobre i złe sposoby na zrobienie tego. Jest to przykład niewłaściwej drogi. Zobacz 'jQuery.extend' i' jQuery.fn.extend'. – Madbreaks

Powiązane problemy