在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. HiveQl 基本查询

    1 基本的Select 操作 SELECT [ALL | DISTINCT] select_expr, select_expr, ...FROM table_reference[WHERE where ...

  2. Sprite组件和Button组件的使用

    一.Sprint组件的使用 1.游戏中显示一张图片,通常我们称之为"精灵" sprite 2.cocos creator如果需要显示一个图片,那么需要在节点上挂一个精灵组件,为这个 ...

  3. iOS关键词weak和assign的区别

    一.区别 首先说说在什么情况下使用 weak 关键字 1.ARC中,在有可能出现循环引用的时候,往往要通过让其中一端使用weak来解决,比如:delegate 的代理属性. 2.自身已经对它有过一次强 ...

  4. 手把手带你使用JS-SDK自定义微信分享效果

    https://www.cnblogs.com/backtozero/p/7064247.html

  5. SignalR 实时推送消息

    业务场景 以前做过一个东西,就是当数据库有数据更新的时候,能够自动更新到前台,那时候signalr还没出现的时候,需要自己实现轮询读库,对于数据库和程序都是比较郁闷的事情.现在利用SignalR解决数 ...

  6. IOC应用之 Ninject

    什么是Ninject Ninject是一套.Net平台下的高效,超轻量级的依赖注入库.它可以帮助你实现应用程序的松耦合,高内聚,同时也能很灵活的把它们进行组合在一起.借助与Ninject的帮助,代码的 ...

  7. python TextMining

    01.Crawling url_request # -*- coding: utf-8 -*- """ Created on Sun Feb 17 11:08:44 20 ...

  8. SQL反模式学习笔记12 存储图片或其他多媒体大文件

    目标:存储图片或其他多媒体大文件 反模式:图片存储在数据库外的文件系统中,数据库表中存储文件的对应的路径和名称. 缺点:     1.文件不支持Delete操作.使用SQL语句删除一条记录时,对应的文 ...

  9. 咸鱼入门到放弃3--tomcat

    Tomcat学习与使用 一. Tomcat安装及配置 二.项目部署(虚拟目录映射) Web应用开发好后,若想供外界访问,需要把web应用所在目录交给web服务器管理,这个过程称之为虚似目录的映射. 虚 ...

  10. Hibernate根据实体类自动创建表

    Hibernate支持自动建表,在开发阶段很方便,可以保证hbm与数据库表结构的自动同步. 如何使用呢?很简单,只要在hibernate.cfg.xml里加上如下代码 Xml代码<propert ...