普通英语的jQuery函数命名空间

名称间隔是任何JavaScript开发人员都必须知道的，尤其是在学习基础知识时， 形成坚实的基础并知道如何保护代码至关重要 。 我认为，从这开始的一个好方法是解释其含义，并为您提供一些JavaScript / jQuery中命名空间的示例。

什么是命名空间？

简而言之，命名空间是一种使用javascript对象文字表示法提供封装的方法来保护您的代码。 每个体面的开发人员都应通过在单个名称空间中构造方法/数据来最大程度地减少此根范围内的代码占用量。 优点是您可以随意命名变量，而不必担心其他代码会覆盖其值。 在本文中，我将向您展示嵌套对象的命名空间，因为这是jQuery中命名空间的最常见形式。

好的，让我们直接看一些例子。

您可以将任何这些示例直接粘贴到Firebug控制台中，以查看其作用并进行操作。

这是在JavaScript中声明函数的常规方法。

myFunction = function()
{
	console.log('running myFunction...');
};
myFunction(); //function call

现在的问题是，其他任何代码也可以声明一个函数调用“ myFunction”，这将覆盖您的函数！ 不好。 那么解决方案是什么？ 您猜对了，命名空间！

基本名称空间

这是创建基本名称空间以保护功能的方法：

;MYNAMESPACE = {

	myFunction: function()
	{
		console.log('running MYNAMESPACE.myFunction...');
	}
	
}
MYNAMESPACE.myFunction(); //function call

现在，没有任何东西可以覆盖您的函数，并且所有内容都包含在名为“ MYNAMESPACE” 的命名空间中 。 要调用函数，您只需在函数之前包含名称空间。

命名您的空间

好的，所以您看了上面的代码，想知道为什么命名空间是全部大写。 我倾向于将名称空间保留为大写字母，因为它们是JavaScript引用的对象，但这取决于您的个人或工作编码实践 。 使其尽可能短也是一种好方法，因此我可能应该将我的命名空间称为“ NS”或类似名称（这是因为命名空间在链接在一起时会变长，我们将在后文中详细介绍）。

具有多个功能的名称空间

您还可以根据需要声明变量和更多函数。 所有这些都是该名称空间的“本地”（它的行为类似于该代码的控制器）。 只需记住名称空间内的语法更改，因为您要引用对象文字，因此需要在每个语句后添加逗号而不是分号 。

;MYNAMESPACE = {

    name: 'MYNAMESPACE',

	myFunction1: function()
	{
		console.log('running MYNAMESPACE.myFunction...');
	},
	myFunction2: function()
	{
		console.log('running MYNAMESPACE.myFunction...');
	}
	
}
console.log(MYNAMESPACE.name); //variable call
MYNAMESPACE.myFunction1(); //function call
MYNAMESPACE.myFunction1(); //function call

命名空间内的命名空间

现在您在考虑在名称空间内的名称空间 ，某种子名称空间。 是的，这也有可能，您只需要确保预先声明了您的主要名称空间即可，如下所示：

;var MYNAMESPACE = {};
MYNAMESPACE.SUBNAME = {

	myFunction: function()
	{
		console.log('running MYNAMESPACE.SUBNAME.myFunction...');
	}
	
}
MYNAMESPACE.SUBNAME.myFunction(); //function call

自封装的jQuery命名空间结构

好的，现在假设您要使用自封装的jQuery函数 （也称为“ 匿名函数 ”或“自执行函数”）来包装名称空间，但是您希望能够引用持有的对象，函数和变量中。

首先，您需要在封闭函数外部声明名称空间，以使对象可以从外部进行评估，如下所示：

;var MYNAMESPACE = {};

如果未在外部范围内创建变量，则肯定会看到以下错误： 'ReferenceError：未定义MYNAMESPACE。

这是代码的完整结构，使用命名空间进行了完全封装，并且仅在封闭的jQuery函数内部包括用于与jQuery代码一起使用的美元符号（$），以防止与其他框架的命名冲突 。

;var MYNAMESPACE = {}; 
;(function($) {

	MYNAMESPACE.SUBNAME = {
		myFunction: function()
		{
			console.log('running MYNAMESPACE.SUBNAME.myFunction...');
		}
	}
	
})(jQuery);
MYNAMESPACE.SUBNAME.myFunction(); //function call

使用窗口范围替代

将参数传递给jQuery之类的匿名函数真是太棒了，因为就您而言，即使设置了jQuery.noConflict（），它也可以使您使用$。 因此，从这种意义上说，如果命名空间中的代码使用“ $”，那将是非常有意义的。

通过将MYNAMESPACE分配给窗口作用域，您实际上仍然可以将所有代码粘贴在自执行函数中（与上面的全局作用域中使用var的效果相同）。 然后，您有了封装，可以自由使用$。

;(function($) {
    // declare var in global scope
    window.MYNAMESPACE = {};

    MYNAMESPACE.SUBNAME = {
        myFunction: function()
        {
            console.log('running MYNAMESPACE.SUBNAME.myFunction...');
        }
    }
 
})(jQuery);
MYNAMESPACE.SUBNAME.myFunction(); //function call

而已！ 我希望您了解了有关JavaScript / jQuery中命名空间的知识。 如果没有，请随时发表评论。 在下一篇文章中，我将研究事件命名空间，这很棒。

From: https://www.sitepoint.com/jquery-function-namespacing-plain-english/