JavaScript创建命名空间的5种写法

在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子:

代码如下:

var sayHello = function() {
  return 'Hello var';
};

function sayHello(name) {
  return 'Hello function';
};

sayHello();

最终的输出为

代码如下:

> "Hello var"

为什么会这样,根据 StackOverFlow 的解释,实际上JavaScript的是按如下顺序解析的。

代码如下:

function sayHello(name) {
  return 'Hello function';
};

var sayHello = function() {
  return 'Hello var';
};

sayHello();

不带var的function声明被提前解析了,因此现代的JS写法建议你始终使用前置var声明所有变量;

避免全局变量名冲突的最好办法还是创建命名空间,下面是在JS中合建命名空间的几种常用方法。

一、通过函数(function)创建

这是一种比较常见的写法,通过声明一个function实现,函数里设置初始变量,公共方法写入prototype,如:

代码如下:

var NameSpace = NameSpace || {};
/*
Function
*/
NameSpace.Hello = function() {
  this.name = 'world';
};
NameSpace.Hello.prototype.sayHello = function(_name) {
  return 'Hello ' + (_name || this.name);
};
var hello = new NameSpace.Hello();
hello.sayHello();

这种写法比较冗长,不利于压缩代码(jQuery使用fn代替prototype),而且调用前需要先实例化(new)。使用Object写成JSON形式可以写得紧凑些:

二、通过JSON对象创建Object


代码如下:

/*
Object
*/
var NameSpace = NameSpace || {};
NameSpace.Hello = {
    name: 'world'
  , sayHello: function(_name) {
    return 'Hello ' + (_name || this.name);
  }
};

调用

代码如下:

NameSpace.Hello.sayHello('JS');
> Hello JS;

这种写法比较紧凑,缺点是所有变量都必须声明为公有(public)的,导致所有对这些变量的引用都需要加this指示作用域,写法也略有冗余。

三、通过闭包(Closure)和Object实现

在闭包中声明好所有变量和方法,并通过一个JSON Object返回公有接口:

代码如下:

var NameSpace = NameSpace || {};
NameSpace.Hello = (function() {
  //待返回的公有对象
  var self = {};
  //私有变量或方法
  var name = 'world';
  //公有方法或变量
  self.sayHello = function(_name) {
    return 'Hello ' + (_name || name);
  };
  //返回的公有对象
  return self;
}());

四、Object和闭包的改进型写法

上个例子在内部对公有方法的调用也需要添加self,如:self.sayHello(); 这里可以最后再返回所有公有接口(方法/变量)的JSON对象。

代码如下:

var NameSpace = NameSpace || {};
NameSpace.Hello = (function() {
  var name = 'world';
  var sayHello = function(_name) {
    return 'Hello ' + (_name || name);
  };
  return {
    sayHello: sayHello
  };
}());

五、Function的简洁写法

这是一种比较简洁的实现,结构紧凑,通过function实例,且调用时无需实例化(new),方案来自stackoverflow:

代码如下:

var NameSpace = NameSpace || {};
NameSpace.Hello = new function() {
  var self = this;
  var name = 'world';
  self.sayHello = function(_name) {
    return 'Hello ' + (_name || name);
  };
};

欢迎补充。

(0)

