javascript 命名空间以提高代码重用性


Posted in Javascript onNovember 13, 2008

当在同一个网页里引入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文件之后的函数冲突问题了。

Javascript 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
JavaScript面向对象之体会[总结]
Nov 13 #Javascript
js option删除代码集合
Nov 12 #Javascript
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 #Javascript
javascript显示选择目录对话框的代码
Nov 10 #Javascript
JavaScript XML实现两级级联下拉列表
Nov 10 #Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 #Javascript
js 目录列举函数
Nov 06 #Javascript
You might like
PHP学习之PHP变量
2006/10/09 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python mock测试的示例
2020/10/19 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
工程资料员岗位职责
2014/03/10 职场文书
公司董事长岗位职责
2014/06/08 职场文书
个人总结与自我评价
2014/09/18 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
升学宴来宾致辞
2015/07/27 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
详解Redis集群搭建的三种方式
2021/05/31 Redis
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python