15、前端应用模块化开发与组件动态加载详解

前端应用模块化开发与组件动态加载详解

1. 项目文件夹与模块概述

在项目中，有两个子文件夹 SandBox 和 PageDefinitions ，分别包含用于动态加载组件的沙箱模块和对象定义文件。后续我们会深入研究这些子文件夹中大多数文件的代码。

2. index.html 页面模块加载

在查看 JavaScript 代码和模块之前，先了解下 index.html 文件以及应用模块在浏览器中的加载方式。 index.html 页面仅为应用主页提供了最基本的框架，其他部分（头部、页脚和内容）在页面加载时动态构建。

虽然有时在服务器端构建应用页面的部分内容再发送到客户端能提升性能，但这里我们选择在客户端构建所有部分，以便更轻松地研究和应用应用设计的不同概念。

index.html 文件的框架由三个主要容器组成：

<header id="headerContainer" role="banner" itemscope  
  itemtype="https://schema.org/WPHeader"  
  class="headerContainerClass">
</header>
<main id="mainPageContainer" role="main" class="clearfix  
  mainPageContainerClass">
</main>