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

var sayHello = function() {

return 'Hello var';

};

function sayHello(name) {

return 'Hello function';

};

sayHello();

最终的输出为

> "Hello var"

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

function sayHello(name) {

return 'Hello function';

};

var sayHello = function() {

return 'Hello var';

};

sayHello();

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

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

通过函数(function)创建

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

var NameSpace = window.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 = window.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 = window.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 = window.NameSpace || {};
NameSpace.Hello = (function() {
  var name = 'world';
  var sayHello = function(_name) {
    return 'Hello ' + (_name || name);
  };
  return {
    sayHello: sayHello
  };
}());

Function的简洁写法

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

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

调用

NameSpace.Hello.sayHello();

js中创建命名空间的几种写法的更多相关文章

  1. 在js中创建命名空间的几种写法

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

  2. 在JavaScript中创建命名空间的几种写法

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

  3. JS中创建函数的三种方式及区别

    1.函数声明 function sum1(n1,n2){ return n1+n2; }; 2.函数表达式,又叫函数字面量 var sum2=function(n1,n2){ return n1+n2 ...

  4. js中匿名函数的N种写法

    匿名函数没有实际名字,也没有指针,怎么执行? 关于匿名函数写法,很发散~ +号是让函数声明转换为函数表达式.汇总一下 最常见的用法: 代码如下: (function() {  alert('water ...

  5. JavaScript中创建命名空间

    引用:http://ourjs.com/detail/538d8d024929582e6200000c   在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺 ...

  6. java中for循环的6种写法

    有些写法上的说明写的过于武断,可能有很多不当之处,仅供参考.   package ForLoop; import java.util.ArrayList; import java.util.Itera ...

  7. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  8. 关于JQ中ready()方法的几种写法总结

    ——习惯贵在坚持,天才在于积累. 好久没写博客的我,似乎是忘记了当初写博客的初衷是要在博客笔记中提升自己的写作能力和积累自己的知识要点. 废话不多说. ready()方法作用: 在页面加载完成后,立即 ...

  9. js中声明Number的五种方式

    转载自:http://www.jb51.net/article/34191.htm <!DOCTYPE html> <html> <head> <meta c ...

随机推荐

  1. SpringBoot 多数据源分布式事务

    1.pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  2. JVM 组成以及各部分作用

    1.Java虚拟机的体系结构 2.jvm在系统中的布局 3.jvm装载一个类 当一个classLoder启动的时候,classLoader的生存地点在jvm中的堆,然后它会去主机硬盘上将A.class ...

  3. Ubuntu18.04安装Python虚拟环境

    仅为使用Ubuntu18.04的Python开发人员作参考 1.安装Ubuntu18.04虚拟环境 sudo apt install virtualenv sudo apt install virtu ...

  4. ionic2自定义radio样式

    刚开始以为用的是字体图标,结果翻了代码一看竟然是通过纯css实现的,图标模式用的是ios,代码如下: .radio-ios .radio-checked { margin:; border-radiu ...

  5. Linux history显示时间/用户/ip的设置

    在使用linux服务器的时候发生一些不知道谁操作的问题,google一下说history命令可以查看到历史记录,用过之后发现还是不够详细,再google,原来可以自己设置history的显示. 记录设 ...

  6. net core体系-web应用程序-4asp.net core2.0 项目实战(1)-10项目各种全局帮助类

    本文目录 1.  前沿2.CacheHelper基于Microsoft.Extensions.Caching.Memory封装3.XmlHelper快速操作xml文档4.SerializationHe ...

  7. 机器学习之--KNN算法简单实现

    # # kNN 分类算法 a = np.array([[1,1],[1.2,1.5],[0.3,0.4],[0.2,0.5]]) #构造样本数据 labels = ['A','A','B','B'] ...

  8. fiddler基本功能介绍

    一.几种主流的抓包工具的对比: Wireshark:通用的抓包工具,抓取信息量庞大,详细.通常需要过滤才可容易得到有用信息.如果只抓http请求个人认为有点大材小用. Firebug.httpWatc ...

  9. 读取InputStream 中的内容

      读取InputStream 中的内容 ]) { , len); //把读取到的内容写到输出流中 } //<4> 把字节数组转换为字符串 String content = baos.to ...

  10. Struts2深入

    Struts2架构剖析 1.客户端向Servlet容器(如Tomcat)提交一个请求 2.请求经过一系列过滤器(如ActionContextCleanUp过滤器等) 3.核心控制器被调用,询问Acti ...