我们先来了解下前端开发领域的开发历程。

面向过程开发

在很早之前由于前端做的工作很少，会采用面向过程的开发方式，将代码放到一个.js文件中：

index.html

<p>这里是我们网页的内容</p>
<div id="root"></div>
<script src="./index.js"></script>

index.js

var root = document.getElementById('root');

// header模块
var header = document.createElement('div');
header.innerText = 'header';
root.appendChild(header);

// sidebar模块
var sidebar = document.createElement('div');
sidebar.innerText = 'sidebar';
root.appendChild(sidebar);

// content模块
var content = document.createElement('div');
content.innerText = 'content';
root.appendChild(content);

面向对象开发

随着 js 的不断发展，它所能解决的问题也越来越多，如果再像面向过程那样把所有代码写在同一个.js文件中，那么代码将变得非常难以理解和维护，此时面向对象开发模式便出现了，一个面向对象开发模式可能如下所示。

index.html

<p>这里是我们网页的内容</p>
<div id="root"></div>
<script src="./src/header.js"></script>
<script src="./src/sidebar.js"></script>
<script src="./src/content.js"></script>
<script src="./index.js"></script>

header.js

function Header() {
  var header = document.createElement('div');
  header.innerText = 'header';
  root.appendChild(header);
}

sidebar.js

function Sidebar() {
  var sidebar = document.createElement('div');
  sidebar.innerText = 'sidebar';
  root.appendChild(sidebar);
}

content.js

function Content() {
  var content = document.createElement('div');
  content.innerText = 'content';
  root.appendChild(content);
}

index.js

var root = document.getElementById('root');
new Header();
new Sidebar();
new Content();

面向对象开发模式解决了面向过程开发模式中的一些问题，但似乎又引入了一些新的问题。

• 每一个模块都需要引入一个.js文件，随着模块的增多，这会影响页面性能。
• 在index.js文件中，并不能直接看出模块的逻辑关系，必须去页面才能找到。
• 在index.html页面中，文件的引入顺序必须严格按顺序来引入，例如：index.js必须放在最后引入，如果把- header.js文件放在index.js文件后引入，那么代码会报错。

现代开发模式

根据面向对象开发模式中的一系列问题，随后各种模块化加载的方案如雨后春笋，例如：ES Module、AMD、CMD以及CommonJS等，一个ES Module模块化加载方案可能如下所示。

index.html

<p>这里是我们网页的内容</p>
<div id="root"></div>
<script src="./index.js"></script>

header.js

export default function Header() {
  var root = document.getElementById('root');
  var header = document.createElement('div');
  header.innerText = 'header';
  root.appendChild(header);
}

sidebar.js

export default function Sidebar() {
  var root = document.getElementById('root');
  var sidebar = document.createElement('div');
  sidebar.innerText = 'sidebar';
  root.appendChild(sidebar);
}

content.js

export default function Content() {
  var root = document.getElementById('root');
  var content = document.createElement('div');
  content.innerText = 'content';
  root.appendChild(content);
}

index.js

import Header from './src/header.js';
import Sidebar from './src/sidebar.js';
import Content from './src/content.js';

new Header();
new Sidebar();
new Content();