本文ppt请笑纳

函数式编程

维基百科对函数式编程的定义：函数式编程（英语：functional programming）或称函数程序设计，是一种编程典范，它将计算机运算视为数学上的函数计算，并且避免使用程序状态以及易变对象。这里的函数指的是数学上的函数，既自变量（数据）的映射。

与命令式编程对比，函数式编程更加强调__程序执行的结果__而非__执行的过程__，倡导利用若干简单的执行单元(小函数)让计算结果不断渐进，逐层推导复杂的运算，而不是设计一个复杂的执行过程。

我的理解是，以纯函数（ 避免使用程序状态以及异变对象）为单元，去抽象、拆分模块功能的编程思想。其实函数式编程我们平时不陌生，比如react, redux 都多多少少有一些相关。

所以我们得出几个函数式编程的要点：

1. 避免使用程序状态以及异变对象，数据映射=> 纯函数
2. 强调执行结果而非过程=> 声明式

纯函数

纯函数：输出结果只由输入决定，并且不产生副作用(effects)。

1. 避免使用 this，window 等外部变量
2. 没有产生副作用(Effects)，既把Effects抽离出来

先看一下效果，原视频是这样的

我们要实现的效果是这样子的，之所以找这个视频是因为…这个视频和背景的对比度比较高做出来比较有辨识度，没有其他的意思 ( *・ω・)✄╰ひ╯

起因

先把视频丢到部门技术群问有没有关键字，给了一个keyword 图片转字符串 于是照着这个思路去gayhub找资源拼乐高！

整体思路

• 第一步我们通过 input[type="file"] 获取文件
• 拿到文件之后，用 URL.createObjectURL来获取视频的路径
• 通过 ctx.drawImage 我们可以把某个 video 当前的图像渲染到 canvas里面
• ctx.getImageData 可以获取当前canvas 里面图片的色值，利用公式计算出灰度
• 根据灰度的深浅去匹配要显示的字符，深色匹配比较密集的字符，最浅的直接用空格代替，然后用 ctx.fillText重绘进去
• 设置 video.currentTime 来获得视频的某一时刻图像，重复上述重绘过程

既然大概的思路已经理清，接下来就是具体的编码，把想法写出来的过程

日常面试小叨

Http小书阅读记录

最近工作不是很忙，也没有再投简历去面试，好像又开始恢复以前的学习热情与节奏。
<– more –>

发了几篇水文~ 看了一个小脚手架的部分源码《create-react-app》，看了一本技术书《css世界》，一本小说《白金数据》。

但是写这篇流水的主要目的是再次意识到自己看问题太过 __局限__。

先交代一下背景：

1. 目前公司的项目是基于 cookie 去判断一些环境，然后指向测试环境或者正式环境
2. 对于 font 字体文件来说，他的请求是没有带上cookie的（chrome的bug，chrome觉得说这个文件不需要带上cookie，safari就会带)
3. 出现的问题是： 如果测试环境有了新的 font 字体，那么因为他没有带上cookie，所以会被指向正式环境服务器去请求资源，但是这个时候正式环境还没有这个 font 字体，所以会报404。 怎么解决？

我给出的方案是:

1. 后端给出一个页面，我们打包后把字体文件丢到正式环境上面
2. 如果不想这么low手动的话， 那就在打包字体的命令行后面自动去提交到正式环境

老大给出的方案是:
直接根据目前的环境分离机制，在nginx配置一下：测试环境下所有静态资源直接指到测试环境

= =简直被吊打，看问题还是很局限 没有跳出前端的圈子…╮(╯▽╰)╭

所以接下来优先补后端的一些基础知识 💪

直入主题。之前做移动端的需求时，经常遇到一种常见，就是:
a页面是一个长列表，我们滑动到某个地方假设为 100px ，点击之后进入到b页面
再从b页面回到a页面，这时候浏览器的滚动条会自动回到我们跳转前的位置，也就是 100px 的位置。

这种体贴的行为我是很喜欢的~ 但是有时候产品就非要抬杠，说 我就不想要这种行为，你给我回到顶部去(╯‵□′)╯︵┻━┻

以前没办法就经常用什么 setTimeout 大法去手动处理这些东西

氮素!!! 如果只是说setTimeout大法的话，就没我什么事了。
今天要说的是 history.scrollRestoration ，这个属性是实验性的属性，他的作用是: 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。

说的很明白了，如果浏览器支持 history.scrollRestoration并且值为auto则会默认恢复滚动行为。如果设置为 manual则可以取消，这个行为不用去考虑兼容性的问题，如果有这个功能才会有恢复滚动，所以直接判断一下就可以了。无需多考虑

1

window.history.scrollRestoration && (window.history.scrollRestoration = 'auto');

以后妈妈再也不用担心我被产品怼了 O(∩_∩)O~~

google-developers 资料
mozilla-developer 资料

探索create-react-app框架的源码及思想（二）