在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. 在Pycharm中自动添加时间日期作者等信息

    1.按照下面路径以此打开File→→Settings→→Editor→→File and code Templates 右侧找到Python Script,如下图 2.设置相关代码如下 ##!/usr ...

  2. 金蝶K3 WISE BOM多级展开_销售成本表

    /****** Object: StoredProcedure [dbo].[pro_bobang_SaleCost] Script Date: 07/29/2015 16:13:43 ******/ ...

  3. 全文搜索引擎Elasticsearch入门实践

    全文搜索引擎Elasticsearch入门实践 感谢阮一峰的网络日志全文搜索引擎 Elasticsearch 入门教程 安装 首先需要依赖Java环境.Elasticsearch官网https://w ...

  4. 【转】Oracle imp 总是不停地重复闪烁

    http://blog.itpub.net/7282477/viewspace-1003160/ 在dos下执行: imp username/password buffer=1000000 file= ...

  5. LNMP一键安装包添加虚拟主机、删除虚拟主机及如何使用伪静态

    本文主要介绍LNMP一键安装包添加虚拟主机.删除虚拟主机及如何使用伪静态. 一.添加虚拟主机通俗点就是在VPS/服务商上添加一个网站(域名). 需要执行如下命令:/root/vhost.sh 执行后会 ...

  6. web服务-2、四种方法实现并发服务器-多线程,多进程,协程,(单进程-单线程-非堵塞)

    知识点:1.使用多线程,多进程,协程完成web并发服务器 2.单进程-单线程-非堵塞也可以实现并发服务器 1.多进程和协程的代码在下面注释掉的部分,我把三种写在一起了 import socket im ...

  7. web理论知识--网页访问过程(附有Django的web项目访问流程)

    当我们闲暇之余想上网看看新闻,或者看个电影,通常的操作是:打开电脑.打开浏览器.输入网址.浏览页面信息.点击自己感兴趣的连接......那么有没有想过,这些网页从哪里来的?过程中计算机又做了什么事情了 ...

  8. Redis自学笔记:5.实践

    第5章实践 5.3 python与redis 5.3.1安装 pip install redis 5.3.2使用方法 自己补充内容:Ubuntu下redis开启远程连接 打开redis配置:sudo ...

  9. URL 链接中 井号#、问号?、连接符& 分别有什么作用?

    在一个 URL 中可以包含很多的内容,其中不仅仅是包含 26 个英文字母,10 个罗马数字,中文汉字,还可以拥有井号“#”.问号“?”.连接符“&”等三种最常见的符号,那么这些符号在网站中都有 ...

  10. 201771010126 王燕《面向对象程序设计(java)》第八周学习总结

    实验六 接口的定义与使用 实验时间 2018-10-18 1.实验目的与要求 (1) 掌握接口定义方法 JAVA中通过interface关键字定义接口: 接口中只能定义public static fi ...