FE备忘（2021） - Githubissues

xszi commented 3 years ago

偶有所想，分享记录

xszi commented 3 years ago

1. SourceMap

sourceMap的主要作用是为了方便测试，因为现在的前端代码都是模块化、组件化。在上线之前会对JS和CSS代码进行合并压缩。对于开发者来说，对这样的线上代码进行调试是痛苦的，压缩之后的代码可阅读性很差。sourceMap的作用就是让浏览器的调试面板将生成后的代码映射到源码文件中，开发者可以在源码文件中做调试工作。

SourceMap的作用

开发环境生成SourceMap方便调试代码
生产环境通常会禁用掉SourceMap，避免源码泄露，但是一些第三方库，比如BootStrap会提供sourceMap方便用户测试
生产环境错误监控系统可以收集出错堆栈，经过SourceMap还原出错位置。（使用sentry进行前端监控）

sourceMap生成过程举例：

创建js文件

// index.js
const sayHello = function () {
console.log('hello sentry');
}

全局安装uglify.js
```
npm i -g uglify-js
```

命令行执行以下命令

uglifyjs index.js -o output.min.js --source-map "filename='output.min.js.map'"

生成的js文件和sourceMap文件如下：

// output.min.js
const sayHello=function(){console.log("hello sentry")};

// output.min.js.map
{
"version": 3,
"file": "output.min.js.map",
"sources": [
    "index.js"
],
"names": [
    "sayHello",
    "console",
    "log"
],
"mappings": "AAAA,MAAMA,SAAW,WACbC,QAAQC,IAAI"
}

uglifyjs压缩代码生成sourceMap文件，然后可对mapping 关系进行优化。

SourceMap原理

用编码的方式记录代码的位置，后续使用的时候再映射还原。

编号：行（都是0省略）---> 文件 --->|省略| |列位置| |||name（具体变量）|
偏移量表示位置：行（都是0省略）---> 文件 --->|省略| |列位置| |||name（具体变量）|

VLQ编码，可变长度编码

surge hugo —— 个人博客部署快速通道

jamStack —— 国外一个建站帮助网站

—————— 2020.12.04

xszi commented 3 years ago

2. HMR原理

HMR（Hot Module Replacement）是webpack最令人兴奋的特性之一，用于在不刷新页面、不丢失页面状态的情况下对应用发生变更的文件进行热更新。

在HMR出现之前，已有很多live reload库，能做到代码编译后自动刷新浏览器，不需要手动更新，如果应用是无状态的话，这样做没什么问题，但是一旦有状态的话，刷新页面就会导致状态丢失。举例说明：如果一个系统有个登陆页面，用户输入完用户名和密码，获取到JWT（JSON Web Token），将JWT保存在变量中，那么如果页面刷新的话JWT就会丢失，导致开发需要再次登陆，这种体验就很差了。

—————— 2020.12.25

xszi commented 3 years ago

3. 2021前端趋势 —— 狼叔

http import 会大行其道
逻辑编排，更加面向开发者
智能UI精细化(imgcook)
智能化 PRD 2 Code（P2C）
不会 Python，前端也能搞机器学习
从组件库到动态集合（Bit.dev）

像airpack、http import、imove、midway-hooks、ykfe/ssr这些其实会成为前端新基建。

—————— 2021.01.12

xszi commented 3 years ago

4. 前端开发过程遇到的问题 / 建议

问题：

产品需求规划没有开发参与，版本开发周期未能与开发商量，导致开发时间不能合理安排；
前端开发人员太少
产品持续在版本周期加新需求
编码规范

建议：

团队影响力，技术开源
团队业余活动
找一些基础性的项目共同参与，共同成长
技术分享内容可以分享一些自己开发项目内的经验，困扰，难点
交叉参与别人的项目，codeReview

—————— 2021.01.15

xszi commented 3 years ago

5. wizard2021年度计划

小程序，bu加内部
智能，减少手工操作，修改卡片状态，处理人等
建立人工智能基础模型，落实几个场景，比如集成部署智能打包编译
alm流程，提高开发效率
产品驱动开发，技术驱动开发
版本，需求变更强管控
项目管理日历，人力视图
测试自动化
wizard使用，视频PPT等

—————— 2021.01.21

xszi commented 3 years ago

6. UV，PV，VV

UV（Unique visitor）是指通过互联网访问、浏览这个网页的自然人。访问您网站的一台电脑客户端为一个访客。00:00-24:00内相同的客户端只被计算一次。
PV（Page View）即页面浏览量或点击量，用户每1次对网站中的每个网页访问均被记录1个PV。用户对同一页面的多次访问，访问量累计，用以衡量网站用户访问的网页数量。
VV（Visit View）用以统计所有访客1天内访问网站的次数。当访客完成所有浏览并最终关掉该网站的所有页面时便完成了一次访问，同一访客1天内可能有多次访问行为，访问次数累计。

