24、从零开始构建 TypeScript 单页 Web 应用

从零开始构建 TypeScript 单页 Web 应用

1. 项目概述与技术背景

在构建单页 Web 应用时，我们会采用多种技术来实现功能与优化用户体验。首先，我们会使用 TypeScript 来编写应用，它为 JavaScript 增加了静态类型检查，能有效减少运行时错误。同时，会借助 Bootstrap 框架来实现页面布局，该框架是一个流行的移动优先框架，能让页面在不同平台上自适应显示。另外，还会使用 Marionette 框架，它是 Backbone 库的扩展，可减少样板代码，方便处理 DOM 元素和 HTML 片段。

2. 应用介绍 - Board Sales

我们要构建的应用名为 Board Sales，它是一个简单的单页应用，主要用于展示帆板销售信息。在主页面上，会以摘要视图或帆板列表视图展示一系列帆板。用户点击某一帆板，页面会切换到详细信息视图，显示该帆板的具体信息。屏幕左侧有一个简单的面板，用户可通过制造商或帆板类型对主帆板列表进行过滤。

现代帆板有不同的尺寸，以体积来衡量。小体积帆板通常用于冲浪，大体积帆板用于比赛或障碍滑行，介于两者之间的可归类为自由式帆板，用于在平水上表演特技。帆板适配的帆的范围也是重要因素，强风时用小帆控制风力，微风时用大帆获取更多动力。摘要视图会包含每个帆板的体积测量快速参考，详细视图会显示所有帆板测量信息和兼容的帆的范围列表。

3. 页面布局

我们会利用 JavaScript 的能力实现从左到右的面板式页面布局，并使用 Bootstrap 过渡效果，让面板从左侧或右侧滑入，为用户提供不同的浏览体验。

页面的概念布局如下：
- 主页面包含页眉