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 相关文章推荐
如何分别全角和半角以避免乱码
Oct 09 PHP
JS实现php的伪分页
May 25 PHP
php下用cookie统计用户访问网页次数的代码
May 09 PHP
php 常用类汇总 推荐收藏
May 13 PHP
PHP通过正则表达式下载图片到本地的实现代码
Sep 19 PHP
php使用正则表达式获取图片url的方法
Jan 16 PHP
php正则preg_replace_callback函数用法实例
Jun 01 PHP
php商品对比功能代码分享
Sep 24 PHP
Symfony生成二维码的方法
Feb 04 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
Mar 21 PHP
PHP简单检测网址是否能够正常打开的方法
Sep 04 PHP
php获取小程序码的实现代码(B类接口)
Jun 13 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
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
PHP Stream_*系列函数
2010/08/01 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
小学后勤管理制度
2014/01/14 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
英语系毕业生求职信
2014/07/13 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
档案接收函格式
2015/01/30 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
GPU服务器的多用户配置方法
2022/07/07 Servers