js前端模块化的前世今生
前言：
<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <!-- 前端模块化的必须性。 由于展示的方便性，将以下多个scrit块视为多个script文件 --> <!-- 小明的文件 --> <script type="text/javascript"> var flag = true; </script> <!-- 小方的文件 --> <script type="text/javascript"> var flag = false; </script> <!-- 小明的文件 --> <script type="text/javascript"> if(flag){ // 此刻无法打印，因为 flag变量在小方的文件里已被污染 console.log(333); } </script> </body> </html>
初代模块化解决方案：
<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <!-- 前端模块化的必须性。 由于展示的方便性，将以下多个scrit块视为多个script文件 --> <!-- 小明的文件 --> <script type="text/javascript"> (function(){ var flag = true; let module1 = { flag }; window.module1 = module1; })(); </script> <!-- 小方的文件 --> <script type="text/javascript"> (function(){ var flag = true; let module2 = { flag }; window.module2 = module2; })(); var flag = false; </script> <!-- 小明的文件 --> <script type="text/javascript"> if(module1.flag){ // 此刻可以打印，各个模块只暴露出相应的模块对象，拒绝了变量污染 console.log(333); } </script> </body> </html>
模块化之commonJS规范：
<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <!-- 前端模块化的必须性。 由于展示的方便性，将以下多个scrit块视为多个script文件 --> <!-- 小明的文件 --> <!-- modeleA.js --> <script type="text/javascript"> // 导出 module.exports = { flag: true, } </script> <script type="text/javascript"> // 导入 let {flag} = require('modeleA'); </script> <!-- 注意：以上代码在浏览器不能直接运行，它基于Node.js环境 --> </body> </html>
ES6解决方案：
test.html
<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <!-- 前端模块化的必须性。 由于展示的方便性，将以下多个scrit块视为多个script文件 --> <script src="module1.js" type="module"></script> <script type="module"> // 导入 import {num1,num2 } from 'module1.js'; </script> </body> </html>
module1.js
// ERROR : flag is not defined // ? type="module" : 这个js文件属于一个模块，有自己的空间 //console.log(flag); let num1 = 1,num2 = 2; /*导出方式1：*/ export { num1 } /*导出方式2：*/ export var num2 = num2
