请教：在一个js文件中如何导入另一个js文件并实现同级js文件内容的隔离？

时间：2021-06-10 19:53:19
这种需求最典型的例子如下：

util.js 一个通用函数文件
utilA.js 导入util.js
utilB.js 导入util.js（utilA.js和utilB.js文件中的所有方法、属性名可能完全相同，但是功能却完全不一样）

CommonClass.js 一个通用类

ClassA.js 导入 CommonClass.js和utilA.js
ClassB.js 导入 CommonClass.js和utilB.js

ClassAChild.js 导入ClassA.js
ClassBChild.js 导入ClassB.js


我在javascript文档中看到了import和export，但是上面没有具体的例子，而且也不知道是不是用来导入js文件用的。

在htm文件内使用这样的方式在一个文件内导入所有的js文件显然无法实现上面的要求。

<SCRIPT LANGUAGE="javascript" SRC="a.js"></SCRIPT>

如果用上面的方式来导入文件，必然导致函数、属性名冲突。同时造成代码过长难于维护。

不知道哪位大虾能解决这个问题。

4 个解决方案

#1

ClassAChild.js 导入ClassA.js, 在ClassAChild.js 里:

document.write("<scr"+"ipt language=javascript src=ClassA.js></scr"+"ipt>");

#2

meizz(梅花雨) ，我已看到你的回帖，正在做试验。有结果了我马上回来结贴，谢谢先:)

#3

t.htm:
<script language=javascript src="ClassAChild.js"></script>
<script language=javascript>
mm();
</script>

ClassAChild.js:
document.write("<scr"+"ipt language=javascript src=ClassA.js></scr"+"ipt>");

ClassA.js:
function mm()
{
    alert("看到这个提示框则表示成功了");
}

#4

嗯，我也试验过了，可以实现导入。但是隔离失败了，代码如下：

/************************************************************************
 * imt1.js 
 */
function f1(){
    alert("111");
}
/************************************************************************/


/************************************************************************
 * imt2.js 
 */
function f1(){
    alert("222");
}
/************************************************************************/


/************************************************************************
 * class1.js 
 */
document.write("<scr"+"ipt language=javascript src=imt1.js></scr"+"ipt>");
function print1(){
    f1();
}
/************************************************************************/


/************************************************************************
 * class2.js 
 */
document.write("<scr"+"ipt language=javascript src=imt2.js></scr"+"ipt>");
function print2(){
    f1();
}
/************************************************************************/

/************************************************************************
 * test.htm 
 */
<HTML>
<HEAD>
    <TITLE>IMPORT TEST</TITLE>
    <SCRIPT LANGUAGE="javascript" SRC="class2.js"></SCRIPT>
    <SCRIPT LANGUAGE="javascript" SRC="class1.js"></SCRIPT>
</HEAD>
<BODY>
    <SCRIPT LANGUAGE='JAVASCRIPT'>
        var a = new print1();
        var b = new print2();
    </SCRIPT>
</BODY>
</HTML>
/************************************************************************/

其结果是，test.html中，哪个导入语句在后面，哪个同名函数起作用。
在上面的例子里，<SCRIPT LANGUAGE="javascript" SRC="class1.js"></SCRIPT>在后面，
所以两次输出都是111。:(
不过，总算解决了导入的问题，再次谢谢你了。

#1

ClassAChild.js 导入ClassA.js, 在ClassAChild.js 里:

document.write("<scr"+"ipt language=javascript src=ClassA.js></scr"+"ipt>");

#2

meizz(梅花雨) ，我已看到你的回帖，正在做试验。有结果了我马上回来结贴，谢谢先:)

#3

t.htm:
<script language=javascript src="ClassAChild.js"></script>
<script language=javascript>
mm();
</script>

ClassAChild.js:
document.write("<scr"+"ipt language=javascript src=ClassA.js></scr"+"ipt>");

ClassA.js:
function mm()
{
    alert("看到这个提示框则表示成功了");
}

#4

嗯，我也试验过了，可以实现导入。但是隔离失败了，代码如下：

/************************************************************************
 * imt1.js 
 */
function f1(){
    alert("111");
}
/************************************************************************/


/************************************************************************
 * imt2.js 
 */
function f1(){
    alert("222");
}
/************************************************************************/


/************************************************************************
 * class1.js 
 */
document.write("<scr"+"ipt language=javascript src=imt1.js></scr"+"ipt>");
function print1(){
    f1();
}
/************************************************************************/


/************************************************************************
 * class2.js 
 */
document.write("<scr"+"ipt language=javascript src=imt2.js></scr"+"ipt>");
function print2(){
    f1();
}
/************************************************************************/

/************************************************************************
 * test.htm 
 */
<HTML>
<HEAD>
    <TITLE>IMPORT TEST</TITLE>
    <SCRIPT LANGUAGE="javascript" SRC="class2.js"></SCRIPT>
    <SCRIPT LANGUAGE="javascript" SRC="class1.js"></SCRIPT>
</HEAD>
<BODY>
    <SCRIPT LANGUAGE='JAVASCRIPT'>
        var a = new print1();
        var b = new print2();
    </SCRIPT>
</BODY>
</HTML>
/************************************************************************/

其结果是，test.html中，哪个导入语句在后面，哪个同名函数起作用。
在上面的例子里，<SCRIPT LANGUAGE="javascript" SRC="class1.js"></SCRIPT>在后面，
所以两次输出都是111。:(
不过，总算解决了导入的问题，再次谢谢你了。
标签：

相关文章