gaoxianglyx / dailynotes Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 1 KB

记录一下刷题的的笔记

dailynotes's Introduction

Hi there, I'm GaoXiang

Now I'm working at HongSong Entrepreneurial team as a web frontend developer.

Blog：link / zhihu：link / bilibili：link /

Languages and Tools:

dailynotes's People

Contributors

Watchers

dailynotes's Issues

我用最低成本在家搭了一套NAS+KODI播放

最近我用划水的时间，在自己家里搭建了一个很简易的Nas个人云盘。
计算了一下必须花销，似乎只用100RMB出头，哈哈，是不是很诱人！

我简单介绍一下搭建的流程，记录一下遇到的坑

NAS可以干啥

Nas是什么，配合kodi又能实现什么呢?

我简单介绍下：

Nas是Network Attached Storage的简写，也就是网络附属存储的意思
简单理解：

一个连接到网络的硬盘（系统）

是不是感觉有点熟悉，这和百度网盘的概念挺像的，你可以理解为一个个人网盘。
不同的是，百度网盘是是存储别家的云存储上，下载的速度受限制，不充会员就给你限速。
而且你存储的东西还会有安全隐患，==说不定你的一个视频就变成了不可看视频==。

所以我们搭建一个自己的云盘，云上的东西都在自己手里，不受厂家管制，也几乎不会有安全隐患。上传下载的速度，就完全取决于自己的带宽。

我100M的电信宽带可以完全跑满速，岂不美滋滋！

这是我的NAS的ui界面，可以看出一些主要而简单的功能：

文件可以上传下载，并且可以分类管理
图片，文档，视频等可以预览（自动生成缩略图）
可以把文件分享给别人下载，别人也可以申请此NAS的账号，来存储自己的东西
支持离线下载

着重说一下离线下载，举例来说：你可以放一个的电影的下载连接，NAS会自动帮你下载到你的存储里面。
再具体到某个场景，上班的时候你划水时突然想到一部想看的电影，于是找到资源的链接，打开你的nas网站，把链接放进去。晚上回家你就可以享受这部电影啦！

那么，用什么播放电影比较爽呢?

答案就在标题里面：KODI

简单介绍一下，KODI自我定义是一个多媒体系统，简单来说：

一个播放器

对于常见的场景，它可以时一个app，被安装在你的电视，电视盒子或者是手机上

这是我拍摄的我家投影出的kodi的界面，简单总结下它的功能：

很强的播放性能，播放的设置很丰富
可以配置自动扫描你的nas目录下的电影
自动电影分类，生成海报等（这海报墙让人看着很舒服）
通过插件可以实现自动匹配字幕，观看电视台直播等功能

所需条件

没想到前面介绍就写了这么多，没时间了，之后再来更新

大致流程

遇到的坑

传统diff算法O(n3)

传统diff算法：
将两颗树的结点一一对比需要O(n2)的复杂度（将树1的每个节点和树2的每个节点对比）。找到最短修改路径（见rebind/diff.js）
每次对比之后，经行要新增或者替换或者删除的操作，是需要O(n)的复杂度，这复杂度整合起来为O(n3)（只是大致的，因为最后操作节点的操作，不是O(n)的复杂的，只是近似的。

待补充（如react 的diff算法）

今天我买了青轴的键盘，明天我会挨打吗？

好纠结啊，试了一圈，还是最喜欢青轴

今天收到了我第一把cheery轴键盘

明天带去公司用，如果明晚我没回来，肯定是被打了。

祝我好运！！

useEffect 笔记

原文：useEffect完整指南

在任意一次渲染中，props和state是始终保持不变的
每次渲染都有它自己所有（包括事件处理函数，effects，定时器或者API调用等等）
effect可以return一个方法，下个effect执行的时候这个方法会执行（这对于清除上次的定时器之类的场景很有效）
尽量把用到的依赖项添加到依赖数组里面去
这个count只会修改一次。可以在把第五行修改为： setCount(c => c + 1); 传入一个函数，这个函数的参数会被传入当前count

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{count}</h1>;
}

如果你的setCount逻辑需要更复杂，建议使用useReducer
当你用hooks，就要抛弃周期那种命令式编程，使用声明式编程

react 数据流管理-笔记

react自上而下，使用props和state来管理数据的形式，当业务变得复杂的时候，会遇到一些问题：

