lucifer
full stack coder
数据结构与算法
在前端领域的应用
lucifer@tsign
About ME
一个脑洞很大的前端
算法爱好者
做过后端开发
lucifer@tsign
西法@横向业务组
slide online
Agenda
[ "为什么大家觉得算法没用", "前端中算法的应用场景都有哪些", "算法在日常开发中的应用都有哪些" ]
0. 为什么是我来做这次分享
-
实际业务支撑
-
做过一些研究
-
和优秀的开发者进行交流得到的第一手资料
1. 5W条数据在前端展示
2. prerender
3. ajax cache
4. computed cache
5. pure function composition
6. sql
7. webworker
8. canvas 笔触优化 canvas旋转
...
1. 为什么大家觉得算法没用
业务代码
依赖
冰山一角
硬件的提升让你觉得性能优化显得微不足道
2. 前端中算法的应用场景都有哪些
VDOM/ DOM diff
browserslist
AST
webpack
fiber
Reactive
Git
AI
hooks
browser history
view stack
VSCode IntelliSense
Algebraic effects
...
3. 算法在日常开发中的应用都有哪些
某一天，可(gai)爱(si)的产品提了一个需求
”我们的系统需要支持用户撤销和重做最近十次的操作。“
例1
符合直觉的想法
用户每进行一次操作，我就把整个DOM复制下来（包括样式，事件监听等）
需要撤销重做，我们根据情况粘贴即可
[View1, View2, View3]
性能难以接受
state
view
state'
view'
回忆一下数据驱动
(store1, action1) => store2
(store1, action1, action2, action3) => store4
(store2, action2) => store3
(store3, action3) => store4
store2
store3
store4
回忆一下reducer
方法一：
[store1, store2, store3]
方法二：
[action1, action2, action3]
store1
方法三：
{
"count": 0,
"user": {
"name": "lucifer",
"age": 7
},
"articles": []
}
[diff1, diff2, diff3]
store1
[rdiff1, rdiff2, rdiff3]
store3
And More
{
"tsign/act/get": {},
"tsign/act/get/1": {},
"base/info/get": {},
"base/roll/get": {},
"base/roll/post": {},
}
例2
例3
浙江省杭州市西湖区西斗门路天堂软件园D幢20F
浙江省杭州市西湖区西斗门路天堂软件园C幢20F
浙江杭州西湖区西斗门路天堂软件园C幢20F
浙江杭州西湖区西门路XX软件园C幢20F
例4 相似度检测
文件权限系统
匹配三的倍数
function createFSM() {
return {
initial: 0,
states: {
0: {
on: {
read(ch) {
return {
0: 0,
3: 0,
9: 0,
1: 1,
4: 1,
7: 1,
2: 2,
5: 2,
8: 2
}[ch];
}
}
},
1: {
on: {
read(ch) {
return {
0: 1,
3: 1,
9: 1,
1: 2,
4: 2,
7: 2,
2: 0,
5: 0,
8: 0
}[ch];
}
}
},
2: {
on: {
read(ch) {
return {
0: 2,
3: 2,
9: 2,
1: 0,
4: 0,
7: 0,
2: 1,
5: 1,
8: 1
}[ch];
}
}
}
}
};
}
const fsm = createFSM();
const str = "281902812894839483047309573843389230298329038293829329";
let cur = fsm.initial;
for (let i = 0; i < str.length; i++) {
if (!["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(str[i])) {
throw new Error("非法数字");
}
cur = fsm.states[cur].on.read(str[i]);
}
if (cur === 0) {
console.log("可以被3整除");
} else {
console.log("不可以被3整除");
}
答题活动
lucifer.ren/blog
更多内容
Thanks ～
数据结构与算法在前端领域的应用
By lucifer
