当在同一个网页里引入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文件之后的函数冲突问题了。
推荐阅读
仿163填写邮件地址自动显示下拉（无优化）
复制代码 代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2>>>详细阅读
本文标题：javascript 命名空间以提高代码重用性
地址：http://www.17bianji.com/kaifa2/JS/29228.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示