对于跨组件通信，状态同步和状态共享（v16.3的新context可以实现，但是顶级组件的更新会触发所有子组件rerender）
业务逻辑复杂时，都在组件内部维护数据流，都在view层，如何解耦model和view呢？
如何让状态变得可预知，可追溯（为何这是react比vue更适用于大项目的原因）
如何处理异步数据流（异步数据流管理方案）

解决这个问题，使用最多的方案是redux

不支持typeScript
交互频繁时会有卡顿：如果store比较大，频繁修改时会有页面卡顿
无脑的订阅、发布：每次dispatch一个action都会遍历所有的reducer，重新计算connect，这无疑是一种损耗
store里状态残留：多组件共用store里某个状态时要注意初始化清空的问题
繁重的代码模板：修改一个state可能要改动4、5个文件，还是挺麻烦

但是略显负责的流程，给redux带来了对中间件的支持，带来了状态回溯能力（这个很重要），纯函数的输出完全依赖输入

是否应该了解rxjs的响应式编程呢？待补充

MVC

Model：负责更新自己和给view提供数据, 当modle数据变化时通知给他的观察者们。

View：是Modle的观察者，当Modle数据变化时使用它的数据显示自己。View也封装了视图的细节（html/css/dom做操)，通过Dom事件捕获界面上的用户行为，并且通知给他的观察者们。

Controller：是View的观察者，View把需要Controller处理用户行为通知给Controller, Controller 调用modle上的方法更新数据。

其中只有View了解视图的细节， Model和 Controller 对视图无感知。Model和View，Controller 和View 之间通过观察者模式交互。这样做的好处是，可以方便的对Conrtoller 和Model进行测试

MVP

取消了MVC中View和Model的交互，Presenter双向通知。
但是Presenter会比较繁重
MVC主要的业务逻辑在V，MVP主要的业务逻辑在P

MVVM

利用Binder双向数据绑定（VUE类似MVVM）

前端使用很友好

记一次怪异的bug，和debug的思路---测试环境才有的代码请求了线上环境

发现问题

美好的周五下午，QA突然说收到报警邮件，一个接口线上报错，并且持续半小时了，报错的请求的参数来自同一个参数号
咋回事呢？我们马上看看

理清楚背景，这个问题似乎不太可能发生

这个报错类型的接口，通过参数看出来自于渠道A，但是渠道A的前端代码现在只发布了测试环境（难道是请求后端接口时候，环境搞错了）。
并且报错的请求的那个参数，正是我们的开发此项目，留在项目公开备注的参数。（是不是有其他同事在用这个示例参数轮询）

尝试解决问题

首先，我们在开发群里问了下大家，是谁在用备注的参数轮询请求线上接口，快出来，我们保证不打你
群里没人回应，排除这个原因

然后，我们去仔细分析接口报错的原因，发现是因为接口请求没能解析登录信息，导致的报错，并且调用这个接口的逻辑，是一次请求失败，就会开始轮询，直到请求成功。正常情况下用户在app内肯定是已经登录的状态，并且也不会有这个页面的入口。所以我们考虑是不是内部的同事没有登录，打开了这个页面。
我们顺着这个请求，查到trace，查看前端直接请求restful层的请求头，real-ip查到，是个内网ip！
哈哈，基本确定是同事在搞鬼了。
不对同事是打不开这个页面的线上链接的，因为还没有发布线上，如果打开的是测试环境的页面，那怎么会请求到线上环境呢？
哦豁，这个问题看似不太可能发生

接下来，我们继续用netstat命令，想根据ip反查计算机名，没有查到。
那就再接着分析请求头，看到了ua，我去，user-agent居然是axios/0.18.1，啊，怎么会是这个？
我们去看了下项目里面依赖的axios版本，正是0.18.1版本。基本说明正是项目发出的请求，打到了线上，
马上登录到项目测试环境的服务器上一看IP，正是那个内网IP，确认了，就是测试环境的项目，发出来请求到线上，导致了报错。

继续探索，我们看了下请求接口的封装，是调用了公共方法，不可能有环境请求错的问题。
那怎么会请求到线上呢？
于是我们再测试环境，清除登录信息，传入另外一个参数来模拟测试，一查日志，果然，另外一个参数也马上出现在了报错里面，
问题复现了，哈哈哈，我真牛逼！！！
不对，那为什么会从测试环境请求到了线上呀，接口也没有转发，是直接请求的呀，不会吧不会吧！
对了，上面提到了User-Agent，正常请求UA应该是app或者浏览器的UA才对呀，怎么会是axios/版本号呢？

