原始网页开发（面向过程）
- 以下代码，是我们原始面向过程开发网页的代码（1 个 html 文件，1 个 js 文件）
- 存在问题
- 我们所有的逻辑都写在这个 index.js 中，随着逻辑越来越多，项目就会变得越来越难以维护
- 解决方案
- 将 header，sidebar，content 分成 3 个对象去开发
- 就是进阶为面向对象开发
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>这是最原始的网页开发</title>
</head>
<body>
<p>面向过程网页开发</p>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
/**
* 这是我们最原始的网页开发方式
* 是一种面向过程的开发，我们所有的逻辑都写在这个index.js中，随着逻辑越来越多，项目就会变得越来越难以维护
* 所以我们就有了面向对象开发思想：我们会将 header，sidebar，content 分成3个对象去开发
*/
var dom = document.getElementById("root");
// dom.append("<div>head<div>"); // 会被转译
var header = document.createElement("div"); // 创建一个div
header.innerText = "header"; // 将这个div内容设置为 sidebar
dom.append(header); // 将这个div添加到dom里面
var sidebar = document.createElement("div"); // 创建一个div
sidebar.innerText = "sidebar"; // 将这个div内容设置为 sidebar
dom.append(sidebar); // 将这个div添加到dom里面
var content = document.createElement("div"); // 创建一个div
content.innerText = "content"; // 将这个div内容设置为 content
dom.append(content); // 将这个div添加到dom里面
进阶网页开发（面向对象）
- 以下代码 从面向过程 进阶到 面向对象开发 （1 个 html 文件， 4 个 js 文件）
- 存在问题
- 加载速度变慢： 在一个 index.html 引入多个 js 文件，加载速度会变慢（相当于多了几个 http 请求）
- 不易阅读看不出文件之间的相互关系： 当我打开 index.js 的时候 new 很多个构造函数，但是在这里我并不知道这些构造函数从哪里来，必须返回到 index.html 里面查看
- 不易查错（不易维护）： 多个 js 相互依赖，引入顺序不同可能导致报错，但是报错提示不会告诉你是引入的问题，新手很难发现问题
- 解决方案
- 使用 ES Module 模块引入方式， 在 index.js 中 引入 Header， SideBar， Content 对象
- 就是使用 import 的方式 引入 三个对象
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>面向对象</title>
</head>
<body>
<p>面向对象网页开发</p>
<div id="root"></div>
<script src="./header.js"></script>
<script src="./sidebar.js"></script>
<script src="./content.js"></script>
<script src="./index.js"></script>
</body>
</html>
/**
* 这是面向对象的开发方式
* 我们将header sideBar content 单独写成了构造函数（对象）在index里面按需引入
* 这样每个对象的逻辑可以单独去维护互不影响，更具有维护性
*
* 新的问题
* 1. 加载速度变慢： 在一个index.html 引入多个js文件，加载速度会变慢（相当于多了几个http请求）
* 2. 不易阅读看不出文件之间的相互关系： 当我打开index.js的时候 new 很多个构造函数，但是在这里我并不知道这些构造函数从哪里来，必须返回到index.html里面查看
* 3. 不易查错（不易维护）： 多个js相互依赖，引入顺序不同可能导致报错，但是报错提示不会告诉你是引入的问题，新手很难发现问题
*
* 解决方案
* 使用 ES Module 模块引入方式， 在index.js中 引入 Header， SideBar， Content对象
* import Header from './header.js'
* import SideBar from './sidebar.js'
* import Content from './content.js'
*
* index.html 文件中只引入index.js。 问题1解决
* 都在 index.js 引入对象，文件路径清晰，便于阅读。 问题2解决
* 在执行 index.js 的js逻辑之前，已经加载了 3个对象的js代码，不会出现依赖文件未加载问题。问题3解决
*
*/
var dom = document.getElementById("root");
new Header();
new SideBar();
new Content();
function Content() {
var content = document.createElement("div"); // 创建一个div
content.innerText = "content"; // 将这个div内容设置为 content
dom.append(content); // 将这个div添加到dom里面
}
function Header() {
var header = document.createElement("div"); // 创建一个div
header.innerText = "header"; // 将这个div内容设置为 sidebar
dom.append(header); // 将这个div添加到dom里面
}
function SideBar() {
var sidebar = document.createElement("div"); // 创建一个div
sidebar.innerText = "sidebar"; // 将这个div内容设置为 sidebar
dom.append(sidebar); // 将这个div添加到dom里面
}
现代网页开发（工程化模块化）
- 以下代码，使用 ES Module 模块引入三个对象，并用 webpack 翻译代码，让浏览器识别 import 语句
- 存在问题
- 浏览器无法识别 ES Module 引入模块的方式，无法识别 import 语句
- 解决方案
- 使用 webpack 翻译 代码，在 index.html 中 引入 翻译好的 main.js
- 各个模块对象，使用 ES Module 的方式导出对象，在每个对象里面都添加获取 root Dom 的代码。index.js 中删除这行。
- 安装 webpack
- npm init esmodule(自定义包名)
- 一路回车使用默认配置 然后会生成 package.json 文件
- npm install webpack webpack-cli --save-dev
- 使用 webpack
- npx webpack index.js // 我用 webpack 翻译 index.js 文件
- 这时，你的项目目录里面多了一个 dist 文件夹，里面有一个 main.js 文件。这个文件就是 webpack 帮你翻译好的文件。
- 把翻译好的 main.js 替换到 index.html 中的 index.js。
- 版本："webpack": "^4.41.4","webpack-cli": "^3.3.10"
- 最终结果
- 在 index.html 文件中，我们只需要引入 1 个 js 文件，加快了页面加载速度。
- 在 index.js 中，我们使用 es module 的形势引入的各个模块对象，路径清晰方便阅读，解决了模块相互依赖对模块加载顺序有严格要求，容易出错的问题。
- 各个模块对象逻辑独立，便于维护。
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ES Module 模块化</title>
</head>
<body>
<p>ES Module 模块化</p>
<div id="root"></div>
<script src="./dist/main.js"></script>
</body>
</html>
import Header from "./header.js";
import SideBar from "./sidebar.js";
import Content from "./content.js";
new Header();
new SideBar();
new Content();
function Content() {
var dom = document.getElementById("root");
var content = document.createElement("div"); // 创建一个div
content.innerText = "content"; // 将这个div内容设置为 content
dom.append(content); // 将这个div添加到dom里面
}
function Header() {
var dom = document.getElementById("root");
var header = document.createElement("div"); // 创建一个div
header.innerText = "header"; // 将这个div内容设置为 sidebar
dom.append(header); // 将这个div添加到dom里面
}
function SideBar() {
var dom = document.getElementById("root");
var sidebar = document.createElement("div"); // 创建一个div
sidebar.innerText = "sidebar"; // 将这个div内容设置为 sidebar
dom.append(sidebar); // 将这个div添加到dom里面
}
