前段时间呢做了一个在简书仿简书的项目，学到的东西还是有的，但又触达了一些新的东西。
作为一个前后端分离的项目，跨域问题肯定是一个最先需要解决的问题，在没有做这个玩意之前，在网上也看到了一些方法，但这个问题的核心问题在于，这是浏览器的安全策略搞的。那么解决方案也就很明显，改掉浏览器的安全规则，当然，这是非常不推荐的。那么另一类方案就是骗浏览器，不管是通过 nginx 代理还是 node 中间件，本质上就是访问一个可以访问的地址但最终的真实地址并不是这个。最后 2021 年推荐的方案是cors。
搞完跨域，那接下来就是登录了，同样地在没有搞之前，对 cookie 的误解很深，特别是，这玩意怎么在前后端来回传的。看了一些如何操作 cookie 的博客给到自己一个错觉，前端通过某种方式获取了 cookie，再通过某种方式将 cookie 传给后端。但如果仅仅站在前端的角度来看，就很混沌。事实是 cookie 不需要前端主动获取，在每个HTTP请求上会带着 cookie ，也就是说，整个过程前端是无感知的，而且现在的趋势是前端不操作 cookie。当然了，这个项目中使用的是JWT。
搞完用户登录，接着就是创建文章了，这里就又有问题了。文章的格式是怎样的？这里是支持 markdown 的，那么问题又来了，是前端渲染还是后端渲染？这里就使用前端的渲染方式，紧接着，问题又来了，如何将 markdown 格式渲染成 DOM 结点 ，这里其实是老大难的问题，富文本编辑器绝对可以说是前端一个比较难搞的点。你猜我是怎么搞的？当然是找轮子了，虽说本来搞这个东西是想练一练，尽可能不用组件库，但这个编辑器真的难搞，所以就使用了mavonEditor，但最近好像不更新了。通过查看该项目的 package.json 文件发现使用了 markdown-it 进行 markdown 格式的转化。
消息通知这一块，项目中使用了 ajax 短轮询的方式，据说使用 WebSocket 更好。
综上呢，2021年的flag：
- Vue3
- TypeScript
- WebSocket
- svelte
- 编译原理
本以为前端不需要太多的计算机基础知识，但好像一样不少，Babel 如何将 ES6 转换成 ES5，TypeScript 如何转换成 JavaScript，文本编辑器中如何将 markdown 格式转换成 HTML 中的节点，Vue中的虚拟DOM和真实DOM如何互相转化。虽说这些过程并不算是严格意义上的“编译”，但，管他呢，flag立就完事了，至于能不能完成，就随缘了。
网友评论