Skip to content

前端入门到进阶

面向前端小白

html css

  • 学会基本语法 标签
  • 学会布局 样式

开始写项目

  • 了解 ps 或者 figma
  • 静态页面

JavaScript 基础

  • 数据类型
  • JavaScript 语法
  • 项目把动态效果加上

移动端 + css3

  • PC + 移动端 静态项目
  • 了解 bootstrap 栅格系统 UI 框架

异步的 JavaScript Ajax

  • 学会接口请求获取
  • 根据获取到的数据把数据内容更新到页面上

JavaScript 高级(包含 es6)

  • 面向对象编程:JavaScript 支持面向对象编程,可以使用构造函数、原型链、类和继承等概念来创建对象和组织代码。
  • 模块化编程:JavaScript 支持模块化编程,可以使用模块加载器或模块打包工具来管理代码的依赖关系和可重用性。
  • 异步编程:JavaScript 支持异步编程,可以使用回调函数、Promise 和 async/await 等概念来处理异步任务。
  • 闭包:JavaScript 支持闭包,是一种特殊的函数,可以访问它外部的变量。
  • 函数式编程:JavaScript 支持函数式编程,提供了一些函数式编程的特性,如高阶函数、纯函数、组合函数。
  • 事件循环和单线程:JavaScript 是一种单线程语言,可以使用事件循环来处理异步任务。
  • 原型和原型链:JavaScript 是一种基于原型的语言,对象可以通过继承其他对象的属性和方法来实现复用。
  • 高级数据结构和算法:JavaScript 支持高级的数据结构和算法,如 Set、Map、WeakMap、WeakSet 、forEach、map、filter、reduce、sort、search 等。
  • Proxy 和 Reflect:JavaScript 提供了 Proxy 和 Reflect 对象来操作对象的行为,它可以拦截对象的各种操作,并给予用户更灵活的控制。
  • ECMAScript 新特性:JavaScript 不断在更新和改进,新版本中提供了许多新特性,如 let 和 const、箭头函数、解构赋值、模板字符串等。

这是一些 JavaScript 高级部分常见的知识点,具体内容可能还有其他。

Nodejs 入门

  • 原生模块的使用
  • 搭建 Web 服务器 node express
  • npm 包管理器

Webpack 打包项目

打包 html + css + JavaScript 代码

Vue 框架 快速入门

  • 基本语法
  • 组件封装
  • UI 框架

前端工程化

前端工程化是指将工程化思想和工具应用到前端开发中,使得前端项目更加规范、高效、可维护性更高。前端工程化主要包括以下方面:

  • 模块化:使用模块化工具如 webpack 或 vite 等来管理项目中的模块和文件依赖关系,有利于项目的维护和重构。
  • 测试:使用测试框架如 Jest 或 Mocha 等来进行单元测试和集成测试,保证项目的质量。
  • 文档:使用文档生成工具如 JSDoc 或 TypeScript 等来为项目生成文档,方便项目的维护和理解。
  • 静态代码检查:使用静态代码检查工具如 ESLint 或 TSLint 等来检查代码的质量,并给出可接受的代码风格规范。
  • 部署:使用部署工具如 Jenkins 或 Travis 等来自动化地将项目部署到生产环境。

这些工具和方法的应用可以提高项目的开发效率、减少错误、提高代码质量、降低维护成本,让前端项目更加可靠和可维护。

其中一些常用的前端工程化工具还包括:

  • Babel: 用于转换 JavaScript 的语法,使得可以使用最新的 JavaScript 特性。
  • PostCSS: 用于对 CSS 进行预处理,支持诸如添加变量、自动添加浏览器前缀等功能。
  • Lint: 用于检查代码质量,自动发现可能存在的错误。
  • Stylelint: 用于检查 CSS 代码质量,自动发现可能存在的错误。
  • TypeScript: 用于添加类型系统,提高代码的可读性和可维护性。
  • Jest: 用于进行 JavaScript 单元测试,提高项目的可靠性。

使用这些工具和方法能够让前端项目更加规范、可维护,提高开发效率和项目质量。

完整做 Vue 管理后台项目

  • 模仿看别人写
  • 自己尝试去完成一个项目

Nodejs 进阶

node + express + mongoose + mongodb 写后端接口

其他技术了解

  • 了解 nginx
  • 了解 docker
  • 了解 Linux 云服务器的使用

前后端全栈项目

Vue + node 全栈项目

React 入门

  • 基本语法
  • antd UI 框架

React 实战

微信小程序开发、uniapp

Electron 入门

Electron 实战