去axios的GitHub里看了下issue，果然发现了，有人提到在node环境，请求失败的User-Agent会变成这个格式！
我去，我们的接口没有过node环境啊，是直接请求的后端的restful层啊，这就tmd离谱！！！

理性分析

结合上面的线索，理性思考，我们的请求有可能从node发出吗？
从node发出的话，有可能去请求线上接口吗？
真相只有一个
去看代码，1s就确认了

得出答案
我们的项目是基于next.js开发的，也就是使用的服务端渲染。
而这个接口的请求，没错，写在了constructor里面，所以会在服务端请求（axios支持服务端请求）。
因为node端拿不到登录信息，所以会报错，请求失败，并且一直请求。
因为node环境在公共的请求接口方法里面判断不了环境，所以默认请求了线上环境。

破案。
PS：next.js的官方文档做得感觉很不好，连生命周期都没有讲清楚。远不如nuxt.js。具体生命周期可以参照这张图

待补充一点体会，和总结

不要在循环或者判断语句中使用hooks

原文：https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e
总结
hooks原理：not magic, just arrays
[data1, setData1] = useState(true)
[data2, setData2] = useState(false) 中
分别用两个数组来存储data和set方法。数组下标一一对应
若是加上判断条件，data1和setData1在某次render中不执行了，这个数组的顺序就会错乱

判断数组的方法

Object.prototype.toString.call()

Object上是有toString方法的

Object.prototype.toString.call('An') // "[object String]"
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call({name: 'An'}) // "[object Object]"

但是Function，Array等，会重写toString方法，导致[].toString() // '[]'
所以使用call来调用Obejct原型上的toString方法，判断是否数组

instanceof

instanceof是查找原型链上是否有某个原型，比如
[] instanceof Array
是查找原型链是否有Array的原型
但是只能用来判断对象类型，而且对象类型的instanceof Object 都true。毕竟都是从Object原型继承来的

Array.isArray()

ES5的方法，老浏览器需要polyfill

ps: 还有个arr.constructor === Array的判断方法，但是constructor可修改，不靠谱

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

内容和标题一样，老营销号了

RN梳理的知识点记录

React Native有以下相关方面值得记录：

CRN对于RN的基础建设以及定制优化---参照1 参照pdf 通用建设
RN通信机制---参照
RN + Webview（h5）的前端架构---参照司机端
业务中RN的使用经验、优化、踩坑---参照笔记参照
one more thing？

浏览器和Node中事件循环的区别

差异体现在nodeV10之前（node11开始和浏览器逻辑保持一致）

关于微任务和宏任务在浏览器的执行顺序是这样的：

执行宏任务
执行完micro-task队列（微任务）

浏览器的task（宏任务）执行顺序在 html#event-loops 里面有讲就不翻译了
常见的 task（宏任务）比如：setTimeout、setInterval、script（整体代码）、 I/O 操作、UI 渲染等。
常见的 micro-task 比如: new Promise().then(回调)、MutationObserver(html5新特性) 等。

微任务和宏任务在直到Node10的执行顺序

执行完一个阶段的所有任务
执行完nextTick队列里面的内容
然后执行完微任务队列的内容

console.log(1);

setTimeout(() => {
    console.log(2)
    new Promise((resolve) => {
        console.log(6);
        resolve(7);
    }).then((num) => {
        console.log(num);
    })
});

setTimeout(() => {
    console.log(3);
       new Promise((resolve) => {
        console.log(9);
        resolve(10);
    }).then((num) => {
        console.log(num);
    })
    setTimeout(()=>{
    	console.log(8);
    })
})

new Promise((resolve) => {
    console.log(4);
    resolve(5)
}).then((num) => {
    console.log(num);
    new Promise((resolve)=>{
    	console.log(11);
    	resolve(12);
    }).then((num)=>{
    	console.log(num);
    })
})

区别与适用场景
总的来说，发布-订阅模式适合更复杂的场景。

在「一对多」的场景下，发布者的某次更新只想通知它的部分订阅者？

在「多对一」或者「多对多」场景下。一个订阅者依赖于多个发布者，某个发布者更新后是否需要通知订阅者？还是等所有发布者都更新完毕再通知订阅者？

这些逻辑都可以放到ChangeManager里。

graphQL笔记

先简单记录一下，后续结合项目总结成为文章

graphQL = graph + query language

定义：一种用于API调用的数据查询语言

一篇文章介绍一下优点和缺点：https://www.jianshu.com/p/12dff5905cf6

在GraphQL中实现用户认证和授权的5种方式：mrdulin/blog#88