Javascript 设计模式系统讲解与应用

203 阅读5分钟

download:Javascript 设计模式系统讲解与应用

从“写好代码”到“设计代码”的过程,不仅是技术的提升,更是编程思维的提升,而这其中最关键的就是设计模式,是否理解并掌握设计模式,也是衡量程序员能力的标准之一。

适合人群

工作1-3年的前端工程师,或者基础较好的应届毕业生

技术储备要求

了解面向对象思想,熟练使用jQuery或类似工具库,

有 ES6 语法基础,用过 Node.js 和 npm ,
了解 React 和 Vue 的用法(看过文档、做过 demo)

第1章 课程导学

本章主要引见学习react的重要性,课程的学问大纲,学习前提,讲授方式及预期收获。

1-1 课程导学 试看
第2章 React初探

本章主要解说React项目的开发环境搭建,工程代码构造及React中最根底的语法内容,同时对前端组件化思想停止引见。

2-1 React简介
2-2 React开发环境准备
2-3 工程目录文件简介
2-4 React中的组件 试看
2-5 React 中最根底的JSX语法 试看
第3章 React根底精讲

本章经过TodoList功用的完成,给大家完好引见React的根底语法,设计理念以及盘绕React展开的一些编程思想。

3-1 运用React编写TodoList功用
3-2 React 中的响应式设计思想和事情绑定
3-3 完成 TodoList 新增删除功用
3-4 JSX语法细节补充
3-5 拆分组件与组件之间的传值
3-6 TodoList 代码优化
3-7 盘绕 React 衍生出的考虑
第4章 React高级内容

本章解说React高级局部内容,包含PropTypes,生命周期函数,虚拟Dom,数据mock,动画完成等局部课程解说。

4-1 React developer tools 装置及运用
4-2 PropTypes 与 DefaultProps 的应用
4-3 props,state 与 render 函数的关系
4-4 React 中的虚拟DOM
4-5 深化理解虚拟DOM
4-6 虚拟 DOM 中的 Diff 算法
4-7 React 中 ref 的运用
4-8 React 的生命周期函数
4-9 React 生命周期函数的运用场景
4-10 运用Charles完成本地数据mock
4-11 React 中完成 CSS 过渡动画
4-12 React 中运用 CSS 动画效果
4-13 运用 react-transition-group 完成动画(1)
4-14 运用 react-transition-group 的运用(2)
第5章 Redux入门

本章主要解说Redux产生背景,组成内容以及运用方式,经过实例带大家上手Redux数据管理框架的运用。

5-1 Redux 概念简述
5-2 Redux 的工作流程
5-3 运用 Antd 完成 TodoList 页面规划
5-4 创立 redux 中的 store
5-5 Action 和 Reducer 的编写
5-6 运用 Redux 完成 TodoList 删除功用
5-7 ActionTypes 的拆分
5-8 运用 actionCreator 统一创立 action
5-9 Redux 学问点温习补充
第6章 Redux进阶

本章主要解说UI组件与容器组件根底,如何运用redux-thunk,redux-saga等Redux中间件,以及react-redux的运用方式。

6-1 UI组件和容器组件
6-2 无状态组件
6-3 Redux 中发送异步恳求获取数据
6-4 运用Redux-thunk 中间件完成ajax数据恳求
6-5 什么是Redux的中间件
6-6 Redux-saga中间件入门(1)
6-7 Redux-saga中间件入门(2)
6-8 如何运用 React-redux(1)
6-9 如何运用 React-redux(2)
6-10 运用React-redux完成TodoList功用
第7章 项目实战:Header组件开发

本章解说项目中公用Header组件的开发,包含动画效果完成,iconfont,immutable.js,styled-components的运用以及异步数据的获取。

7-1 项目目录搭建,Styled-Components 与 Reset.css 的分离运用
7-2 运用 styled-components 完成 Header 组件规划(1)
7-3 运用 styled-components 完成 Header 组件规划(2)
7-4 运用 iconfont 嵌入头部图标
7-5 搜索框动画效果完成
7-6 运用 React-Redux 停止应用数据的管理
7-7 运用 combineReducers 完成对数据的拆分管理
7-8 actionCreators 与 constants 的拆分
7-9 运用 Immutable.js 来管理store中的数据
7-10 运用 redux-immutable 统一数据格式
7-11 抢手搜索款式规划
7-12 Ajax获取引荐数据
7-13 代码优化微调
7-14 抢手搜索换页功用完成
7-15 换页旋转动画效果的完成
7-16 防止无意义的恳求发送,提升组件性能
第8章 项目实战:首页开发

本章将带大家完成项目首页的开发,课程能容包含react-router4的运用,组件及reducer的拆分设计,首页局部的中心功用包含列表显现,加载更多,返回顶部等。

8-1 什么是路由,如何在React中运用路由功用
8-2 首页组件的拆分
8-3 首页专题区域规划及reducer的设计
8-4 首页文章列表制造
8-5 首页引荐局部代码编写
8-6 首页异步数据获取
8-7 异步操作代码拆分优化
8-8 完成加载更多功用
8-9 返回顶部功用完成
8-10 首页性能优化及路由跳转
第9章 项目实战:详情页面和登录功用开发

本章将完成详情页面的开发,过程中将完好引见react-router跨页面传值的办法及登陆鉴权的完成思绪。同时我们将给大家引见异步组件和路由withRouter办法的运用方式。

9-1 详情页面规划
9-2 运用redux管理详情页面数据
9-3 异步获取数据
9-4 页面路由参数的传送
9-5 登陆页面规划
9-6 登陆功用完成
9-7 登陆鉴权及代码优化
9-8 异步组件及withRouter路由办法的运用
第10章 课程总结

本章将给大家引见项目的上线流程,React版本晋级对本项目的影响,并带大家停止整个课程的学问点回忆。

10-1 项目上线流程
10-2 React 版本晋级阐明
10-3 课程总结
本课程已结束