在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子:

var sayHello = function() {

return 'Hello var';

};

function sayHello(name) {

return 'Hello function';

};

sayHello();

最终的输出为

> "Hello var"

为什么会这样,实际上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)

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();

js中创建命名空间的几种写法的更多相关文章

  1. 在js中创建命名空间的几种写法

    在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子:   var sayHello = function() { return 'H ...

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

    在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hel ...

  3. JS中创建函数的三种方式及区别

    1.函数声明 function sum1(n1,n2){ return n1+n2; }; 2.函数表达式,又叫函数字面量 var sum2=function(n1,n2){ return n1+n2 ...

  4. js中匿名函数的N种写法

    匿名函数没有实际名字,也没有指针,怎么执行? 关于匿名函数写法,很发散~ +号是让函数声明转换为函数表达式.汇总一下 最常见的用法: 代码如下: (function() {  alert('water ...

  5. JavaScript中创建命名空间

    引用:http://ourjs.com/detail/538d8d024929582e6200000c   在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺 ...

  6. java中for循环的6种写法

    有些写法上的说明写的过于武断,可能有很多不当之处,仅供参考.   package ForLoop; import java.util.ArrayList; import java.util.Itera ...

  7. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  8. 关于JQ中ready()方法的几种写法总结

    ——习惯贵在坚持,天才在于积累. 好久没写博客的我,似乎是忘记了当初写博客的初衷是要在博客笔记中提升自己的写作能力和积累自己的知识要点. 废话不多说. ready()方法作用: 在页面加载完成后,立即 ...

  9. js中声明Number的五种方式

    转载自:http://www.jb51.net/article/34191.htm <!DOCTYPE html> <html> <head> <meta c ...

随机推荐

  1. mac os app 开发

    macOS 新手开发:第 1 部分 macOS 新手开发:第 2 部分 macOS 新手开发:第 3 部分

  2. 寻找符合条件的最短子字符串——SLIDING WINDOW

    简介 用一个可伸缩的窗口遍历字符串,时间复杂度大致为O(n).适用于“寻找符合某条件的最小子字符串”题型. 题目 链接 求某字符串T中含有某字符串S的所有字符的最小子字符串.如果不存在则返回" ...

  3. 将LibreOffice文档转换为豆瓣日记

    豆瓣日记的编辑器一直以来都只支持纯文本的,因此无法将原先在LibreOffice中写的带有简单格式的文章导出.由于我在豆瓣主要写一些随笔性的内容,所以它们在LibreOffice中排版时也并未用到什么 ...

  4. SQL数据库分页OFFSET FETCH NEXT

    SELECT * FROM dbo.UMS_System_Menu AS USM ORDER BY USM.MenuCode OFFSET ROW --跳过前10条 ROW ONLY --取20条

  5. day26 面向对象 单例模式总结

    如果是在python2中,就需要手动继承object, 基于__new__方法 基于__new__方法 class Foo(object): def __new__(cls,*args,**kwarg ...

  6. B - Housewife Wind-树链剖分-树状数组

    思路:边权转化到点权上,统一把每一条边的边权集中到深度较深的点上去. #include<stdio.h> #include<iostream> #include<cstr ...

  7. 导入Maven 工程pom.xml首行报错解决方法

    1.利用IDE导入一个Maven工程,但是pom.xml文件首行报错,发现是maven版本需要升级 2.在pom.xml文件 增加配置 <properties> <maven-jar ...

  8. 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第5章编程练习7

    #include <iostream>#include <cstring>const MAXSIZE=100;using namespace std;int main (){  ...

  9. RTMP 摄像头推流至七牛云直播

    设置图 报警设置 可以图片和视频保存到服务器,通过 ftp sd 卡数据 http://192.168.1.101/sd/20190127/ rtmp 推流 参考文档 淘宝凯锐视讯RTMP推流说明书 ...

  10. 循环结构while

    Note:高能:语句结构都是由关键字开头,用冒号结束! 一:语句结构        while 判断条件:            语句  二:基本规则 (1)使用缩进来划分语句块,相同缩进数的语句在一 ...