举例： 你今天10点钟打开了百度，访问了它的三个页面；11点钟又打开了百度，访问了它的两个页面，则UV数为+1，PV数+5，VV数+2.

—————— 2021.01.22

xszi commented 3 years ago

7. Github Actions

将个人项目部署到github上面：

持续集成持续部署（CICD）
部署文件解析
将所有的项目选择性吸收

如何部署Node.js项目

xszi commented 3 years ago

8. CSS变量

两个demo:

源码

xszi commented 3 years ago

9. 使用`blink-mind`开源库修改实现一个思维导图工具

复制问题：从其他思维导图工具复制节点到当前工具下粘贴？

步骤：

自己写个工具查看复制的内容粘贴后在浏览器中显示，发现不同层级的节点显示时有不同的缩进（Tab）
将复制的text内容根据缩进量表示父子树形关系并转换为JSON对象
将JSON对象粘贴到目标位置

关键位步骤2

大体逻辑：

判断是否包含换行符，若存在，则尝试将文本转换成JSON对象
转换时，通过制表符（\t）的数量来决定父子关系，注意这里只计算有效内容前置的\t数量，如\t\t abc \t, 则\t数量为2 2.1. 若当前行的\t字符数量多于前一行，无论大多少，都认为是前一行的直接子节点 2.2. 若当前行\t字符数量少于前一行，则需要计算少了多少个\t来决定往前找多少层找到父节点，如果找不到有效父节点（如少了的\t数量超过当前缓存的层级数），则直接作为顶层节点返回。 2.3. 若当前行的\t字符数量等于前一行，则认为当前行和前一行是兄弟

以下面机构表示具有缩进的text复制文本，“|-”表示一个Tab缩进

node0
| - node1
| - | - node1.1
| - | - node1.2
| - | - | - node1.2.1
| - node2
| - | - node2.1
| - | - node2.2
| - node3

使用堆栈用来寻找各节点的父节点，用一个cachedNodePath表示一个堆栈，

在遍历过程中，自顶向下遍历，每当出现上述2.1的情况，则往堆栈压入前一个节点（当前节点的父节点）
每当出现2.2情况，则按\t减少数量算出层级（level）减少数量，并从 cachedNodePath抛出这个数量的节点
然后将堆栈中现存的最后一个节点当做当前节点的父节点
若遍历到某行时cachedNodePath为空，则当前行认为是顶层节点

另一种想法：使用reduce处理树形结构数据？

xszi commented 3 years ago

10. 前端学习思路

功能相似的技术只学一种，比如webpack, rollup, gulp都是工程化打包工具，学其一，其他几个初步了解后等工作中用到后在花时间去学；react可以多练练，毕竟可以加分很多
数据可视化方向，未来的VR、AR都是跟图像跟前端有联系的的产业，所以可以往这个方向靠，计算机视觉，图形学，数学，此类方向上限更高，不易被淘汰；
通用领域知识，一旦你下决心从事这个领域，也是能够尽早学习它比较好，不过由于这些知识是领域相关的，如果能一边学习，一边通过实践来打磨，就会掌握得更快。专用领域知识，不一定要很早去学，有一个技巧是，当你用到的时候再去学习它们。如果你没有用到，你可以知道有这门技术，能做什么就行了，不用花大量时间和精力去钻研它们。

《跟月影学可视化》学习地址

可视化学习资料：

关于域名 同源和同站(不一定是顶级域名) public_suffix_lis

域名泛解析

xszi / docs

FE备忘（2021） #7

1. SourceMap

SourceMap的作用

SourceMap原理

—————— 2020.12.04

2. HMR原理

—————— 2020.12.25

3. 2021前端趋势 —— 狼叔

—————— 2021.01.12

4. 前端开发过程遇到的问题 / 建议

—————— 2021.01.15

5. wizard2021年度计划

—————— 2021.01.21

6. UV，PV，VV

—————— 2021.01.22

7. Github Actions

8. CSS变量

9. 使用`blink-mind`开源库修改实现一个思维导图工具

10. 前端学习思路

xszi / docs

FE备忘（2021） #7

1. SourceMap

SourceMap的作用

SourceMap原理

—————— 2020.12.04

2. HMR原理

—————— 2020.12.25

3. 2021前端趋势 —— 狼叔

—————— 2021.01.12

4. 前端开发过程遇到的问题 / 建议

—————— 2021.01.15

5. wizard2021年度计划

—————— 2021.01.21

6. UV，PV，VV

—————— 2021.01.22

7. Github Actions

8. CSS变量

9. 使用blink-mind开源库修改实现一个思维导图工具

10. 前端学习思路

9. 使用`blink-mind`开源库修改实现一个思维导图工具