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
PHP操作文件方法问答
Mar 16 PHP
深入eAccelerator与memcached的区别详解
Jun 06 PHP
解析php获取字符串的编码格式的方法(函数)
Jun 21 PHP
php利用单例模式实现日志处理类库
Feb 10 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
Aug 21 PHP
php实现window平台的checkdnsrr函数
May 27 PHP
yii2中添加验证码的实现方法
Jan 09 PHP
解读PHP的Yii框架中请求与响应的处理流程
Mar 17 PHP
thinkPHP中_initialize方法实例分析
Dec 05 PHP
PHP框架laravel的.env文件配置教程
Jun 07 PHP
Laravel5.5以下版本中如何自定义日志行为详解
Aug 01 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的ob_start来生成静态页面的方法分析
2011/03/09 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP中Array相关函数简介
2016/07/03 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
Structs界面控制层技术
2013/10/11 面试题
销售冠军获奖感言
2014/02/03 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
环境卫生倡议书
2014/08/29 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
党校党性分析材料
2014/12/19 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
Go语言空白表示符_的实例用法
2021/07/04 Golang
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript