导航

js模块化开发

Posted on 2020-08-21 17:42  诗也  阅读(184)  评论(0)    收藏  举报

想要使用js模块化开发功能，需要在html文件<script>标签中设置type="module"，如下：

<script src = "main.js" defer type='module'> </script>

defer 的功能是让浏览器在渲染完页面后再运行脚本。

在main.js文件当中，使用 import 语句从模块文件中引用数据资源，如下：

import { mod_func,mod_str,mod_arr,mod_obj } from "./my_module.js";

在 my_module.js 文件中，使用 export 输出数据资源，如下：

export { my_module,mod_str,mod_arr,mod_obj };

完整代码：

index.html

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <title>模块化测试</title>
 5     <meta charset="utf-8"/>
 6     <script src="main.js" type="module" defer></script>
 7 </head>
 8 <body>
 9     
10     <div id="div_1"></div>
11 </body>
12 </html>

main.js

import {my_module,mod_str,mod_arr,mod_obj} from "./my_module.js";
var a=new my_module("EX");
console.log(a.name);
console.log(mod_str,mod_arr,mod_obj);
var div_1=document.querySelector("#div_1");
div_1.innerHTML=mod_str;

my_moudle.js

var my_module=(function(){
    function my_module(name){
        console.log("my_moudule运行。。。");
        this.name=name;
    }
    return my_module;
}())
var mod_str="This string in module";
var mod_arr=[1,3,2,5];
var mod_obj={
    'name':'bar',
    'say':function(){
        console.log(this.name)
    }
}
export { my_module,mod_str,mod_arr,mod_obj };

 

有可能遇到的问题：

测试了三个浏览器（Microsoft Edge , Firefox , chrome)，其中 Firefox 和 chrome 浏览器在直接通过点击文件打开时会报错，如下：

遇到此种情况可以通过服务器打开即可。

 

另一种有可能遇到的情况是 js 文件没有加载，在控制台的调试器中只显示html文件，没有js文件，如下：

这种情况一般是模块加载失败，检查一下在 export 和import 语句中输入的变量名是否正确。