JavaScript创建命名空间的多种玩法


本文摘自PHP中文网,作者逆旅行人,侵删。

2021040209194670972.jpg

JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,所以为了避免全局变量名冲突,创建命名空间成为最优解。

1.通过闭包(Closure)和Object实现

在闭包中声明好所有变量和方法,并通过一个JSON Object返回公有接口:

1

2

3

4

5

6

7

8

9

10

11

12

13

var NameSpace = NameSpace || {};

 NameSpace.Hello = (function() {  

 //待返回的公有对象 

  var self = {};  

  //私有变量或方法  

  var name = 'world'

   //公有方法或变量  

   self.sayHello = function(_name) {   

    return 'Hello ' + (_name || name); 

     } ;  

     //返回的公有对象  

     return self;

}());

2.通过JSON对象创建Object,代码如下:

1

2

3

4

5

var NameSpace = NameSpace || {};

NameSpace.Hello = {     name: 'world'   , sayHello: function(_name) {  

  return 'Hello ' + (_name || this.name); 

   }

 };

3.通过函数(function)创建:(较为复杂)

这是一种比较常见的写法,通过声明一个function实现,函数里设置初始变量,公共方法写入prototype,如:

1

2

3

4

5

6

7

8

9

10

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

4.通过函数(function)创建:(较为简洁)

1

2

3

4

5

6

7

8

var NameSpace = NameSpace || {};

NameSpace.Hello = new function() {  

    var self = this;  

    var name = 'world';  

    self.sayHello = function(_name) {   

     return 'Hello ' + (_name || name); 

      };

 };

推荐:《2021年js面试题及答案(大汇总)》

以上就是JavaScript创建命名空间的多种玩法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

javascript中string方法有哪些

javascript中函数的调用和this的指向介绍(代码)

html5多线程javascript解决方案web worker-专用worker和共享worker的详细代码介绍

javascript实现无限级递归树的代码示例

javascript的常用事件有哪些

javascript的超集是什么

javascript中$是什么意思

如何使用canvas画一个微笑的表情(代码示例)

javascript内置对象的常用方法有哪些

在html文档中嵌入javascript的四种方法

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...