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 相关文章推荐
PHP+DBM的同学录程序(5)
Oct 09 PHP
php adodb连接不同数据库
Mar 19 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
Aug 02 PHP
openflashchart 2.0 简单案例php版
May 21 PHP
php数组排序usort、uksort与sort函数用法
Nov 17 PHP
PHP+MySQL修改记录的方法
Jan 21 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
May 06 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
Jul 18 PHP
PHPExcel在linux环境下导出报500错误的解决方法
Jan 26 PHP
yii gridview实现时间段筛选功能
Aug 15 PHP
Laravel如何同时连接多个数据库详解
Aug 13 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
Mar 09 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往windows中添加用户
2006/12/06 PHP
一个捕获函数输出的函数
2007/02/14 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
关于VPN
2012/06/10 面试题
医院护士专业个人的求职信
2013/12/09 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
九年级化学教学反思
2014/01/28 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
供货协议书
2014/04/22 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js