JavaScript中创建命名空间

引用:http://ourjs.com/detail/538d8d024929582e6200000c

在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();
时间: 2024-10-22 00:21:01

JavaScript中创建命名空间的相关文章

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

在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hello var'; }; function sayHello(name) { return 'Hello function'; }; sayHello(); 最终的输出为 > "Hello var" 为什么会这样,根据 StackOverFlow 的解释,实际上JavaScript的是

JavaScript中创建字典对象(dictionary)实例

这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象仅仅是个数组,无法提供通过关键字来获取保存的数据,jQuery源码中提供了一种非常好的方式来解决这个问题,先看一下源码: 复制代码代码如下: function createCache() { var keys = []; function cache(key, value) {  // Use (k

在Javascript 中创建JSON对象--例程分析

作者:iamlaosong 要想用程序从网页上抓数据,需要熟悉HTML和JavaScript语言,这里有一个在Javascript 中创建JSON对象的例程,学习并掌握其内容,在此对此例程做个注释,记录我掌握的知识,以备将来验证是否正确. 程序很简单,分三部分: 1.<h2>部分:用大字符显示标题: 2.<p>部分:显示一段信息的结构,但无内容,内容在后面添加: 3.<scrip>部分:Javascript程序,先定义了一个JSON结构的变量JSONObject,然后,

JavaScript中创建类

缘由:因为要给根据是否选中checkbox来动态增加ajax中data的属性(ajax的data属性格式的几种方法,参考http://www.jb51.net/article/46676.htm) data: "name=John&location=Boston", //第一种方式传参    data: {name:"John",location:"Boston"}  //第二种方式传参  (PS,个人感觉这里应该是写错了,应该是{“na

Javascript 中创建自定义对象的方法(设计模式)

Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. 1 var student = new Object(); 2 student.name = "xiao ming"; 3 student.age = 20; 4 student.getName = function () { 5 alert(this.name); 6 } 熟悉javascrip

javaScript 中创建json/转换字符串为json

在js 中创建创建json 对象: 1.直接定义json 对象 var employees = [ { "firstName":"Bill" , "lastName":"Gates" }, { "firstName":"George" , "lastName":"Bush" }, { "firstName":"Thom

JavaScript 中的命名空间

全局变量应该由有系统范围相关性的对象们保留,并且它们的命名应该避免含糊并尽量减少命名冲突的风险.在实践中,这意味着你应该避免创建全局对象,除非它们是绝对必须的. 所以你对此是怎么做的?传统方法告诉我们,最好的消除全局策略是创建少数作为潜在模块和子系统的实际命名空间的全局对象.我将探索几种有关命名空间的方式,并以我基于 James Edwards 最近的一篇文章得到的一个优雅.安全和灵活的解决方案结束. 静态命名空间 我用静态命名空间作为那些命名空间标签实际上硬编码的解决方案的涵盖性术语.是的,你

JavaScript中创建自定义对象的方法

本文内容参考JavaScript高级程序设计(第3版)第6章:面向对象的程序设计 ECMA-262中把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”我所理解的就是对象就是一个结构体,结构体中有一些它的基本属性以及对结构体处理的方法,把它们封装起来称为一个整体.JS中所有的对象都是基于一个引用类型创建,这个引用类型可以是原生类型,如Array,Date等,也可以是开发人员自定义的类型. 下面主要总结下JS中创建对象的几种模式,分析他们各自的优缺点. 1. 工厂模式 /****

【JavaScript】创建命名空间,Class,LOG

JxUnderscore(function (J, _, root) { var isWindow, deepObject, Namespace, Class, LOG; /** * 一个对象是否为window对象 * @param obj * @returns {boolean} */ isWindow = function (obj) { return !!obj && obj.window === window; }; /** * 用于打印日志的方法 */ LOG = (functi