js命名空间的玩法详解

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);
    },
    .............................
}

总之后面就不再列举了,反正每一个js文件都有一个自己的命令空间,然后调用的时候带命名空间名字就可以了!

时间: 2024-08-26 19:20:47

js命名空间的玩法详解的相关文章

农场游戏系统开发怎么做?丰乐惠农场游戏玩法详解。

一.丰乐惠牧场系统介绍 乌鸡 9.9元 每天收益1元 15天共收益15元 北京鸭 99.9元 每天收益9元 15天共收益135元 藏猪 699.9元 每天收益67元 16天共收益1072元 白羊 1699.9元 每天收益170元 17天共收益2890元 藏獒 3499.9元 每天收益350元 18天共收益6300元 二.动态奖励 1级:5% 2-3级:2% 4-12级:1% 13-15级:2% 三.全球分红 1.当天直推有效会员3人,享受平台当天总业绩的2%(均分) 2.当天直推有效会员6人,享

微信QQ淘客裂变群的玩法详解

可能你不知道什么是淘客,但是你的QQ里面一定有几个"天猫淘宝秒杀群";或许你不经意间留意过这个群,"9.9包邮秒杀,速速抢啊!""大家赶快领卷,手慢无!"你会有疑问:这些商品为什么这么便宜?店主不赚钱吗? 那么,我来说说我做淘客的经历: 一.什么是淘客? 那到底什么是淘客呢?说的直白点,这些购物秒杀群做的就是淘客! 我一开始接触淘客是一个偶然的机会,我的一个哥们之前是做淘客的,平时也很玩的来,那时候快过年了,他找到我要我帮忙给他的群里面在年前每天

js对象浅拷贝和深拷贝详解

js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var

PHP中的命名空间(namespace)及其使用详解

PHP中的命名空间(namespace)及其使用详解 晶晶 2年前 (2014-01-02) 8495次浏览 PHP php自5.3.0开始,引入了一个namespace关键字以及__NAMESPACE__魔术常量(当然use关键字或use as嵌套语句也同时引入):那么什么是命名空间呢?php官网已很明确的进行了定义并形象化解释,这里直接从php官网copy一段文字[来源]. “什么是命名空间?从广义上来说,命名空间是一种封装事物的方法.在很多地方都可以见到这种抽象概念.例如,在操作系统中目录

c?#?中 ?s?o?c?k?e?t? ?、?T?C?P?C?l?i?e?n?t?、?T?C?P?L?i?s?t?e?n?e?r? ?用?法?详?解

Visual C#.Net网络程序开发-Socket篇 Microsoft.Net Framework为应用程序访问Internet提供了分层的.可扩展的以及受管辖的网络服务,其名字空间System.Net和System.Net.Sockets包含丰富的类可以开发多种网络应用程序..Net类采用的分层结构允许应用程序在不同的控制级别上访问网络,开发人员可以根据需要选择针对不同的级别编制程序,这些级别几乎囊括了Internet的所有需要--从socket套接字到普通的请求/响应,更重要的是,这种分

python命名空间与闭包函数详解

python命名空间与闭包函数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客主要介绍的知识点如下: 1>.三元运算 2>.命名空间 3>.global与nonlocal 4>.函数即变量 5>.嵌套函数 6>.闭包函数 一.三元运算 1 #!/usr/bin/env python 2 #_*_coding:utf-8_*_ 3 #@author :yinzhengjie 4 #blog:http://www.cnblogs.com/yi

js的offsetParent属性用法详解

js的offsetParent属性用法详解:此属性是javascript中较为常用的属性,对于它的良好掌握也是非常有必要的,下面就通过代码实例介绍一下它的用法,希望能够给需要的朋友带来一定的帮助.一.基本介绍:此属性可以返回距离指定元素最近的采用定位(position属性值为fixed.relative或者absolute)父级元素,如果父级元素中没有采用定位的元素,则返回body对象的引用.语法结构: obj.offsetParent 二.代码实例: <!DOCTYPE html> <

js 中中括号,大括号使用详解

一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数.如:var LangShen = {"Name":"Langshen","AGE":"28"};上面声明了一个名为"LangShen"的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性,所以访问时,应该用.(点)来层层访问:LangShen.Name.LangShen.AGE,当然我们也可以用数组的方式来访问,如:Lang

JS中的event 对象详解

JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的