Skip to content

Kirk-Wang/Blog

Repository files navigation

🍺🍗🍖

International React Conference

DEV COMMUNITY

CHAT

Courses

利用 Redux-Saga 优雅的管理各种复杂的逻辑

精读 Redux-Saga 源码测试用例

redux-saga.js.org|redux-saga-in-chinese.js.org|little-saga(⚡ Universal and embeddable saga run-time.)


Redux-Saga 游戏编程

利用 fork-model & channel 管理复杂的前端游戏逻辑(❤️Saga)

  • 这里以 shinima 开源的 battle-city 作为分析项目
  • 这个项目是由 Redux-Saga 深度驱动的,几乎涉及到了 Redux-Saga 使用的方方面面。
  • 虽然没有用 Canvas 渲染,但它诠释了一种不错的游戏前端逻辑开发的模式(fork-model & channel)。

状态模型分析,一切从建模开始^_^

battle-city-state-analysis


React-Admin 相关文档

读 React-Admin 项目,感受 React 应用架构的魅力

react-admin

开始:

  1. README
  2. 十分钟教程上手教程

  1. 利用 Data Provider 适配你自己的 API

  1. 利用<Admin/>自定义一切

React-Admin 核心组件及源码分析

扩展安装:Redux DevTools Extension

  1. 调试 React-Admin 源码,看清框架的本质
  2. localhost:8080 背后的动作
  3. localhost:8080/#/login 背后的动作
  4. React-Admin 架构分析:Admin 组件源码解析之 dataProvider 属性
  5. React-Admin 架构分析:Material-UI 定制
  6. React-Admin 架构分析:Admin 组件源码解析之 theme 属性
  7. React-Admin 架构分析:Admin 组件源码解析之 appLayout 属性
  8. react-admin 包分析
  9. ra-core 包分析
  10. Admin 组件源码解析(有干货但有些凌乱,留作纪念)
  11. CoreAdminRouter 组件源码分析(有干货但有些凌乱,留作纪念)
  12. 最早的想法(留作纪念)
  13. ImageInput 相关问题
  14. AOP & middleware(1秒懂^_^)

深入实践 Redux Dynamic Modules, 构建大型可伸缩的 React + Redux App

脑图备份:


redux-saga


webpack(脑图)


NodeJS

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

CommonJS

包裹函数,不用自己写,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(()=>{})

nextTick VS setTimeout VS setImmediate

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
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

promisify & async

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


nice repos~

monorepos ~~~

优秀的 blog

墙内:

监控

JavaScript SDK Design

杂项

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 3650
sudo lsof -n -P | grep :80

深入理解 redux-sagalittle-saga 全面解析

构建你自己的 redux-saga 总结:(脑图)

目录:

0.2 名词解释

0.2 名词解释

1.1 生成器函数

1.1 生成器函数

1.2 使用 while-true 来消费迭代器

1.2 使用 while-true 来消费迭代器

1.3 使用递归函数来消费迭代器

1.3 使用递归函数来消费迭代器

1.4 双向通信

1.4 双向通信

1.5 effect 的类型与含义

1.5 effect 的类型与含义

1.6 result-first callback style

1.6 result-first callback style

1.7 cancellation

1.7 cancellation

1.8 effect 状态

 1.8 effect 状态


Isomorphic(集群&大规模)


一些文章

About

一个长期没更新的 Blog~🏄

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •