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 相关文章推荐
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
vue监听对象及对象属性问题
Aug 20 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
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python得到windows自启动列表的方法
2018/10/14 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
骨干教师培训制度
2014/01/13 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014年宣传工作总结
2014/11/18 职场文书
北京故宫的导游词
2015/01/31 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
2016党校培训心得体会
2016/01/07 职场文书