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


Posted in PHP onJune 24, 2014

在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);

  };

};

欢迎补充。
PHP 相关文章推荐
用PHP4访问Oracle815
Oct 09 PHP
php设计模式 Observer(观察者模式)
Jun 26 PHP
解析使用ThinkPHP应该掌握的调试手段
Jun 20 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
Sep 16 PHP
web server使用php生成web页面的三种方法总结
Oct 28 PHP
使用php验证复选框有效性的示例
Nov 13 PHP
php计算数组不为空元素个数的方法
Jan 27 PHP
PHP实现货币换算的方法
Nov 29 PHP
php实现的任意进制互转类分享
Jul 07 PHP
PHP基于新浪IP库获取IP详细地址的方法
May 04 PHP
PHP经典实用正则表达式小结
May 04 PHP
Laravel 5.5 实现禁用用户注册示例
Oct 24 PHP
PHP获取windows登录用户名的方法
Jun 24 #PHP
PHP获取MySql新增记录ID值的3种方法
Jun 24 #PHP
PHP判断表单复选框选中状态完整例子
Jun 24 #PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
Jun 24 #PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
Jun 24 #PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
Jun 23 #PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
Jun 23 #PHP
You might like
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
PHP 单引号与双引号的区别
2009/11/24 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
使用python绘制cdf的多种实现方法
2020/02/25 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
大学自我评价
2014/02/12 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js