通过函数（function)创建 命名空间

避免全局变量名冲突的最好办法还是创建命名空间，下面是在JS中合建命名空间的几种常用方法。
 
 
通过函数（function)创建
 
这是一种比较常见的写法，通过声明一个function实现，函数里设置初始变量，公共方法写入prototype，如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> NameSpace.Hello </title>
  <meta charset="UTF-8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
<script type="text/javascript">

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

alert(hello.sayHello());
alert(hello.sayHello('Jim'));
</script>
 </body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> NameSpace.Hello </title>
  <meta charset="UTF-8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
<script type="text/javascript">
//这种写法比较冗长，不利于压缩代码（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);
  },
};

//调用
//
alert(NameSpace.Hello.sayHello('JS'));
alert(NameSpace.Hello.sayHello());
//
//这种写法比较紧凑，缺点是所有变量都必须声明为公有(public)的，导致所有对这些变量的引用都需要加this指示作用域，写法也略有冗余。
//

</script>
 </body>
</html>

 

posted @ 2017-12-25 10:59  sky20080101  阅读(163)  评论(0)    收藏  举报