- freeCodeCamp.org
- FrontendMasters
- SURVIVEJS
- Blog Posts
- SURVIVEJS — MAINTENANCE,Streamline JavaScript Workflow
- SURVIVEJS — REACT
- SURVIVEJS — WEBPACK
- SURVIVEJS — REACT
redux-saga.js.org|redux-saga-in-chinese.js.org|little-saga(⚡ Universal and embeddable saga run-time.)
-
- Fault-Tolerance and Data Consistency Using Distributed Sagas
- Distributed Sagas: A Protocol for Coordinating Microservices - Caitie McCaffrey - JOTB17
- Saga Pattern
- Saga Pattern | How to implement business transactions using Microservices
- SAGA | Microservices Architecture Patterns | Tech Primers
- Applying the Saga Pattern • Caitie McCaffrey
- go-saga,Implements saga-pattern in Go
- Original paper
- A Saga on Sagas
- André Kovac - Handle All Async Events in Redux-Sagas | React Next 2019
- Build a Chat Application using React, Redux, Redux-Saga, and Web Sockets - Tutorial
- Using sagas to maintain data consistency in a microservice architecture by Chris Richardson
- Modular redux architecture
- Building Modular Redux Applications
- Code Splitting for redux and redux-saga
- ...
利用 fork-model & channel 管理复杂的前端游戏逻辑(❤️Saga)
- 这里以 shinima 开源的 battle-city 作为分析项目
- 这个项目是由 Redux-Saga 深度驱动的,几乎涉及到了 Redux-Saga 使用的方方面面。
- 虽然没有用 Canvas 渲染,但它诠释了一种不错的游戏前端逻辑开发的模式(fork-model & channel)。
- 官方文档 | 中文文档 | Demo
- 简介
- 十分钟教程
- 数据提供程序
- Admin 组件
- Resource 组件
- List 视图组件
- Show 视图组件
- Field 组件
- Create 和 Edit 视图组件
- Input 组件
- 身份验证
- 授权
- 主题
- 编写 Action
- i18n
- 在其它 App 中包含 Admin
- 引用
- 常见问题
- 生态
- Powered by material-ui, redux, redux-form, redux-saga, react-router, recompose, reselect and a few more.
- 对于偏 React 生态应用的项目架构来说,参考性较强
- 举一反三,应用到其它 UI 层架构也是不错
开始:
- README
- 十分钟教程上手教程
- 调试 React-Admin 源码,看清框架的本质
localhost:8080背后的动作localhost:8080/#/login背后的动作- React-Admin 架构分析:
Admin组件源码解析之dataProvider属性 - React-Admin 架构分析:Material-UI 定制
- React-Admin 架构分析:
Admin组件源码解析之theme属性 - React-Admin 架构分析:
Admin组件源码解析之appLayout属性 - react-admin 包分析
- ra-core 包分析
- Admin 组件源码解析(有干货但有些凌乱,留作纪念)
- CoreAdminRouter 组件源码分析(有干货但有些凌乱,留作纪念)
- 最早的想法(留作纪念)
- ImageInput 相关问题
- AOP & middleware(1秒懂^_^)
深入实践 Redux Dynamic Modules, 构建大型可伸缩的 React + Redux App
脑图备份:
- React源码大纲
- 浅聊 Virtual DOM
- ES相关基础
- JS-WEB-API
- CSS-HTML
- 前端算法基础
- 浏览器基础知识点
- 前端性能
- 缓存
- 本地存储
- CDN
- 页面渲染
- 浏览器运行机制浅析
- 浅析DOM优化原理
- Event Loop 与异步更新策略
- 回流与重绘
- 首屏
- 防抖与节流
- 性能监测
- react 性能分析
- 前端性能优化清单
- creeperyang/blog
- 把前端监控做到极致
- js-leakage-patterns
- CS-Interview-Knowledge-Map
- Redux-Sage 中文文档
- Redux-Saga 仓库实例精解 (废弃,没价值,大家自行看源码🤣)
- 坦克大战复刻版
- SVG 图像入门教程
- 走进SVG
- svg基础知识点
- immutable入坑指南
- 首屏场景组件 GameTitleScene 的分析
- 关卡选择场景组件 ChooseStageScene 的分析
- 游戏场景组件 GameScene 的分析
- Iterator 和 for...of 循环
- 深入浅出 ES6(二):迭代器和 for-of 循环
- 深入浅出 ES6(三):生成器 Generators
- redux-saga 实践总结
- 浅析redux-saga实现原理
- 从 Pub/Sub 浅聊 reudx-saga
- Redux-Saga 漫谈
- little-saga
- 构建你自己的 redux-saga一文:
- 构建你自己的 redux-saga 总结
- Git 配置
- CSSINJS
- 漫谈 CSS in JS
- webpack可以做什么
- webpack基础配置
- webpack打包文件分析
- webpack之转化ES高级语法
- webpack处理js语法及校验
- webpack暴露全局变量
- webpack之Html插件
- webpack之样式处理
- webpack详细配置
- webpack优化
- tree-shaking
- scope hosting
- splitChunks
- noParse
- webpack.IgnorePlugin
- 懒加载
- dllPlugin
- happypack
- 热更新
- ...
- Tapable
- 实现一个简易的webpack
- 写一个loader
- 写一个plugin
NodeJs 是什么?
- Node.js is a `JavaScript runtime` built on Chrome's V8
- Node.js uses an event-driven, `non-blocking I/O` model
非阻塞I/O
- 阻塞:I/O 时进程休眠等待 I/O 完成后进行下一步
- 非阻塞:I/O 时函数立即返回,进程不等待 I/O 完成
- I/O 操作非常慢
事件驱动
- I/O 等异步操作结束后的通知
- 观察者模式
为什么偏爱 NodeJS
- 前端职责范围变大,统一开发体验
- 在处理高并发,I/O密集场景性能优势明显
CPU 密集 VS I/O 密集
- CPU 密集:压缩,解压,加密,解密
- I/O 密集:文件操作,网络操作,数据库
web 常见场景
- 静态资源的读取
- 数据库操作
- 渲染页面
高并发应对之道
- 增加机器数(堆机器并不合算)
- 增加每台机器的 CPU 数----多核
进程
- 进程(执行中的程序):是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位
- 多进程:启动多个进程,多个进程可以一块执行多个任务(CPU 调度算法快速的切换)
NodeJS 工作模型
- Client --> EventLoop(single thred) --> Non-blocking Worker(internal C++ threadpool)
- 一个 NodeJS 进程只开一个线程
线程
- 线程:进程内一个相对独立的,可调度的执行单元,与同属于一个进程的线程共享进程的资源
- 多线程:启动一个进程,在一个进程内启动多个线程,这样,多个线程也可以一块执行多个任务(靠调度算法来做)
NodeJS 的单线程
- 单线程只是针对主进程,与I/O 操作系统底层多线程调度没啥关系
- 单线程并不是单进程(用 cluster 模块,CPU 有几个核儿,我们就启几个进程)
常用场景
- Web Server
- 本地代码构建(性能不是最好,但对前端友好)
- 实用工具开发(性能不是最好,但对前端友好)
快速 Demo 演示
- VSCode + Code Runner
包裹函数,不用自己写,NodeJS 帮我们弄好了
(function(exports, require, module, __filename, __dirname){
console.log('test.');
});CommonJS 特性
- 每个文件是一个模块,有自己的作用域
- 在模块内部 module 变量代表模块本身
- module.exports 属性代表模块对外接口
require 规则
- `/` 表示绝对路径,`./` 表示相对于当前文件的
- 支持 js、json、node 拓展名,不写依次尝试
- 不写路径则认为是 build-in 模块或者各级 node_modules 内的第三方模块
require 特性
- module 被加载的时候执行,加载后缓存
- 一旦出现某个模块被循环加载,就只输出已经执行的部分,还未执行的部分不会输出
npm 常用命令
- npm root -g
module.exports 与 exports 的区别
- exports 是 module.exports 的快捷方式
global
- CommonJS
- Buffer、process、console
- timer
process 模块常用 API
- 文档
- process.argv
- process.argv0
- process.execArgv
- process.execPath
- process.env
- process.cwd()
- process.nextTick(()=>{})
setImmediate(() => console.log('setImmediate'));
setTimeout(() => console.log('timeout'), 0);
process.nextTick(() => {
console.log('nextTick1')
process.nextTick(() => console.log('nextTick2'))
});
// nextTick1
// nextTick2
// timeout
// setImmediate
// nextTick 是放在当前事件队列的最后,主意这个不能出现递归,不然其它异步都会异常
// setTimeout 放在 nextTick 和 setImmediate 中间
// setImmediate 是放在下一个事件队列队首Debugger
- 文档
- vscode-recipes
- 条件调试
path 模块常用 API
- 文档
- __dirname, __filename 总是返回文件的绝对路径
- process.cwd() 总是返回执行 node 命令所在的文件夹
- `./` 在 require 方法中总是相对当前文件所在文件夹
- `./` 在其它地方 (path.resolve('./')) 就和 process.cwd() 一样,相对 node 启动文件夹
- path.normalize
- path.join
- path.resolve
- path.basename
- path.dirname
- path.extname
- path.parse
- path.format
- path.sep
- path.delimiter
- path.win32
- path.posix
Buffer 模块常用 API
- 文档
- Buffer 用于处理二进制数据流
- 实现类似整数数组,大小固定
- C++ 代码在 V8 堆外分配物理内存
- Buffer.alloc
- Buffer.from
- Buffer.byteLength
- Buffer.isBuffer
- Buffer.concat
- buf.length
- buf.toString
- buf.fill
- buf.equals
- buf.indexOf
- buf.copy
const { StringDecoder } = require('string_decoder')
const decoder = new StringDecoder('utf8')
const buf = Buffer.from('中文字符串')
for(let i = 0; i < buf.length; i+=5) {
const b = Buffer.allocUnsafe(5)
buf.copy(b, 0, i)
console.log(b.toString());
console.log(decoder.write(b))
}events 模块
- 文档
- 继承 EventEmitter
- ce.on
- ce.emit
- ce.onece
- ce.removeListener
- ce.removeAllListeners
fs 模块
- 文档
- fs.readFile
- fs.readFileSync
- fs.writeFile
- fs.stat
- fs.unlink
- fs.readdir
- fs.mkdir
- fs.rmdir
- fs.watch
- fs.readstream
- fs.writestream
const fs = require("fs");
const path = require("path");
const promisify = require("util").promisify;
const read = promisify(fs.readFile);
// read(path.join(__dirname,'./promisify.js'))
// .then( data => {
// console.log(data.toString());
// })
// .catch(ex => {
// console.log(ex)
// })
async function test() {
try {
const content = await read(path.join(__dirname, "./promisify.js"));
console.log(content.toString());
} catch (ex) {
console.log(ex);
}
}
test();.gitignore
- 文档
- 匹配模式前 / 代表项目根目录
- 匹配模式最后加 / 代表目录
- 匹配模式前加 ! 代表取反
- * 代表任意个字符
- ?匹配任意一个字符
- ** 匹配多级目录
.npmignore
- 文档
- src(npm 包忽略)
- test(npm 包忽略)
EditorConfig
ESLint
Benchmark.js
EventLoop
- CSS 盒模型
- 页面布局
- DOM 事件
- HTTP 协议
- 原型链类
- 面向对象
- 通信
- 前端安全
- 前端算法
- 渲染机制
- JS 运行机制
- 页面性能
- 错误监控
- 业务
- 团队协作
- ...
- 使用Jest进行React单元测试
- Jest & enzyme 进行react单元测试
- postMessage do not trigger message event listener
- window.postMessage doesn't work
- javascript-datastructures-algorithms
- ory-editor
- typescript-library-starter
- wretch
- umbrella
- postmate
- penpal
- final-form
- tsdx
- little-saga
- amis
- H5Skills
墙内:
- Preact 源码解析
- React.js 小书
- Jony的博客,记录学习工作的点点滴滴
- 冴羽的博客
- node-interview
- 大话WEB开发
- 梁少峰的个人博客
- JavaScript内存泄露和CSS优化
- 每周重点攻克一个前端面试重难点
- 前端精读周刊
- 天猪部落阁
- Nodejs-Roadmap
- amandakelake/blog
- blog.atulr.com
- React 源码解析
- 404forest 墙外:
- Mihailizing
openssl req -newkey rsa:2048 -x509 -nodes -keyout server.pem -new -out server.crt -subj /CN=dev.xx.com -reqexts SAN -extensions SAN -config <(cat /System/Library/OpenSSL/openssl.cnf <(printf '[SAN]\nsubjectAltName=DNS:dev.xx.com')) -sha256 -days 3650sudo lsof -n -P | grep :80- 在GIT中创建一个空分支
- Android7.0以上使用Charles抓包Https
- JB的测试之旅-听说安卓微信7.0不能抓https?
- Android 7.0+ 抓包https的一种方案(支持微信7.0)
深入理解 redux-saga 之 little-saga 全面解析
构建你自己的 redux-saga 总结:(脑图)
目录:
- 0.2 名词解释
- 1.1 生成器函数
- 1.2 使用 while-true 来消费迭代器
- 1.3 使用递归函数来消费迭代器
- 1.4 双向通信
- 1.5 effect 的类型与含义
- 1.6 result-first callback style
- 1.7 cancellation
- 1.8 effect 状态