前端学习目标

概述

以下是推荐的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与模板绑定动态生成列表
    • 示例网站中的博客详细页,也可将其分解为:
  • 掌握前端模板库的使用
  • 深入的了解javascript语法以及其在浏览器中的工作机制
  • 能够搭建node.js开发环境,即npm或yarn的使用

4. 静态网站生成器

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应用开发。

results matching ""

    No results matching ""