萧邦之殇

If not me who, If not now when

大前端完整学习路线(详解)

第一阶段:基础入门

HTML+CSS

  • HTML进阶:语义化标签、表单验证、多媒体元素
  • CSS进阶:选择器、盒模型、定位、浮动、弹性布局
  • 布局技术:div+css布局、响应式设计
  • 项目实践:HTML+css整站开发

JavaScript基础

  • JS基础教程:语法、数据类型、运算符、控制结构
  • 内置对象:常用方法、数组、字符串、日期对象
  • DOM操作:常见DOM树操作大全、节点操作
  • 核心概念:ECMAscript、DOM、BOM
  • 交互功能:定时器和焦点图

JS基本特效

  • 常见特效:tab切换、导航菜单、整页滚动
  • 动画效果:轮播图、JS制作幻灯片、弹出层
  • 交互组件:手风琴菜单、瀑布流布局
  • 事件处理:滚动事件、滚差视图

JS高级特征

  • 正则表达式:模式匹配、字符串处理
  • 算法基础:排序算法、递归算法
  • 函数进阶:闭包、函数节流、作用域链
  • 动画框架:基于距离运动框架
  • 面向对象:面向对象基础

jQuery基础

  • 选择器:各种选择器的使用
  • DOM操作:元素增删改查
  • 特效动画:特效和动画、方法链
  • 交互功能:拖拽、变形
  • UI组件:JQueryUI组件基本使用

第二阶段:HTML5和移动Web开发

HTML5

  • 新语义标签:header、nav、section、article等
  • 表单增强:HTML5表单、验证、新输入类型
  • 多媒体:音频和视频、Canvas绘图
  • 存储技术:离线和本地存储
  • 图形技术:SVG矢量图形
  • 通信技术:Web Socket实时通信

CSS3

  • 新选择器:CSS3新选择器、伪元素
  • 颜色表示:颜色表示法、透明度
  • 视觉效果:边框、阴影、background系列属性
  • 动画技术:Transition、动画、景深和透视
  • 3D效果:3D效果制作、Velocity.js框架
  • 交互策略:元素进场、出场策略
  • 项目实践:炫酷CSS3网页制作

Bootstrap

  • 响应式概念:响应式设计原理
  • 媒体查询:断点设置、适配策略
  • 栅格系统:栅格系统原理、Bootstrap常用模板
  • 预处理器:LESS和SASS

移动Web开发

  • 跨终端适配:跨终端WEB和主流设备简介
  • 视口技术:视口设置、移动端适配
  • 布局技术:流式布局、弹性盒子、rem单位
  • 事件处理:移动终端JavaScript事件
  • 特效制作:手机中常见JS效果制作
  • 框架应用:Zepto.js、手机聚划算页面、手机滚屏

第三阶段:HTTP服务和AJAX编程

WEB服务器基础

  • 服务器知识:服务器基础知识
  • 服务器类型:Apache服务器和其他WEB服务器介绍
  • 环境搭建:Apache服务器搭建
  • 协议基础:HTTP介绍

PHP基础

  • 语法基础:PHP基础语法
  • 请求处理:使用PHP处理简单的GET或者POST请求

AJAX上篇

  • 异步概念:Ajax简介和异步的概念
  • 框架封装:Ajax框架的封装
  • 核心对象:XMLHttpRequest对象详细介绍方法
  • 兼容处理:兼容性处理方法
  • 缓存问题:Ajax中缓存问题
  • 数据格式:XML介绍和使用

AJAX下篇

  • JSON技术:JSON和JSON解析
  • 模板技术:数据绑定和模板技术
  • 跨域技术:JSONP、跨域技术
  • 性能优化:图片预读取和lazy-load技术
  • 框架应用:JQuery框架中的AjaxAPI
  • 项目实践:使用Ajax实现瀑布流案例

第四阶段:面向对象进阶

面向对象终极篇

  • 内存理解:从内存角度理解JS面向对象
  • 数据类型:基本类型、复杂类型
  • 原型链:原型链机制
  • ES6特性:ES6中的面向对象
  • 属性控制:属性读写权限、设置器、访问器

面向对象三大特征

  • 继承性:原型继承、类继承
  • 多态性:方法重写、接口实现
  • 封装性:私有属性、模块化

设计模式

  • 编程思维:面向对象编程思维
  • 创建模式:单例模式、工厂模式
  • 结构模式:策略模式、适配器模式、装饰者模式
  • 行为模式:观察者模式、模板方法模式
  • 架构模式:代理模式、面向切面编程

