时间:2021-05-28
当在同一个网页里引入10多个js文件之后,
各js中的同名函数就很容易冲突了。
比如xxx库里写了个addCssStyle方法,
yyy类库里也写了个addCssStyle方法,
而这两个方法的具体实现又有一定差别。
那么同时引用这两个组件的时候,函数冲突之后导致页面效果发生变化,
调试和修改都是非常痛苦的,如果为了避免冲突,
而放弃引用一些优秀的组件,那更是让人郁闷的事情。
为此,在封装javascript组件库的时候,请使用命名空间来避免冲突。
将所有的方法和变量都要按包名类名的方式来写。
(这个时候写代码的感觉和封装java的util方法一样方便,呵呵)
由此,我的js库按如下方式封装。
google了半天,都没现成的,于是自己摸索出来,示例代码如下:
(lizongbo原创!!!)
<script language="JavaScript" type="text/javascript" >
<!-- //初始化命名空间
var jscom = jscom ? jscom : {};
jscom.lizongbo = jscom.lizongbo ? jscom.lizongbo : {};
//第一种封装方法
jscom.lizongbo.util = jscom.lizongbo.util ? jscom.lizongbo.util : {
crtVersion : 'jscom.lizongbo.util version 0.0.1', //注意用逗号隔开
sayHello: function (str){
window.alert('hello : '+str +' by ' + this.getVersion()); //变量引用要加上this
},//注意用逗号隔开
getVersion :function (){
//alert(' jscom.lizongbo.util version ' + this.crtVersion);//变量引用要加上this
return this.crtVersion+' lizongbo';
}//注意不能够有逗号
}
//第二种封装方法
jscom.lizongbo.util2 =function (){};//重点是这行,它保证了下面的with调用
jscom.lizongbo.util2.crtVersion=' jscom.lizongbo.util2 version 0.0.2';
jscom.lizongbo.util2.sayHello = function(str){
with (jscom.lizongbo.util2) {//这里也是重点,不然会找不到getVersion方法。
window.alert('你好 : '+str +' by ' + getVersion());//这种方法不用加this
}
};
jscom.lizongbo.util2.getVersion = function(){
with (jscom.lizongbo.util2) {//这里也是重点,不然会找不到crtVersion变量。
return crtVersion+' lizongbo2';
}
};
var vutil1= jscom.lizongbo.util; //和java的import差不多好用
vutil1.sayHello('lizongbo'); //第一种调用
var vutil2= jscom.lizongbo.util2;
vutil2.sayHello('lizongbo');//第二种调用
//-->
</script>
把上面的代码复制网页里看看效果吧。
对比两种实现方式,现有代码按第二种方式改造最为方便。
再把js文件按命名空间命名,那样操作就更加方便了。
例如
<script type="text/javascript" src="/commons/scripts/jscom.lizongbo.util1.js"></script>
<script type="text/javascript" src="/commons/scripts/jscom.lizongbo.util2.js"></script>
只要都按此方式编写的库,再也不用担心引入多个js文件之后的函数冲突问题了。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
命名空间概述在PHP中,命名空间用来解决在编写类库或应用程序时创建可重用的代码如类或函数时碰到的两类问题:用户编写的代码与PHP内部的类/函数/常量或第三方类/
创建C#串口通信程序之命名空间System.IO.Ports命名空间中最重用的是SerialPort类。创建C#串口通信程序之创建SerialPort对象通过创
命名空间单例模式是JavaScript中最常见的一种模式,通过这种模式可以为我们提供一个命名空间,例如jQuery库的命名空间为jQuery或$。命名空间的使用
在上一节面JavaScript面向对象之命名空间中说了怎么定义JavaScript命名空间,这一节来说下紧接着的一个概念——类。虽然JavaScript中没有c
Javascript原生并不支持命名空间,需要变通来实现。在我们创建一个JavaScript库时,命名空间就显得举足轻重了,我们可以将组成这个JavaScrip