# 前端性能与工程化

**Repository Path**: edu2act/course-spa

## Basic Information

- **Project Name**: 前端性能与工程化
- **Description**: 移动互联网开发方向，《前端性能与工程化》课程仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-08-17
- **Last Updated**: 2023-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SPA 富应用开发

## 课程资料

- [课程大纲](http://naotu.baidu.com/file/529af44e87eb1ed5566b54b2f23771c0)
- [幻灯片](spa.pptx)
- [通关任务](http://spa.wangding.co)

## 课程视频

- [课程视频](http://spa.wangding.co/chapters/video.html)

## 示例代码

- [在线矩形计算器](https://wangding.github.io/rectangle/)，仓库地址：[wangding/rectangle](https://github.com/wangding/rectangle)。在线矩形计算器是 SPA 课程的第一个大作业，覆盖了课程的前半部分内容。用户输入矩形的长度和宽度，程序计算出矩形的面积和周长。应用程序的开发涉及到自动化构建的静态代码检查、单元测试和性能优化，以及数据合法性校验等技术。

- [wangding/grunt-demo](https://github.com/wangding/grunt-demo) 仓库，演示 Grunt 各种自动化构建任务，包括：预编译、单元测试、静态代码检查和性能优化，等。

- [SPA 课程示例](http://fe.wangding.co/)，仓库地址：[wangding/spa-demo](https://github.com/wangding/spa-demo)。课程示例包含课上所有小的 Demo 示例代码，整个网站是个单页应用，使用了自动化构建技术。

- [在线记事本](http://np.wangding.co/)，仓库地址：[wangding/jsnotepad](https://github.com/wangding/jsnotepad)。这个综合案例覆盖课程后半部分内容，实践 UI 组件化开发思想。包含五个对话框 UI 组件的封装，一个列表控件的封装以及三个主界面组件（菜单栏、编辑器和状态栏）的封装。并实现自动化构建。

- [匠人牛品管理后台](http://admin.wangding.co/)，仓库地址：[wangding/admin](https://github.com/wangding/admin)。这个综合案例覆盖课程后半部分内容，实践 UI 组件化开发思想。包含登录组件、页头、最侧导航、页脚、以及中间控制面板 UI 组件的封装。左侧导航使用前端路由机制调取相应的功能面板。使用了自动化构建技术。