第五阶段:封装一个属于自己的框架

框架封装基础

  • 事件机制:事件流、冒泡、捕获
  • 事件对象:事件对象、事件框架
  • 选择框架:选择框架设计

框架封装中级

  • 运动原理:运动原理、单物体运动框架
  • 多物体运动:多物体运动框架
  • 面向对象:运动框架面向对象封装

框架封装高级和补充

  • 框架雏形:JQuery框架雏形
  • 扩展性:可扩展性、模块化
  • 项目实践:封装属于自己的框架

第六阶段:模块化组件开发

面向组件编程

  • 组件概念:面向组件编程的方式
  • 实现原理:面向组件编程的实现原理
  • 实战应用:面向组件编程实战
  • 项目开发:基于组件化思想开发网站应用程序

面向模块编程

  • AMD规范:AMD设计规范
  • CMD规范:CMD设计规范
  • 模块加载:RequireJS、LoadJS
  • 淘宝方案:淘宝的SeaJS

第七阶段:主流的流行框架

Web开发工作流

  • 版本控制:GIT/SVN
  • 脚手架:Yeoman脚手架
  • 依赖管理:NPM/Bower依赖管理工具
  • 构建工具:Grunt/Gulp/Webpack

MVC/MVVM/MVW框架

  • Angular.js:Google的MVVM框架
  • Backbone.js:轻量级MVC框架
  • Knockout/Ember:数据绑定框架

常用库

  • React.js:Facebook的UI库
  • Vue.js:渐进式JavaScript框架
  • Zepto.js:移动端jQuery替代品

第八阶段:HTML5原生移动应用开发

Cordova

  • 应用类型:WebApp/NativeApp/HybirdApp简介
  • 框架介绍:Cordova简介、与PhoneGap之间的关系
  • 环境搭建:开发环境搭建
  • 实战开发:Cordova实战(创建项目,配置,编译,调试,部署发布)

Ionic

  • 框架对比:Ionic简介和同类对比
  • 项目解析:模板项目解析
  • 组件使用:常见组件及使用
  • Angular集成:结合Angular构建APP
  • 交互效果:常见效果(下拉刷新,上拉加载,侧滑导航,选项卡)

React Native

  • 框架介绍:React Native简介
  • 环境配置:React Native环境配置
  • 项目开发:创建项目,配置,编译,调试,部署发布
  • 原生集成:原生模块和UI组件、原生常用API

HTML5+

  • 产业联盟:HTML5+中国产业联盟
  • 运行环境:HTML5 Plus Runtime环境
  • 开发工具:HBuilder开发工具
  • 框架应用:MUI框架、H5+开发和部署

第九阶段:Node.js全栈开发

快速入门

  • 发展历程:Node.js发展、生态圈
  • 环境配置:Io.js、Linux/Windows/OS X环境配置
  • 基础概念:REPL环境和控制台程序
  • 异步编程:异步编程,非阻塞I/O
  • 模块管理:模块概念,模块管理工具
  • 开发流程:开发流程,调试,测试

核心模块和对象

  • 全局对象:global,process,console,util
  • 事件机制:事件驱动,事件发射器
  • 数据处理:加密解密,路径操作,序列化和反序列化
  • 文件操作:文件流操作
  • 网络通信:HTTP服务端与客户端、Socket.IO

Web开发基础

  • HTTP协议:HTTP协议,请求响应处理过程
  • 数据库操作:关系型数据库操作和数据访问、非关系型数据库操作和数据访问
  • 原生开发:原生的Node.js开发Web应用程序
  • 工作流:Web开发工作流
  • 项目实践:Node.js开发Blog案例

快速开发框架

  • Express框架:Express简介+MVC简介
  • API使用:Express常用API
  • 路由模块:Express路由模块
  • 模板引擎:Jade/Ejs模板引擎
  • 项目重构:使用Express重构Blog案例
  • 其他框架:Koa等其他常见MVC框架

Node.js开发电子商务实战

  • 需求设计:需求与设计
  • 用户系统:账户模块注册登录、会员中心模块
  • 前台展示:前台展示模块
  • 购物功能:购物车,订单结算
  • 即时通讯:在线客服即时通讯模块

原文链接地址: https://blog.csdn.net/u011047006/article/details/52597178

发表回复

Your email address will not be published. Required fields are marked *.

*
*

鄂ICP备2025138472号-1