blog
blog copied to clipboard
FatDong1
📝 一些生活随笔和技术文章
转行入门前端的故事
## 前言 转行不易，打算写一篇文章给转行的小伙伴一些建议。下面是我18届机械转行前端的故事。 ## 入门编程 在大二下学期的时候，我开始决定转行，下学期花了一个月时间学习C语言，记得那时候看的是郝斌的教学视频，同时也看了数据结构与算法的视频，慢慢对编程有了一个大概的了解。 那时候写一个for循环还是很开心的。 那时候印象比较深刻的是，在暑假的时候，学校宿舍没开空调，天气太热自己只能赤裸着上身在看《大话数据结构》，然后旁边的室友在打着英雄联盟，过了一个月实在受不了了，太热了，就回江苏父母那里玩去了。 ## 选择方向 到了选择工作方向的时候，那时候在网上询问别人的建议，经常在知乎上面看别人的转行经验，最后给自己三个选择：安卓、IOS、前端。 IOS由于学习成本有点高，需要Mac、iPhone，不好意思向父母要钱，所以自己把IOS这个方向给pass掉了。最后选择了前端，主要有5个原因： - 科班的人很少选择前端，所以到时候自己的竞争优势会好一些。（后来我找工作遇到了中南大学、深圳大学的科班前端😭 - 前端现在需求很大。 - 前端容易入门，且很容易获得成就感。 - 自己的电脑（两三千）配置不高。 ## 开始入门前端 ### HTML的学习 给自己定的学习期限：1周的时间学习。 那时候照着w3c的文档，一边敲着代码，一边实现着简单的效果，一边向室友炫耀，“你看这标签多厉害...”。就这样，一个星期之后，对html有了一个初步入门的了解。 ****建议****：可以通过MDN学习 ### CSS的学习 给自己定的学习期限：1个月的时间学习。...
## Koa Koa代码非常简洁，主要实现了中间件的扩展的洋葱模型，其他功能可以通过中间件的形式引入。 可以带着下面的问题去阅读源码： - 中间件是什么时候开始执行的? - 洋葱模型是怎么实现的？ - app.use是怎么引入中间件的？ ## 核心源码 [地址](https://github.com/koajs/koa/blob/master/lib/application.js) ## 中间件是什么时候开始执行的? 当执行`app.listen(3000)`的时候会开始执行中间件。 ```js listen(...args) { // this.callback 会按顺序去执行中间件 const server = http.createServer(this.callback()); return server.listen(...args); } ```...
## 原理 使用双向链表和哈希表 ## 代码实现 ```js // 链表节点 class Node { constructor (key = null, value = null) { this.key = key this.saveTime = Date.now() this.value = value this.pre =...
## 前言 这本书讲的很详细，先简单总结一下在书中学到的知识，后续需要深入了解实践再详细总结。 ## HTTP/1.x的缺陷 - 效率低。需要等待上一个请求响应完成，才能发送下一个请求。可以进行`域名分片`，通过创建多个TCP连接改善。 - 文本传输协议无法高效编码数据，而且容易导致安全问题 ## SPDY协议 SPDY（发音为speedy）协议是HTTP2发生重要改变的原因，引入了一些关键概念来解决HTTP/1.1的问题： - 实现无需先入先出的多路复用 - HTTP首部压缩 - 请求优先级 ## http请求是如何升级到http2协议 - 使用upgrade首部，如果可以升级，则返回状态码101 - 使用HTTPS协商。复用HTTPS建立连接的步骤，不会添加额外的消息往返。 ## 浏览器缓存 浏览器会依次检查下面的缓存，最后没有缓存的话就向服务器发出请求。 - 图片缓存（Image Cache）。短期内存中的缓存，可以防止多次下载同一引用的图片。...
## vue-server-renderer插件 `vue-server-renderer`是用来做Vue项目的服务端渲染，Vue的服务端渲染框架Nuxt也是基于`vue-server-renderer`，下面我们来看看这个插件到底做了什么事情。 ## 运行项目 运行[demo](https://github.com/FatDong1/blog/tree/master/vue-demo/vue-server-render)，同时结合[vue-server-renderer源码](https://github.com/vuejs/vue/tree/master/packages/vue-server-renderer)，带着下面的问题去研究一下`vue-server-renderer`。 - VueSSRClientPlugin做了什么事情？ - VueSSRServerPlugin做了什么事情？ - 服务端渲染获取的数据，如何同步到客户端渲染的页面？ ## [VueSSRClientPlugin源码](https://github.com/vuejs/vue/blob/master/packages/vue-server-renderer/client-plugin.js) VueSSRClientPlugin的作用是生成客户端构建清单，清单的名字默认为vue-ssr-client-manifest.json。这个json对象包含webpack整个构建过程的信息，从而能bundle renderer自动推导出在html需要注入的内容，自动推断出最佳的预加载(preload)和预取(prefetch)指令，以及初始渲染所需的代码分割 chunk。。 ```js var VueSSRClientPlugin = function VueSSRClientPlugin (options) { if ( options === void...
## Redux源码解析 Redux源码代码量比较简洁，所以下面直接放源码注释。 > [Redux源码地址](https://github.com/reduxjs/redux) ## createStore方法(ts版) ```TS interface Store< S = any, > { getState(): S, dispatch: Dispatch, subscribe(listener:() => void): Unsubscribe } interface Unsubscribe { (): void }...
## 前言 好奇redux-saga是如何实现副作用的流程的，下面一起来看看源码。 注意：本次阅读redux-saga源码版本是1.1.3 ## 示例demo main.js ```js import * as React from 'react' import ReactDOM from 'react-dom' import { createStore, applyMiddleware } from 'redux' import createSagaMiddleware from 'redux-saga' import...
## 前言 MobX是React的状态管理库，与Redux单向数据流的特点不同，Mobx的特点是响应式数据。 下面一起来看以下Mobx的源码，简单研究一下Mobx是如何收集依赖，实现响应式数据的。 注意：本次阅读Mobx源码的版本是5.15.7 ## 示例demo 为了更好理解和调试MobX源码，示例demo将会简单化。 在demo中将`不会使用任何框架`，单纯使用纯JavaScript和MobX演示。[demo代码地址](https://github.com/FatDong1/blog/tree/master/react-demo/mobx/pure-js-demo) ```html ``` 使用MobX ```js const input = document.getElementById('text-input') const textDisplay = document.getElementById('text-display') const upperCaseDisplay = document.getElementById('text-display-upppercase') const { observable, autorun }...
## 简单业务 - [Unstated](https://github.com/jamiebuilds/unstated)。使用Context API封装，进行状态管理。 ## 复杂业务 - [Redux - 单向数据流](https://github.com/reduxjs/redux)。 - [源码分析](https://github.com/FatDong1/blog/issues/23) - [Mobx - 响应数据流](https://github.com/mobxjs/mobx-react)。 - [源码分析](https://github.com/FatDong1/blog/issues/25) - [RxJS - 基于stream的数据管理](https://github.com/ReactiveX/rxjs)
## 什么是服务器端渲染 (SSR)？ 服务端在返回 html 之前，先把数据填充好，再给客户端，客户端只负责解析 HTML 。 ## 为什么使用服务器端渲染 (SSR)？ ### 与传统 SPA (单页应用程序) 相比，服务器端渲染 (SSR) 的优势主要在于： - 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。 请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax...