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怎么改变src属性值

javascript之ssm+vue前后端分离框架整合实现

javascript如何处理事件冒泡

如何提取图片的主题色?

html标签伪元素绑定事件的三种方式

使用javascript的模块加载器

浅谈es6中的字符串(代码示例)

javascript与html的结合方法详解

如何更新javascript中的cookie?(代码示例)

javascript数组中常用的操作介绍(代码示例)

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




打赏

取消

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

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

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

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

评论

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