理运用命名空间让js不产生冲突避免全局变量的泛滥
更新时间:2014年06月15日 11:26:12 投稿:whsnow
为了避免变量之间的覆盖与冲突,可以生成命名空间,命名空间是一种特殊的前缀,在不同的匿名函数中,根据功能声明一个不同的命名空间
为了避免变量之间的覆盖与冲突,可以生成命名空间,命名空间是一种特殊的前缀,在js中,通过{ }对象实现。
在不同的匿名函数中,根据功能声明一个不同的命名空间,每个匿名函数中GLOBAL对象的属性都不直接挂在GLOBAL上,而是挂在次匿名函数的命名空间下,如:
<script type="text/javascript">
var GLOBAL={}
</script>
<script type="text/javascript">
(function(){
var a=123, a1=256;
GLOBAL.A={}
GLOBAL.A.str=a;
})();
</script>
<script type="text/javascript">
(function(){
var b1=123, b2=256;
GLOBAL.B={}
GLOBAL.B.str=a;
})();
</script>
如果同一个匿名函数中的程序非常复杂,变量名很多,命名空间可以进一步扩展,生成二级命名空间:
<script type="text/javascript">
var GLOBAL={}
</script>
<script type="text/javascript">
(function(){
var a=123, a1=256;
GLOBAL.A={};
GLOBAL.A.CAT={};
GLOBAL.A.DOG={};
GLOBAL.A.CAT.name="mini";
GLOBAL.A.CAT.move=function(){
}
GLOBAL.A.DOG.name="mini";
GLOBAL.A.DOG.move=function(){
}
})();
</script>
因生成命名空间是非常常用的功能,可以进一步将生成命名空间的功能定义成一个函数,方便调用,如下:
<script type="text/javascript">
var GLOBAL={}
GLOBAL.namespace=function(str){
var arr=str.split("."), o=GLOBAL;
for(i=arr[0]=="GLOBAL"?1:0;i<arr.length; i++){
o[arr[i]]=o[arr[i]] || {};
o=o[arr[i]];
}
}
</script>
调用命名空间具体操作:
<script type="text/javascript">
//=============================================================
// 功能A
// 工程师甲
// email:ctkl68945@gmail.com msn:ctkl68945@hotmail.com"
// 2012-11-06
//=============================================================
(function(){
var a=123, a1="hello world";
GLOBAL.namespace("A.CAT");
GLOBAL.namespace("A.DOG");
GLOBAL.A.CAT.name="mini";
GLOBAL.A.CAT.move=function(){
}
GLOBAL.A.DOG.name="mini";
GLOBAL.A.DOG.move=function(){
}
GLOBAL.A.str=a;
GLOBAL.A.str1=a1;
})();
依次类似,无论多人的直接团队开发,还是个人的间接团队合作,都需要良好的可维护性。
1、添加必要的代码注释
2、让JS不产生冲突,需避免全局变量的泛滥,合理使用命名空间
在不同的匿名函数中,根据功能声明一个不同的命名空间,每个匿名函数中GLOBAL对象的属性都不直接挂在GLOBAL上,而是挂在次匿名函数的命名空间下,如:
复制代码 代码如下:
<script type="text/javascript">
var GLOBAL={}
</script>
<script type="text/javascript">
(function(){
var a=123, a1=256;
GLOBAL.A={}
GLOBAL.A.str=a;
})();
</script>
<script type="text/javascript">
(function(){
var b1=123, b2=256;
GLOBAL.B={}
GLOBAL.B.str=a;
})();
</script>
如果同一个匿名函数中的程序非常复杂,变量名很多,命名空间可以进一步扩展,生成二级命名空间:
复制代码 代码如下:
<script type="text/javascript">
var GLOBAL={}
</script>
<script type="text/javascript">
(function(){
var a=123, a1=256;
GLOBAL.A={};
GLOBAL.A.CAT={};
GLOBAL.A.DOG={};
GLOBAL.A.CAT.name="mini";
GLOBAL.A.CAT.move=function(){
}
GLOBAL.A.DOG.name="mini";
GLOBAL.A.DOG.move=function(){
}
})();
</script>
因生成命名空间是非常常用的功能,可以进一步将生成命名空间的功能定义成一个函数,方便调用,如下:
复制代码 代码如下:
<script type="text/javascript">
var GLOBAL={}
GLOBAL.namespace=function(str){
var arr=str.split("."), o=GLOBAL;
for(i=arr[0]=="GLOBAL"?1:0;i<arr.length; i++){
o[arr[i]]=o[arr[i]] || {};
o=o[arr[i]];
}
}
</script>
调用命名空间具体操作:
复制代码 代码如下:
<script type="text/javascript">
//=============================================================
// 功能A
// 工程师甲
// email:ctkl68945@gmail.com msn:ctkl68945@hotmail.com"
// 2012-11-06
//=============================================================
(function(){
var a=123, a1="hello world";
GLOBAL.namespace("A.CAT");
GLOBAL.namespace("A.DOG");
GLOBAL.A.CAT.name="mini";
GLOBAL.A.CAT.move=function(){
}
GLOBAL.A.DOG.name="mini";
GLOBAL.A.DOG.move=function(){
}
GLOBAL.A.str=a;
GLOBAL.A.str1=a1;
})();
依次类似,无论多人的直接团队开发,还是个人的间接团队合作,都需要良好的可维护性。
1、添加必要的代码注释
2、让JS不产生冲突,需避免全局变量的泛滥,合理使用命名空间
相关文章
前端使用Compressor.js实现图片压缩上传的详细过程
Compressor.js一个JavaScript图像压缩器,使用浏览器的原生canvas.toBlob API来执行压缩工作,这篇文章主要给大家介绍了关于前端使用Compressor.js实现图片压缩上传的详细过程,需要的朋友可以参考下2024-07-07
无语,javascript居然支持中文(unicode)编程!
无语,javascript居然支持中文(unicode)编程!...2007-04-04
javascript 循环语句 while、do-while、for-in、for用法区别
本文章介绍了在学习javascript中的循环语句的用法,包while、do-while、for-in、for它们之间的区别,也是常用的循环语句了,有需要的朋友可以了解一下2012-03-03
JavaScript 严格模式(use strict)用法实例分析
这篇文章主要介绍了JavaScript 严格模式(use strict)用法,结合实例形式分析了JavaScript 严格模式的基本功能、用法及操作注意事项,需要的朋友可以参考下2020-03-03


最新评论