1 node.js
1.1 简介
- 定义 JS的服务端运行环境
- 用途 构建工具webpack的环境依赖
- 特点 单线程、异步编程
- 应用场景 低运算、高I/O
Nodejs的包管理工具一
2 npm
安装
- npm init
3 Webpack
- 设计思想 require anything
- 加载方式 各种loader插件
- 编译方式 commonjs模块-> function类型模块
- 官方文档 http://webpack.github.io/docs/
安装
- sudo npm install -g webpack
- npm install webpack@1.15.0 --save-dev
- webpack -v
webpack.config.js
●entry : js的入口文件 ●externals :外部依赖的声明 ●output: 目标文件 ●resolve :配置别名 ●module :各种文件，各种loader ●plugins :插件
Webpack Loaders
- html html-webpack-plugin / html-loader
- js babel-loader babel-preset-es2015
- css style-loader css-loader
- image font url-loader
Webpack常用命令
webpack webpack -p webpack --watch webpack --config webpack.config.js
热加载
webpack-dev-server 作用:前端开发服务器 特色:可以在文件改变时，自动刷新浏览器 安装: npm install webpack-dev-server一save-dev 配置: webpack-dev-server/client?http://localhost:8088 使用: webpack-dev-server --port 8088 --inline
- webpack-dev-server --contentbase -src --inline --hot(热加载启动命令)
接着执行 webpack 进行打包
1.3数据接口设计
请求和响应
2.1页面加载过程
- 资源加载过程
- URL 结构
- DNS 查询
- dns-prefetch
2.5 本地存储
session
- 服务端保存请求信息的机制
- sessionld通 常存放在cookie里
- 会话由浏览器控制，会话结束，session失效
修改 cookie
删除 cookie
登录后,发现新增 jssessionID 字段的 cookie,属于 http-only, 用户端不可修改
3 前端框架
三大框架
4.3 node.js 及 yarn 安装
4.4 Webpack 配置
webpack，一个前端资源加载/打包工具
需要处理的文件类型
Html html-webpack-plugin 脚本 babel babel-preset-react 样式 css-loader sass-loader 图片/字体 url-loader file-loader
webpack常用模块
- html-webpack-plugin html单 独打包成文件
- extract-text-webpack-plugin 样式打包成单独文件
- CommonsChunkPlugin 提出通用模块
webpack-dev-server
为webpack项目提供web服务 更改代码自动刷新，路径转发
代码语言：javascript复制yarn add webpack-dev-server@2.9.7 --dev解决多版本共存问题
5 React基础
视图层框架
- 一个构建用户界面的框架
- 声明式的框架
- 数据驱动DOM，再用事件反馈给数据
组件化开发
- 组件组合而不是继承
- state && props
- 生命周期
理解JSX
- 一种JS扩展的表达式
- 带有逻辑的标记语法，有别于HTML模板
- 对样式，逻辑表达式和事件的支持
虚拟DOM
- 对DOM（可理解为 HTML）进行模拟
- 比较操作前后的数据差异
- 如果有数据差异，统一操作DOM
为何使用虚拟 dom
实现原理
- 对于如下 js，由于引入了 react，肯定无法直接引入该 js 文件吧
这时就需要 webpack 对这些文件打包。
