<!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里面
<!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 Moudule 模块引入方式， 在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里面
}
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ES Moudule 模块化</title>
</head>
<body>
<p>ES Moudule 模块化</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里面
}
原文：https://www.cnblogs.com/boye-1990/p/14363083.html