引入js文件后,命名重复问题&&多个js中如何避免方法名重复
引入js文件后,命名重复问题
摘要
当两个开发者使用的JS代码中存在相同变量和方法名时,会导致调用混乱。为解决这个问题,可以采用立即执行函数表达式(IIFE)来封装代码,创建独立的作用域。示例展示了如何创建一个名为g_task
的类,内部定义变量和方法,并通过_this
对象返回,确保调用时不冲突。这种方法使得代码组织更有序,调用更简洁。
正文
使用场景:
A写的js代码,和我B写的js代码,很多变量和方法命名一样。然后我引入A的js文件。发现方法调用会串,很烦恼。
解决方案:
采用类来封装js代码。基础写法如下:
var g_task = (function($){
var _this = {};
//定义变量
_this.a = 'this is a ';
//定义方法
_this.c = function(str){
return "str = " + str;
};
return _this;
})(jQuery);
调用方法:
alert(g_task.a);
var c = g_task.c("hello world");
alert(c)
这样就可以在自己的类里愉快的编码了,调用也非常简单,不用担心跟别人重命名了。
参考链接:
多个js中如何避免方法名重复
多个js中如何避免方法名重复
摘要
本文探讨了如何利用闭包的概念避免JavaScript中方法名的重复。通过示例解释了闭包的两个主要功能:读取内部变量和保持变量在内存中。提出了一种使用立即执行函数表达式(IIFE)封装类来避免方法名冲突的方法。
正文
我想很多人面试的时候都会遇到这个问题,在最开始进入it行业的时候其实我也不懂该怎么回答,后来很多人告诉我用闭包,然后再有面试我就直接回答闭包,但其实我自己并不是太明白闭包的概念,也根本不了解它是如何来防止方法名的重复,下面我就简单讲解下我所了解的。
先谈谈闭包的概念,其实闭包就是能够读取其他函数内部局部变量的函数,由于在js函数中,只有函数内部的函数才可以读取局部变量,因此可以把闭包简单的理解为定义在一个函数内部的函数。下面用一个例子简单验证闭包的2大主要功能。1,读取函数内部变量。2,让这些变量的值始终在内存中。
例子:
function a(){
var n = 99;
function b(){
alert(n);
n++;
//或者写成 alert(n++);
}
return b;
}
通过实例我们可以很简单的发现,n是a函数内部的一个局部变量,我们在函数外部是无法读取n的,但是在内部函数b中却可以读取,这就验证了闭包的第一个功能,读取函数内部变量。下面我们通过一些打印语句来验证其第二个功能。
var c = a();
c();
c();
c();我来简单解析下这四句话:var c = a();其实就是把b的值赋值给c,这里的b是一个方法名,很多人可能觉得这里会有错误,其实是没有任何错误的,不信的可以自己去尝试下。这里的b我们用alert(b)打印出来的其实就是 function b(){alert(n);n++;//或者写成 alert(n++);},所以c的其实就这个整个b函数。执行c()其实就是执行b(),最后执行三次c()之后我们会发现每一次打印出来n的值分别是99,100,101,这里其实就验证了闭包的第二个功能。当我们在函数外部调用一个普通的js函数时,当调用结束后,js函数里面的局部变量的值就会被垃圾回收机制回收释放,但在这里却是从99变成了101,并没有回收,这是为什么呢?原因在于a是b的父函数,而b是一个全局变量,这导致b始终在内存中,而b的存在依赖于a,所以导致a也始终在内存中,从而导致n变量没有被回收释放。至此,闭包的两大常用功能解析清楚。
下面接着谈谈js文件重名文件:
避免多个js方法名重合的最简单方法就是:采用类来封装js页码。基础写法如下“
var wdh = (function($){
var _this = {};
//定义变量
_this.a = '';
_this.b = '';
//定义方法
_this.c = function(){
}
_this.d =function(){}
return _this;
})(JQuery);
因为返回了_this,所以在其他地方调用时只需要用wdh.a wdh.c()这种即可。这样完美的避免了重复的问题。
上面之所以讲述了一些闭包的概念,是因为个人确实不理解下面我采用的这种避免方法名重复的方法到底和闭包有何联系,如果看到有会的人希望在下面留言解析下,在此谢谢了。