前端工程化 - 传统开发的弊端

在了解什么是前端工程化之前，先回顾一下传统开发存在的一些弊端，这样更能知道为什么需要它。

在传统的前端开发模式下，前端工程师大部分工作只需要单纯的写写页面，都是在HTML文件里直接编写代码，所需要的JavaScript代码是通过script标签以内联或者文件引用的形式放到HTML代码里的，当然CSS代码也是一样的处理方式。

例如这样：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入JavaScript文件 -->
     <script src="./lib-1.js"></script>
     <script src="./lib-2.js"></script>
     <!-- 引入JavaScript文件 -->
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入JavaScript文件 -->
     <script src="./lib-1.js"></script>
     <script src="./lib-2.js"></script>
     <!-- 引入JavaScript文件 -->
</body>
</html>

如演示代码所示，虽然可以把代码分成多个文件来维护，这样可以有效降低代码维护成本，但在实际开发过程中，还是存在代码运行时的一些问题。

1. 一个常见的案例

继续用上面的演示代码，来看一个最简单的例子。

先在lib-1.js文件里声明一个变量：

JavaScript

//JavaScript代码片段

var foo = 1

//JavaScript代码片段

var foo = 1

再在lib-2.js文件里声明一个变量(没错，也是foo)；

JavaScript

//JavaScript代码片段

var foo = 2

//JavaScript代码片段

var foo = 2

然后在HTML代码里追加一个Script，并且打印这个值；

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入JavaScript文件 -->
     <script src="./lib-1.js"></script>
     <script src="./lib-2.js"></script>
     <!-- 引入JavaScript文件 -->

     <!-- 假设这里是实际的业务代码 -->
    <script>
        console.log(foo)
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 引入JavaScript文件 -->
     <script src="./lib-1.js"></script>
     <script src="./lib-2.js"></script>
     <!-- 引入JavaScript文件 -->

     <!-- 假设这里是实际的业务代码 -->
    <script>
        console.log(foo)
    </script>
</body>
</html>

先猜猜会输出什么？答案是2。

如果在开发的过程中，不知道在lib-2.js文件里也声明了一个foo变量，一旦在后面的代码里预期了foo+2===3，那么就得不到想要的结果(因为lib-1.js里的foo是1，1+2等于3)。

原因是JavaScript的加载顺序是从上到下的，当使用var声明变量时，如果命名有重复，那么后加载的变量会覆盖先加载的变量。

这是使用var声明的情况，它允许使用相同的名称来重复声明，那么换成let或者const呢？

虽然不会出现重复声明的情况，但同样会收到一段报错：

Bash

Uncaught SyntaxError: redeclaration of let foo

Uncaught SyntaxError: redeclaration of let foo

这次程序直接崩溃了，因为let和const无法重复声明，从而抛出这个错误，程序依然无法正确运行。

2. 更多问题

以上只是一个简单的案例，就暴露出了传统开发很大的弊端，然而并不止于此；

实际上，传统开发还存在以下这些的问题：

引入多个资源文件时，比如有多个JavaScript文件，在其中一个JavaScript文件里面使用了在别处声明的变量，则无法快速找到是在哪里声明的，大型项目难以维护。
类似前面提到的问题无法轻松预先感知，很依赖开发人员人工定位问题所在源码位置。
大部分代码缺乏分割，如一个工具函数库，很多时候需要整包引入到HTML里，而且文件很大，然而实际上只需要用到其中一两个方法。
由第三点大文件延伸出的问题，Script的加载是从上到下的，容易阻塞页面渲染。
不同页面的资源引用都需要手动管理，容易造成依赖混乱，难以维护。
如果要压缩CSS、混淆JavaScript代码，也是需要人为操作使用工具逐个处理后替换，容易出错。

当然，实际上还会遇到其他更多的问题。

浏览量 0