js代码的扩展性

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/a250758092/article/details/80346971

在此之前，讲一下工作中遇到的问题，首先做的项目很老，是JSP的。里面的代码，都写在了jq加载函数里面，也就是ready函数，
目前，我需要在这个页面中，通过window.open的方式打开一个窗口，并保持两个窗口的通信。但是原本里面的代码都写在jq的ready函数里面，导致在子窗口通过window.opener无法调用父窗口的方法。

因此，引出了我的一些问题，如何写JS代码，使得它更具有可拓展性。

用jq写文件的时候我们通常会看到这样的开头

(function($){})(jquery)或者$(function(){})
这种情况下，内部的变量或者函数是不会暴露，就免去了，因为导入多个JS文件造成变量污染的情况。
那么问题来了，当我们写的代码如下

$(function(){
function a(){}
function b(){}
$('xx').on(...)

})

以上情况虽然没什么大问题，但如果我们希望多个JS文件之间能够相互调用方法，以上写法就很麻烦了。包括我最开始的那个需求，我希望在子窗口调用父窗口的方法，我都做不到。所以，我们应该像JQ的插件一样，扩展一个空间名，在这个空间作用域下去写自己的方法，同时这个空间名也暴露给了外部。即使我们遇到了空间名一致的冲突，我们只要修改暴露的这个名称即可。

//JQ插件拓展
$.extend({
tool:{
a:function(){

}
}
})
$.tool.a();

//为了保证后续别人可能会用到你的代码，或者新增某些功能，方便他们写得代码和你统一结构，我们应该这样子

(function(window){
var unit={
a:function(){}


}

window.unit=unit;
})(window)
unit.a();//在外部仍然可以调用这个方法。如果window.unit这个变量名产生了冲突，我们只需要修改一下window.xxx=unit即可

以上场景是我在需要用别人的一个方法的时候产生的，我需要调用A方法，这个方法是需要向后台发起请求的。同时A方法里面又调用了B.C方法。所以我必须得暴露ABC方法，才能调用，这就会费很多功夫。
另外，在我们写一些需要绑定DOM的函数的时候，不要在文件内做一些默认绑定的操作，因为你不知道使用你代码的人会在什么地方引入你的文件，如果是在DOM结构之前就引入了，就会报错，这样做的话就很不灵活