js前端模块化的前世今生
2024-09-06 20:39:55
前言:
<!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
最新文章
- 初识ASP.NET Core 1.0
- JVM字节码指令
- Mapreduce体系架构
- python scrapy+Mongodb爬取蜻蜓FM,酷我及懒人听书
- git--- 拉取代码
- 传递闭包(Floyd+bellman-Fold POJ1932)
- SOA_环境安装系列4_Oracle SOA安装和环境搭建(案例)
- TinyThread源码分析之中断
- Xilinx 网站资源导读2
- 基于事件的 NIO 多线程服务器--转载
- Android 再按一次退出程序三种办法
- Jersey VS Django-Rest
- 使用LR编写下载类脚本
- wordpress使用阿里云邮件推送服务实现发送邮件
- Tarjan算法(缩点)
- container injection——容器技术
- Codeforces 675E Trains and Statistic - 线段树 - 动态规划
- MySQL Replication--全局参数gtid_executed和gtid_purged
- oracle的sqlldr常见问题
- keras框架的CNN手写数字识别MNIST
热门文章
- 9款最好用的MySQL数据库客户端图形界面管理工具,第三款我用了10年
- 纪中23日c组T3 2161. 【2017.7.11普及】围攻 斐波那契数列
- P1422 小玉家的电费(scanf,printf)
- H5_0025:css3自适应布局单位vw,vh
- 用友UAP NC 单据节点_打开参照字段的问题_从打不开参照放大镜_到成功打开了但是取不到值_到修复成功
- html+layui
- nginx配置location与rewrite规则教程
- SEO中10个常用的查询指令
- npm常用模块之chai使用
- RBAC基于角色的权限管理模型