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写MySQL数据 实现代码
Jun 15 PHP
火车头discuz6.1 完美采集的php接口文件
Sep 13 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
Oct 25 PHP
有关PHP中MVC的开发经验分享
May 17 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
Jun 28 PHP
PHP与Java进行通信的实现方法
Oct 21 PHP
PHP闭包实例解析
Sep 08 PHP
php获取远程文件大小
Oct 20 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
Mar 10 PHP
PHP微信开发之查询城市天气
Jun 23 PHP
PHP实现移除数组中为空或为某值元素的方法
Jan 07 PHP
php 的多进程操作实践案例分析
Feb 28 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 stripos()函数及注意事项的分析
2013/06/08 PHP
php遍历CSV类实例
2015/04/14 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
Web开发之JavaScript
2012/03/29 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python八皇后问题的解决方法
2018/09/27 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
商铺门面租房协议书
2014/10/21 职场文书
教师个人发展总结
2015/02/11 职场文书
看上去很美观后感
2015/06/10 职场文书
Python 绘制多因子柱状图
2022/05/11 Python