js命名空间

最新推荐文章于 2020-09-01 08:17:23 发布

dinxin横刀一笑

最新推荐文章于 2020-09-01 08:17:23 发布

阅读量420

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/u011365716/article/details/51784481

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.首先为什么要用js命名空间
在我们的项目中，如果多个人为同一个页面写js的话，命名冲突就有可能发生，如果所有的函数都是全局的话，如下：
a.js中
function com()
{
.....
}
b.js中
function com()
{
........
}
且一个页面同时引用了这两个js文件，这样我们调用的时候会出问题，可能老是调用到第一个文件里面的函数了，我之前在做一个项目的时候就碰到了这个问题，我

自己b.js文件中ajax的响应函数的名字和a.js文件中的ajax响应函数名字一样，结果，ajax响应数据每次到一个a.js中去了，而两个响应函数要做的功能不一样，所

以出问题了，后来我们是把b.js的ajax的响应函数的名字重命名了，后来就没有冲突了，（当时我不知道用命令空间的办法，所以采用这种方法）
其实，如果我弄一个命名空间，这样a.js里面的函数在a空间中，b.js里面的函数在b命令空间中。
这样我们调用的时候就可以如下调用：
a.com();
b.com();
2.js如何制造命名空间
我们知道很多语言，天生支持命名空间，比如c++,java，等等，但是我们的javascript并没有在其语法中有规定专门为命名空间的提供什么语法，但是如果我

们熟悉js的对象字面量的表示法之后，我们就可以彻底的理解js命名空间的玩法了。（其实就是利用js对象字面量这个语法来实现js的命名空间的）
下面我们来介绍一下s命名空间的玩法，还是接着上面的上面提出的这个问题，要想实现如下调用:
a.com();
b.com();
可以用如下方法：
var a={
com: function(){
..........
}
}
var b={
com: function(){
}
}
上面都是采用对象字面量的方法，定义了两个对象a和对象b是全局的,且两个对象里面都有一个com方法，没有变量，(我们知道js里面的对象可以拥有属性和方法)，

可以看得到我们已经实现js的命令空间了。
例如：登录界面有一个login.js文件，他的命名空间为：
var BP={
login:{
//其余关于这个登录页面的函数和全局变量写在这个里面，即在这个命名空间里面
}
}
这个表示全局对象BP里面有一个login对象，然后关于对登录界面的操作都在的属性和方法都要放在login对象里面，就是关于这个页面的操作在命名空间

BP.login里面。BP便是项目名字，loging表示本js的功能
很多人可能不习惯这种方式，比较习惯比如BP.login这种方式的来注册一个命令空间 nameSpace.Register("BP.login")（比较符合其他语言的命令空间）;

我们只需要在Resister这个函数里面动态的创建出BP对象和BP的子对象login。
动态创建对象我们可以通过两种方法：1.window 对象实现 2.eval实现。
我们只介绍通过注册window方法
我们知道定义一个对象可以这样，window['BP']={}; window.BP['login']={};表示window对象有一个子对象BP，BP有一个子对象login。
下面就是采用这种方法来动态的拆分字符串，然后用上面这种方法动态创建对象的
var nameSpace = nameSpace || {};
(function () {
var global = window;
/**
*
* @param {} nsStr
* @return {}
*/
nameSpace.ns = function (nsStr) {
var parts = nsStr.split("."),
root = global,
max,
i;
for (i = 0, max = parts.length ; i < max ; i++) {
//如果不存在，就创建一个属性
if (typeof root[parts[i]] === "undefined") {
root[parts[i]] = {};
}
root = root[parts[i]];
}
return root;
};
})();
逐一解释一下
a.表示nameSpace定义成一个对象
var nameSpace = nameSpace || {};
b.//匿名函数
(function(){
//code,运行的代码
})();
注意：()在JavaScript中有两种含义：一是运算符；二是分隔符。
上面匿名函数需要说明两点：
①红色括号里是一个匿名函数，红色括号代表分割，表示里面的函数是一个部分；
②绿色括号表示一个运算符，表示红色括号里面的函数要运行；相当于定义完一个匿名函数后就让它直接运行。
3.使用命名空间
在我们登录的界面的login.js文件中，我们一般希望我们的每一个js文件里面的代码都放在自己的命名空间里面，这样多个js文件之间就不会有命名冲突了
login.js文件内容如下：
nameSpace.ns("BP.login"); //注册命令空间
BP.login={
min_height:660,//页面最小高度
min_widht:1024,//页面最小宽度
isIE:false,
init:function(){
this.isIE=$.browser.msie;
this.regEvent();
this.initPage();
BP.page.i18nInit();//国际化加载
}
........
.......
}
使用命名空间里面的函数：
<html>
<head>
<meta name="others" content="login_page">
<script type="text/javascript">
$(document).ready(function(){
BP.login.init();
});
</script>
</head>
<body>
</body>
</html>
utils.js文件内容如下：
nameSpace.ns("BP.utils");
BP.utils = {
time:3000,
timeOut:null,
interValForFake:null,
isProgressBarShow:false,
timeOutReturn:'',
alert:function(content){
var dom=$("#alert_tip");
$(".alert_tip_content",dom).text(content);
if(dom.hasClass("alert_tip_system_config_bg")){//系统设置中
var tbW=$("#tb").width();
var left=tbW/2 -dom.width()/2 +180;
$("#alert_tip").css({"left":left,"top":38});
}else{
var bw=$("body").width();
var left=bw/2 -dom.width()/2;
$("#alert_tip").css("left",left);
}
dom.show();
this.timeOutReturn = setTimeout(function(){
dom.fadeOut(2000);
},2000);
},
.............................
｝

dinxin横刀一笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js命名空间

1.首先为什么要用js命名空间在我们的项目中，如果多个人为同一个页面写js的话，命名冲突就有可能发生，如果所有的函数都是全局的话，如下：a.js中function com(){ .....}b.js中function com(){ ........}且一个页面同时引用了这两个js文件，这样我们调用的时候会出问题，可能老是调用到第一个文件里面的函数了...
复制链接

扫一扫