是否可以在jQuery中创建名称空间?

YUI有一个很好的方法可以在javascript中为您的方法等创建名称空间。

jQuery有类似的东西吗?

asked 2020-01-14T19:52:03Z
8个解决方案
39 votes

lpfavreau提供了使用您自己的方法扩展jQuery对象的解决方案(以便其功能适用于实际的jQuery对象上下文)。

如果您只想使用代码命名空间,则可以使用美元符号,如下所示:

$.myNamespace = { .. };

或“ jQuery”:

jQuery.myNamespace = { .. };

请谨慎选择您选择的名称空间,因为这会覆盖现有的jQuery方法(我建议您先在jQuery代码中进行搜索,以免出现这种情况)。

您可以点击以下链接:[http://www.zachleat.com/web/2007/08/28/namespacing-outside-of-the-yahoo-namespace/]

看看创建自己的函数来复制YUI所做的工作有多么容易:

// 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();
Luca Matteis answered 2020-01-14T19:52:36Z
10 votes

这是我为插件创建名称空间的方式:

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

接着:

$.MyNamespace.MyPlugin ();
Wilk answered 2020-01-14T19:53:00Z
5 votes

jQuery有许多扩展基本功能的插件。 有一个用于简单名称空间的插件。

lpfavreau answered 2020-01-14T19:53:20Z
4 votes

命名空间插件完全不需要!世界上最古老的技巧是使用arguments.callee,Function.prototype,然后调用新的Function实例,使您可以使用$ .fn.extend创建嵌套的名称空间!

这是一个简单的示例:

    ;(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());
});
Tsvetan Kintisheff answered 2020-01-14T19:53:45Z
4 votes

如果要以这种方式使用jQuery:

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

那么目前还没有插件可以做到这一点。 (我既找不到John Resig的jquery.space插件(显然已停止在jQuery 1.4中工作),也找不到Gilberto Saraiva插件的预期无法正常工作)。 我很乐意看一下John的函数,看看它为什么停止工作,以及可以做什么使其正常工作,坦率地说,这将是创建整洁的名称空间的最佳方法。

根据[http://malnotna.wordpress.com/2009/01/12/jquery-namespace-support/],另一种方法是将名称空间设置为(使用Ariel Flesler使用jQuery.Modularize):

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

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

我创建名称空间的方法不是将名称空间放在最后,而是放在$的开头,因此我们的$('*')。namespace语法变为:

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

奇怪的是,我不知道为什么没有提到这种方法,因为它很容易让您创建分散的名称空间而不会覆盖现有功能(通过使用$ .sub())。 而且,使其工作不需要任何东西。 所以:

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

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

然后您就可以出发了。

eithed answered 2020-01-14T19:54:32Z
2 votes

根据您要执行的操作,您可能正在寻找jQuery的插件体系结构:

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

要么 ...

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

确实,这取决于您要执行的操作。

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

rmurphey answered 2020-01-14T19:55:05Z
2 votes

查看此博客:[http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/]

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

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
nologo answered 2020-01-14T19:55:30Z
1 votes

全部归功于@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>
Ben Flynn answered 2020-01-14T19:55:50Z
translate from https://stackoverflow.com:/questions/527089/is-it-possible-to-create-a-namespace-in-jquery