相关推荐

  • javascript模拟命名空间

    在 C++ 和 C# 中,命名空间用于尽可能地减少名称冲突.例如,在 .NET Framework 中,命名空间有助于将 Microsoft.Build.Task.Message 类与 System.Messaging.Message 区分开来.JavaScript 没有任何特定语言功能来支持命名空间,但很容易使用对象来模拟命名空间.如果要创建一个 JavaScript 库,则可以将它们包装在命名空间内,而不需要定义全局函数和类,如下所示: var MSDNMagNS = {}; MSDNMag

  • 关于JavaScript命名空间的一些心得

    最近重构东西,碰到命名空间的设定,搜了一些知识,请教了一些高手,把自己的心得写下来相信大家都知道,window是顶级的,这里就不写window了,先忽略 1:关于顶级 复制代码 代码如下: var ns = ns || {}; 可以看到,其实就是如果发现没有这个对象,就自动创建new Object();如果有,就直接使用这个对象,这样就不会覆盖.2: 第二级,当然也可以在顶级的ns下创建第二级,即 复制代码 代码如下: ns.ModuleClass = {}; 可以看到,在ns下创建了一个类,当

  • js关于命名空间的函数实例

    本文实例讲述了js关于命名空间的函数.分享给大家供大家参考.具体如下: var MYAPP = MYAPP || {}; MYAPP.namespace = function(ns_string){ var parts = ns_string.split('.'); var parent = MYAPP; var i=0; if(parts[0]==="MYAPP"){ parts = parts.slice(1); } for(i=0 ; i<parts.length; i++

  • Javascript学习笔记之函数篇(六) : 作用域与命名空间

    在之前的介绍中,我们已经知道 Javascript 没有块级作用,只有函数级作用域. 复制代码 代码如下: function test() { // a scope     for(var i = 0; i < 10; i++) { // not a scope         // count     }     console.log(i); // 10 } Javascript 中也没有显示的命名空间,这就意味着一切都定义在全局作用域中.每一次引用一个变量时,Javascript 会往上遍

  • JavaScript 命名空间 使用介绍

    使用过Java.C#的同学对命名空间非常的熟悉,在复杂的系统中会有N多的函数.对象,语言提供的.架构预定义的,这么多的函数和对象,由于编程规范要求起有实际意义的名字,难免会重名发生错误调用,而有了命名空间烦恼就没有了,不但可以分类组织函数与对象,还可以形成隔离,解决重名问题. 使用JavaScript就没有这么舒服了,Javascript只有函数作用域,什么块儿啊.神马文件啊统统都认为是一个命名空间的,有时候因为一些重名问题导致的错误让人莫名其妙,难以调试解决. 一个简单的例子 复制代码 代码如

  • js命名空间写法示例

    本文实例分析了js命名空间写法.分享给大家供大家参考,具体如下: 很早知道这种写法,由于基础面向对象不够扎实一直在回避,但是面对整站这种方法还是有必要会 html部分: <div id="div1">111</div> <div id="div2">现实</div> <div id="div3">层</div> <div class="tab">

  • Javascript 命名空间模式

    然而,在不同的文件中给一个命名空间添加属性的时候,首先要保证这个命名空间是已经存在的,同时不对已有的命名空间造成任何破坏.可以通过非破坏性的命名空间函数实现: 复制代码 代码如下: var KUI = KUI || {};KUI.utils = KUI.utils || {}; KUI.utils.namespace = function(ns){    var parts = ns.split("."),        object = KUI,        i, len; if(

  • javascript简单实现命名空间效果

    Javascript原生并不支持命名空间,需要变通来实现. 在我们创建一个JavaScript库时,命名空间就显得举足轻重了,我们可以将组成这个JavaScript库的零散的JavaScript文件(*.js)封装在命名空间中,而无须定义全局的函数或类.比如在本章节多次出现的Person,我们就可以作为库的一部分封装到合适的命名空间中: Code 5-13: 复制代码 代码如下: var com = {};com.anyjava = {};com.anyjava.Person = functio

  • javascript实现相同事件名称,不同命名空间的调用方法

    本文实例讲述了javascript实现相同事件名称,不同命名空间的调用方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  • namespace.js Javascript的命名空间库

    github:https://github.com/hirokidaichi/namespace-js 定义Namespace对象: var Namespace 现在来具体看一下Namespace对象的定义,它是一个NamespaceDefinition对象.该对象是一个函数对象(NamespaceDefinition对象的构造函数,如果不给参数的话就默认生成一个main的命名空间),还有三个属性,Object,Definition,Proc.其值依次为NamespaceObjectFactor

  • JS模块与命名空间的介绍

    起因将代码组织到类中的一个重要原因是让代码更加"模块化",可以在很多不同的场景中实现代码的重用.但类不是唯一的模块化代码的方式. 一般来讲,模块是一个独立的JS文件.模块文件可以包含一个类定义.一组相关类.一个实用函数库或者一些待执行的代码. 模块化的目标是支持大规模的程序开发,处理分散源中代码的组装,并且能让代码正确运行,哪怕包含了不需要的模块代码,也可以正确执行代码. 理想状态下,所有模块都不应当定义超过一个全局标识. 模块函数通过把模块定义在某个函数的内部来实现,定义的变量和函数

随机推荐