是否有可能在jQuery中创build一个名称空间?

YUI有一个很好的方法来为您的方法等在JavaScript中创build一个名称空间。

jQuery有什么相似的吗?

lpfavreau提供了用你自己的方法扩展 jQuery对象的解决scheme(以便它们的function适用于实际的jQuery对象上下文)。

如果你只想命名空间你的代码,你可以使用这样的美元符号:

$.myNamespace = { .. }; 

或“jQuery”:

 jQuery.myNamespace = { .. }; 

小心你select的命名空间,因为这可以覆盖现有的jQuery方法(我build议首先在jQuery代码中search,这样你就不会)。

你可以按照这个链接: http : //www.zachleat.com/web/2007/08/28/namespacing-outside-of-the-yahoo-namespace/

看看创build自己的函数来复制YUI的function是多么简单:

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

这是我为我的插件创build命名空间:

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

接着:

 $.MyNamespace.MyPlugin (); 

我前一段时间写过这个…是名称空间插件的替代品。 http://www.slideshare.net/dfleury/jquery-namespace-pattern

jQuery有一些扩展基本function的插件。 有这个插件简单的命名空间。

命名空间插件是完全不必要的! 世界上最古老的技巧,使用arguments.callee,Function.prototype,然后调用一个新的Function实例,允许你用$ .fn.extend!创build嵌套的命名空间。

这是一个简单而简单的例子:

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

如果你想以这种方式使用jQuery:

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

那么目前没有插件这样做。 (我找不到John Resig的jquery.space插件,它显然在jQuery 1.4中停止工作,也没有Gilberto Saraiva插件,显然没有按预期工作)。 我很乐意看看John的function,看看它为什么停止工作,可以做些什么来使它工作,坦率地说,这将是创build整洁的命名空间的最佳方法。

按照http://malnotna.wordpress.com/2009/01/12/jquery-namespace-support/另一种方法是做namespacing(使用Ariel Flesler的jQuery.Modularize):

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

但是这样的语法不是“漂亮”的。 我们也将结果从一个函数传递给另一个函数。

我的创build命名空间的方法并不是最终放置命名空间,而是在$的开头,所以我们的$('*')。命名空间语法变成:

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

奇怪的是,我不知道为什么没有提到这种方法,因为它很容易让你创buildunclattered命名空间,而不覆盖已经存在的function(通过使用$ .sub())。 而且,使其工作并不需要任何东西。 所以:

 (function($){ $.namespace = $.sub(); $.fn.test = function(){ return 1 }; $.namespace.fn.test = function() { return 2}; })(jQuery); console.log($('*').test(), $.namespace('*').test()); 

你准备好了。

取决于你想要做什么,jQuery的插件架构可能是你正在寻找的:

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

要么 …

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

真的取决于你想做什么。

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

看看这个博客: http : //javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/

自我调用的dynamic命名空间是我以前使用的:

 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 

所有的功劳归于@Diego Fluery,我只是拿着他的幻灯片做了一个可运行的代码原型,但是如果你走这条路线,它可能会为你节省几分钟:

 <!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>