前端学习目标
概述
以下是推荐的Web前端的学习路线,但本课堂仅涉及基础部分
1. 纯静态站点: html/css 基础
可以不借助任何html框架、仅使用文本编辑器,以个人博客为例(以下称示例网站),实现包含如下功能的纯静态站点
- 多页面与CRUD:如首页(复杂布局)、列表页、详细页、表单页等
- 常见布局方式:多列、栅格布局、flexbox布局等
- 了解主要的HTML5元素和CSS样式规则的特性和用法
- 了解icon font、media query、响应式、CSS动画等高级技巧或特性
2. 客户端动态网页站点: javascript 基础
- 了解ecma4或plain javasciprt的基本语法,掌握jquery库的基本使用
- 能编写简单的页面脚本,能借助各种开源插件为站点添加各种页面动态效果
- 能够使用html框架,如Bootstrap,对示例网站进行重构,实现响应式设计,以及利用到Bootstrap框架的各类主要组件或特性
3. 伪动态网站初步
- 能够引入前端模板机制重构示例网站。即:页面 = 模板文件 + json。譬如:
- 示例网站中的博客列表页面中的列表,可将其分解为:
- 模板文件,代表列表项的html结构;
- json文件,代表列表的实际内容,多行,每一行即博客的标题、作者名称、发布日期等
- 通过将json与模板绑定动态生成列表
- 示例网站中的博客详细页,也可将其分解为:
- 模板文件,代表博客详细页的html结构;
- json文件,代表某一篇博客的即博客的标题、作者名称、发布日期、博文正文等
- 当用户访问形如:http://x.com/blog/show.html#id=100 ,则通过脚本将100.json与模板文件绑定,生成实际的博客页
- 示例网站中的博客列表页面中的列表,可将其分解为:
- 掌握前端模板库的使用
- ejs http://www.embeddedjs.com 最简单
- swig http://node-swig.github.io/swig-templates/ 后面要提到的hexo内置使用
- 深入的了解javascript语法以及其在浏览器中的工作机制
- 能够搭建node.js开发环境,即npm或yarn的使用
4. 静态网站生成器
- 能够使用静态站点生成工具来生成网站。相当于 网站 = 模板 + 文档(markdown文件) + json(配置文件) + plugin(功能组件)
- 能使用 hexo 或其它生成器如hugo、Jekyll等重构示例网站
- 掌握现代前端设计技术,如sass/scss、css module、style-componment等
5. 动态网站
- 能使用ajax访问和存取后端数据
- 理解http协议,能开发基于cookies、token、http header之类的有状态的前端应用
- 能使用各类常见的html5 api,如文件系统、图形处理等
- 能开发基于Web socket的简单前端即时应用
6. 单页应用初步
- 掌握基于node的开发环境,及现代前端包管理等技术
- 掌握前端构建工具如gulp、webpack或vite等
- 掌握ecma6+ 语法
- 掌握前端框架如vue.js、react.js的基本使用
- 能使用vue.js等开发各类常用组件
- 能基于vue.js的生态,如element-ui等开发复杂的单页应用
- 或 reactstrap、ant.design等
7. Serverless 应用
基于 jamstack架构, 使用静态生成器工具如 https://gridsome.org/ 或 https://www.gatsbyjs.org, 能够与后端API集成,掌握诸如restful api 或 graphQL API 等,实现以前端为主导的Web应用开发。