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

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

赞 (0)

相关推荐

  • JavaScript创建命名空间(namespace)的最简实现

    最近看Ext源代码,看到了其实现命名空间函数的实现方法: Ext NameSpace实现代码:        复制代码 代码如下: namespace : function(){              var a=arguments, o=null, i, j, d, rt;              for (i=0; i<a.length; ++i) {                  d=a[i].split(".");                  rt = d

  • JavaScript 面向对象之命名空间

    在小项目中对于JavaScript使用,只要写几个function就行了.但在大型项目中,尤其是在开发追求良好的用户体验的网站中,如SNS,就会用到大量的JavaScrpt,有时JavaScript的工作量胜过了C#,这时写一堆function,就会显得很乱,杂乱无章,甚至会出现命名冲突,管理和维护起来都很麻烦.对于这种情况我们就需要使用面向对象的思想来开发JavaScript.那我们就这样作罢: 对于一个项目,首先要有个命名空间.所以我们首先要做的是定义一个函数来注册命名空间.代码如下: 复制

  • Javascript 命名空间模式

    然而,在不同的文件中给一个命名空间添加属性的时候,首先要保证这个命名空间是已经存在的,同时不对已有的命名空间造成任何破坏.可以通过非破坏性的命名空间函数实现: 复制代码 代码如下: var KUI = KUI || {};KUI.utils = KUI.utils || {}; KUI.utils.namespace = function(ns){    var parts = ns.split("."),        object = KUI,        i, len; if(

  • javascript模拟命名空间

    在 C++ 和 C# 中,命名空间用于尽可能地减少名称冲突.例如,在 .NET Framework 中,命名空间有助于将 Microsoft.Build.Task.Message 类与 System.Messaging.Message 区分开来.JavaScript 没有任何特定语言功能来支持命名空间,但很容易使用对象来模拟命名空间.如果要创建一个 JavaScript 库,则可以将它们包装在命名空间内,而不需要定义全局函数和类,如下所示: var MSDNMagNS = {}; MSDNMag

  • namespace.js Javascript的命名空间库

    github:https://github.com/hirokidaichi/namespace-js 定义Namespace对象: var Namespace 现在来具体看一下Namespace对象的定义,它是一个NamespaceDefinition对象.该对象是一个函数对象(NamespaceDefinition对象的构造函数,如果不给参数的话就默认生成一个main的命名空间),还有三个属性,Object,Definition,Proc.其值依次为NamespaceObjectFactor

  • JavaScript 命名空间 使用介绍

    使用过Java.C#的同学对命名空间非常的熟悉,在复杂的系统中会有N多的函数.对象,语言提供的.架构预定义的,这么多的函数和对象,由于编程规范要求起有实际意义的名字,难免会重名发生错误调用,而有了命名空间烦恼就没有了,不但可以分类组织函数与对象,还可以形成隔离,解决重名问题. 使用JavaScript就没有这么舒服了,Javascript只有函数作用域,什么块儿啊.神马文件啊统统都认为是一个命名空间的,有时候因为一些重名问题导致的错误让人莫名其妙,难以调试解决. 一个简单的例子 复制代码 代码如

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

    当在同一个网页里引入10多个js文件之后, 各js中的同名函数就很容易冲突了. 比如xxx库里写了个addCssStyle方法, yyy类库里也写了个addCssStyle方法, 而这两个方法的具体实现又有一定差别. 那么同时引用这两个组件的时候,函数冲突之后导致页面效果发生变化, 调试和修改都是非常痛苦的,如果为了避免冲突, 而放弃引用一些优秀的组件,那更是让人郁闷的事情. 为此,在封装javascript组件库的时候,请使用命名空间来避免冲突. 将所有的方法和变量都要按包名类名的方式来写.

  • vue3与ts组件封装提高代码复用性

    目录 引言 轮播图组件的封装 在pinia中发请求拿到数据 父组件中 在子组件中 引言 对于一名前端程序员来说封装组件是一个必备技能.当我们在日常的工作中总有所用的组件库满足不了需求的情况,这就需要我们有封装组件的基本功了. 封装组件,可以提高我们代码的复用性,提高工作效率,提高代码的可阅读性. 组件我自己的理解的话,分为两种吧,一种是工具类的组件,一种是页面级别的组件,工具类的组件就是说封装后,在以后的项目中如果用相同的应用场景时,可复用.页面类组件的话就是将一个大的页面分成很多的小组件,然后

  • 如何提高java代码的重用性

    提高java代码可重用性有哪些方法措施,以下就讲解了三种关于提高java代码可重用性的措施,一起来了解一下吧~ 一.改写类的实例方法 通过类继承实现代码重用不是精确的代码重用技术,因此它并不是最理想的代码重用机制.继承总是带来一些多余的方法和数据成员,它们总是使得重用类里面某个方法的代码复杂化. 另外,派生类对父类的依赖关系也使得代码进一步复杂化:对父类的改动可能影响子类:修改父类或者子类中的任意一个类时,我们很难记得哪一个方法被子类覆盖.哪一个方法没有被子类覆盖:最后,子类中的覆盖方法是否要调

  • Java使用connectTo方法提高代码可续性详解

    目录 关于可读性的一些想法 整理connectTo方法 源代码有两种不同的用户:程序员和计算机.一方面,计算机既能处理干净.结构良好的代码,也能处理混乱的代码.另一方面,程序员对代码的可读性很敏感.甚至是代码中的空白.正确使用缩进(这与计算机完全无关)也决定了代码容易理解或难以理解. 此外,代码的可读性也提高了可靠性,因为通常不容易隐藏一些bug.并且提高了可维护性,因为它更容易修改. 关于可读性的一些想法 编写可读的代码是一门被低估的技术,学校很少教授这种技术,但它却与软件的可靠性.维护和发展

  • JavaScript命名空间模式实例详解

    本文实例讲述了JavaScript命名空间模式.分享给大家供大家参考,具体如下: 前言 命名空间可以被认为是唯一标识符下代码的逻辑分组.为什么会出现命名空间这一概念呢?因为可用的单词数太少,并且不同的人写的程序不可能所有的变量都没有重名现象.在JavaScript中,命名空间可以帮助我们防止与全局命名空间下的其他对象或变量产生冲突.命名空间也有助于组织代码,有更强的可维护性和可读性.本文旨在探讨JavaScript里的几种常见命名空间模式,为我们提供一个思路. JavaScript执行环境有很多

  • JavaScript如何优化逻辑判断代码详解

    前言 我们日常使用到的逻辑判断语句有 if...else....switch...case....do...while...等. 在简单场景下,我们可能对这些语法的性能没有什么感觉,但当遇到复杂的业务场景时,如果处理不善,就会出现大量的逻辑嵌套,可读性差并且难以扩展. 千里之行始于足下,编写高可维护性和高质量的代码,我们就需要从细节处入手,我们今天主要讨论 JavaScript 中如何优化逻辑判断代码. 嵌套层级优化 function supply(fruit, quantity) { cons

  • JavaScript编写棋盘覆盖代码详解

    JavaScript编写棋盘覆盖代码详解

    一.前言 之前做了一个算法作业,叫做棋盘覆盖,本来需要用c语言来编写的,但是因为我的c语言是半桶水(哈哈),所以索性就把网上的c语言写法改成JavaScript写法,并且把它的覆盖效果显示出来 二.关键代码 <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

  • javascript 打字游戏实现代码

    javascript 打字游戏实现代码

    效果如图所示:下面是核心代码 复制代码 代码如下: GAME = { //随机产生字母 randLetter: function() { var arrLetter = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K&qu

  • javascript密码强度校验代码（两种方法）

    javascript密码强度校验代码（两种方法）

    先看效果图: javascript密码强度校验代码,具体实现思路不多说了,请看下面代码和demo. 第一种方法: /* *密码安全程度 *return :全部为字母或者数字,或者密码长度小于 *return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符 *return : 字母和数字和特殊字符 */ String.prototype.passwordStrength=function(){ if(this.length> && this.length<=) retur

  • JavaScript图片轮播代码分享

    为大家分享的JavaScript图片轮播代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

随机推荐