2.0 非模块化带来的问题

最新推荐文章于 2021-07-02 15:44:48 发布

蓝色清晨_

最新推荐文章于 2021-07-02 15:44:48 发布

阅读量174

点赞数

分类专栏： ES6 笔记

本文链接：https://blog.csdn.net/yingleiming/article/details/118416832

版权

ES6 笔记专栏收录该内容

11 篇文章 3 订阅

订阅专栏

非模块化开发带来的问题

假设我们现有四个文件：index.html、a.js、b.js、c.js；并在index.html 中进行引入三个脚本文件。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="./a.js"></script>
    <script src="./b.js"></script>
    <script src="./c.js"></script>
    
</body>
</html>

相关 js 文件

//a.js ->A人员开发
var flag = true;
if(flag){
    console.log("a的flag为true")
}

//b.js ->B人员开发
var flag = false;
if(!flag){
    console.log("b使用了flag为false")
}

//c.js ->A人员又开发了c.js
console.log(flag); // 此时flag = false 了，因为flage 被B在b.js中进行了修改
if(flag){
    console.log("c使用了a的flag");
}

一个文件还好，你可以看出来 flag 在哪里被修改了，但是如果成千上万个文件呢，就很难了。所以，没有模块化对一个大型项目来说是灾难性的。

当然，我们也有办法解决上面的问题，就是用立即调用函数表达式IIFE

index.html文件不变，相关js 文件做了如下修改：

//a.js ->A人员开发
const moudleA = (
    function(){
        var flag = true;

        if(flag){
            console.log("a使用了a.js");
        }

        return {
            flag:flag
        }
    }
)();


//b.js ->B人员开发
const moudleB = (function(){
    var flag = false;

    if(!flag){
        console.log("b使用了b.js");
    }
})();

//c.js ->A人员又开发了c.js
const moudleC = (function(){
    const flag = moudleA.flag;
    console.log(flag);//true 此时的flag 就是true 了
    if(flag){
        console.log("c使用了c.js");
    }
})();

命名冲突的问题是解决了，但是又带来了新的问题

第一，我必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用；
第二，代码写起来混乱不堪，每个文件中的代码都需要包裹在一个匿名函数中来编写；
第三，在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况;

所以，我们会发现，虽然实现了模块化，但是我们的实现过于简单，并且是没有规范的。

我们需要制定一定的规范来约束每个人都按照这个规范去编写模块化的代码
这个规范中应该包括核心功能：模块本身可以导出暴露的属性，模块又可以导入自己需要的属性

原文链接：彻底掌握前端模块化

蓝色清晨_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.0 非模块化带来的问题

非模块化开发带来的问题假设我们现有四个文件：index.html、a.js、b.js、c.js；并在index.html 中进行引入三个脚本文件。index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
复制链接

扫一扫

专栏目录