OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

在JavaScript中创建命名空间的几种写法


分享到
分类 JS学习   关键字 JavaScript   发布 newghost  1401785602467
注意 转载须保留原文链接,译文链接,作者译者等信息。  
在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 = window.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 = window.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 = window.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 = window.NameSpace || {};
NameSpace.Hello = (function() {
  var name = 'world';
  var sayHello = function(_name) {
    return 'Hello ' + (_name || name);
  };
  return {
    sayHello: sayHello
  };
}());

Function的简洁写法

这是一种比较简洁的实现,结构紧凑,通过function实例,且调用时无需实例化(new),方案来自stackoverflow

var NameSpace = window.NameSpace || {};
NameSpace.Hello = new function() {
  var self = this;
  var name = 'world';
  self.sayHello = function(_name) {
    return 'Hello ' + (_name || name);
  };
};

调用

NameSpace.Hello.sayHello();


注* 相关文章: 我最喜欢的jQuery插件模板

社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 编程是一个没有前途的工作
  2. 是什么让Node.js比Java更快?
  3. 我不想雇佣女性
  4. 现在,你为什么应该学Node.js
  5. Google正在拖互联网的后腿
  6. JavaScript中NaN的秘密
  7. 使用集群(recluster)扩展多线程Node.JS
  8. 用JavaScript的5个原因
  9. jQuery:在一个回调中处理多个请求
  10. 趣图:在NodeJS程序中有未处理的异常
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. JavaScript中NaN的秘密
  2. jQuery:在一个回调中处理多个请求
  3. 使用集群(recluster)扩展多线程Node.JS
  4. 抛弃jQuery,深入原生的JavaScript
  5. 使用Backbone构建精美应用的7条建议
  6. 在jQuery API文档中并未提及的get用法,只有读了源码才会知道哦
  7. 如何在一个VPS上连接Node.js到一个MongoDB数据库?
  8. 用Orchestrate 5步快速创建Node.js应用
  9. iFrame的妙用
  10. JavaScript的MVC模式向导

 关键字 - JavaScript
  1. 7个最新的实用性 JavaScript MV*框架
  2. 抛弃jQuery,深入原生的JavaScript
  3. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷
  4. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  5. 用HTML5原生实现拖放或排序
  6. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  7. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  8. OnceIO模块开发:模块注册、模块路由、静态文件重定向以及如何开发与设计一个功能扩展模块
  9. JavaScript中NaN的秘密
  10. 从一行CSS调试代码中学到的JavaScript知识

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号