前端开发知识：JavaScript命名空间常用方法

很多学习前端开发的小伙伴都会遇到这样的问题：在JavaScript中全局变量经常会引起命名冲突，甚至有时侯重写变量不是按照想象中的顺序来。避免全局变量名冲突的最好办法还是创建命名空间，接下来小编就给大家分享在JavaScript中创建命名空间的几种常用方法。



JavaScript的执行环境由各种各样的全局变量构成，这些全局变量先于函数执行环境而创建、这些全局变量都挂载于“全局对象”下。当名称有冲突时就会产生一些不可控的问题，比如命名冲突、代码的脆弱性、难以测试等。

在编程开发中合理的使用命名空间可以避免相同的变量或对象名称产生的冲突，而且命名空间也有助于组织代码有更强的可维护性和可读性。JavaScript中虽然没有提供原生的命名空间支持，但我们可以使用其他的方法（对象和闭包）实现类似的效果。

1、单一全局变量

JavaScript中一个流行的命名空间模式是选择一个全局变量作为主要的引用对象，因为每个可能的全局变量都成为唯一全局变量的属性，也就不用再创建多个全局变量，也就避免了和其他声明的冲突。不过单一全局变量模式已经在不少的JavaScript类库中使用，如：YUI定义了唯一的YUI全局对象，jQuery定义了$和jQuery，$由其他类库使用时使用jQuery等。示例如下：

var myApplication = (function() {

function() {

// ***

},

return {

// **

}

})();

2、命名空间前缀

命名空间前缀模式其思路非常清晰，就是选择一个独特的命名空间，然后在其后面声明声明变量、方法和对象。示例如下：

var = myApplication_propertyA = {};

var = myApplication_propertyA = {};

function myApplication_myMethod() {

// ***

}

从某种程度上来说，它确实减少了命名冲突的发生概率，但其并没有减少全局变量的数目，在使用这种模式时一定要特别注意。

3、对象字面量表示法

对象字面量模式可以认为是包含一组键值对的对象，每一对键和值由冒号分隔，键也可以是代码新的命名空间。示例如下：

var myApplication = {

// 可以很容易的为对象字面量定义功能

getInfo:function() {

// ***

},

// 可以进一步支撑对象命名空间

models:{},

views:{

pages:{}

},

collections:{}

};

对象字面量为我们提供了优雅的键/值语法，我们可以非常便捷的组织代码封装不同的逻辑或功能，而且可读性、可维护性、可扩展性极强。

4、嵌套命名空间

嵌套命名空间模式可以说是对象字面量模式的升级版、它也是一种有效的避免冲突模式、因为即使一个命名空间存在、它也不太可能拥有同样的嵌套子对象、示例如下：

var myApplication = myApplication || {};

// 定义嵌套子对象

myApplication.routers = myApplication.routers || {};

myApplication.routers.test = myApplication.routers.test || {};

当然、我们也可以选择声明新的嵌套命名空间或属性作为索引属性、如：

myApplication[´routers´] = myApplication[´routers´] || {};

使用嵌套命名空间模式可以使代码易读且有组织性，而且相对安全、不易产生冲突，其弱点是如果我们的命名空间嵌套过多会增加浏览器的查询工作量。

5、立即调用的函数表达式

立即调用函数（IIFE）实际上就是匿名函数，被定义后立即被调用。IIFE是用于封装应用程序逻辑的常用方法，以保护它免受全局名称空间的影响。示例如下：

// 命名空间和undefined作为参数传递，确保：

// 1.命名空间可以在局部修改，不重写函数外部上下文

// 2.undefined 的参数值是确保undefined，避免ES5规范里定义的undefined

(function (namespace, undefined) {

// 私有属性

var foo = "foo";

bar = "bar";

// 公有方法和属性

namespace.foobar = "foobar";

namespace.sayHello = function () {

say("Hello World!");

};

// 私有方法

function say(str) {

console.log("You said:" str);

};

})(window.namespace = window.namespace || {});

可扩展性是任何可伸缩命名空间模式的关键，使用IIFE可以轻松实现这一目的，我们可以再次使用IIFE给命名空间添加更多的功能。

6、命名空间注入

命名空间注入是IIFE的另一个变体，从函数包装器内部为一个特定的命名空间“注入”方法和属性，使用this作为命名空间代理，这种模式的优点是可以将功能行为应用到多个对象或命名空间。示例如下：

var myApplication = myApplication || {};

myApplication.utils = {};

(function () {

var value = 5;

this.getValue = function () {

return value;

}

// 定义新的子命名空间

this.tools = {};

}).apply(myApplication.utils);

(function () {

this.diagnose = function () {

return "diagnose";

}

}).apply(myApplication.utils.tools);

当前名称：前端开发知识：JavaScript命名空间常用方法
文章URL：https://www.cdcxhl.com/news2/254652.html

成都网站建设公司_创新互联，为您提供手机网站建设、建站公司、营销型网站建设、自适应网站、微信公众号、网站改版

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联