人生之志
深感人生之艰难，就像那不息之长河，虽有东去大海之志，却流程缓慢，征程多艰。然，江河水总有入海之时，而人生之志，却常常难以实现，令人抱恨终生shell intro
Shell VS GUI 如今的计算机有着多种多样的交互接口让我们可以进行指令的的输入，从炫酷的图像用户界面（graphical user interface，GUI），语音输入甚至是 AR/VR 都已经无处不在。 这些交互接口可以覆盖 80% 的使用场景，但是它们也从根本上限制了您的操作方式——你不能点击一个不存在的按钮或者是用语音输入一个还没有被录入的指令。 为了充分利用计算机的能力
React Hooks 原理及实现
React Hooks 主要用来解决两个问题， - 组件之间复用逻辑 社区中普遍采用的 [High-Order-Components](https://reactjs.org/docs/higher-order-components.html)和[render props](https://reactjs.org/docs/render-props.html),然而这两种方案分别会带来 “
npm package依赖管理
前言 提起 npm，大家第一个想到的应该就是 `npm install` 了，但是 `npm install` 之后生成的 `node_modules` 大家有观察过吗？`package-lock.json` 文件的作用大家知道吗？除了 `dependencies` 和 `devDependencies`，其他的依赖有什么作用呢？接下来，本文将针对 npm 中的你可能忽略的细节和大家分享
Koa实现原理分析
koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 `generator`，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。 特点 - 轻量、无捆绑 - 中间件架构
被讨厌的勇气
人生是一连串的刹那 哲人：明白了。你所说的远大目标就好比登山时以山顶为目标。 青年：是的，就是这样。人人都会以山顶为目标吧！
自然变换 - Natural Transformation
自然变换 所谓自然变换也也就是变化包裹值的容器盒子：`F(x) => G(x)`,举个简单的例子，把Either转换为Task: ``` js const eitherToTask = e => e.fold(Task.rejected, Task.of) const res = eitherToTask(Right('hello')) .fork(err => { c
遍历与队列 - Traversable
Array insideOut 假如我们现在有一个数字的数组，我们要把这些数字转换为对应的26个英文字母，但是这个转换肯能会失败，因为并不是所有的数字都是可以转换的，所以这种情况下我们可以使用Either来处理转换成功和转换失败： ``` js const toChar = n => n < 0 || n > 25 ? Left(n + ' is out of bounds!')
加法是自然之道 - Monoid
积木游戏 > 说出来你可能不信，我只花了十分钟的时间就教会三岁的小孩什么是半群,ahhhhh.jpg 周末在家陪小侄女玩了一个小时的积木，在不断叠加积木的过程中，突然想到用搭积木的案例来描述什么是`半群`异常的清晰,看下面三个积木： ![红黄蓝积木]() 看到这三个积木，(~~是不是有一种把他们叠在一起的冲动~~)，按照常规操作，有一部分人可能会总左向右开始叠加，也就是先把最左边
俄罗斯套娃娃 - Monad
前面两篇分别介绍了 [Functor](https://musicfe.dev/javascript-functional-programming-advance/) 和 [Applicative](https://musicfe.dev/javascript-functional-programming-functor/) 的概念和实际应用，并列举了几个具体的例子，说明了 Functor 和
纪念刘和珍君
中华民国十五年三月二十五日，就是国立北京女子师范大学为十八日在段祺瑞执政府前遇害的刘和珍杨德群两君开追悼会的那一天，我独在礼堂外徘徊...
应用函子 - Applicative
[上一章](https://sylvenas.github.io/blog/2019/09/10/%E9%BB%91%E7%8F%8D%E7%8F%A0%E5%8F%B7%E7%9A%84%E8%AF%85%E5%92%92.html)中介绍了 `Functor(函子)` 的概念，简单来说，就是把一个 “value” 填装进 “Box” 中，继而可以使用 `map` 方法映射变换 Box 中的值
动物庄园
几年过去了。寒来暑往，时光流逝，寿命不长的动物一生更如白驹过隙。已经到了没有谁还记得造反前是怎么回事的那样一个时代，除了紫苜蓿、本杰明、乌鸦摩西和几口猪...
薛定谔的 Maybe - IO
副作用 程序的可观察，而不是操作了一番然后睡觉去了 上篇文章中引入范畴学中`Functor`的概念，核心内容就是把一个值放入到一个`Box`中，然后不停的通过`map`函数来映射变换其中的值，而这就是一个最简单的`Identity Functor`,但是管他呢，我们还是叫它Box吧(多么简单形象)！ 然后还举了个Either的例子，来说明Box理念在代码中实际用途，接下来介绍另外两个
Abort-Controller
应用场景 现在前端主流的技术方案都是[服务端渲染](https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/)，那就面临着一个问题，Node.js需要承担接口转发的任务，所以原来
Catch React Error
catch-react-error English | [简体中文](./doc/catch-react-error.md) [Why we create catch-react-error](./doc/catch-react-error_EN.md) Introduction This project make it easy to protect your react
Node.js 集群
基本用法 Node.js默认单进程运行，对于32位系统最高可使用`512MB`内存，对于64位最高可以使用1GB内存。对于多核CPU的计算机来说，这样做效率很低，因为只有一个核在运行，其他核都在闲置。`cluster`模块就是为了解决这个问题而提出的。 `cluster`模块允许设立一个主进程和若干个worker进程，由主进程监控和协调worker进程的运行。worker之间采用进程间通
babel plugin
babel 简介 一句话阐述什么是 babel: babel 是一个主要用于将 ES2015+版本的代码编译成向下兼容(比如 ES5/ES3)js 版本的编译器。 ```js // Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1); // Babel Output: ES5 equivalent [1, 2, 3
黑珍珠号的诅咒 - Functor
函数式编程（Functional Programming）这一理念不论是在前端领域还是后端领域，都逐渐热门起来，现在不大量使用函数式编程技术的大型应用程序已经很罕见了，比如前端流行的 React（核心思路数据即视图），Vue3.0 的 Composition API ，Redux ，Lodash 等等前端框架和库，无不充斥着函数式的思维，实际上函数式编程绝不是最近几年才被创造的编程范式，而是在计
NGINX 基础知识
Nginx 是一个遵循主从架构的 Web 服务器，可以用作反向代理、负载均衡器、邮件代理和 HTTP 缓存。 哇！复杂的术语和混乱的定义，里面充斥着大量令人困惑的词语，对吧？不用担心，这篇文章可以帮大家先了解 Nginx 的基本架构和术语，然后我们将安装并创建 Nginx 配置。 Nginx 是一个神奇的 Web 服务器。 简单来说，Web 服务器就像个中间人。比如你想访问 dev.to，输
Node.js与网络
套接字和流 套接字指的是一个通讯终端，而网络套接字指的是在不同的计算机上运行的两个应用程序之间进行通讯所使用的终端。在套接字之间流通的数据就是我们所熟知的流。流中的数据可以以二进制的形式在Buffer中传输，也可以作为Unicode字符串来传递。两种数据类型都被称为`封包(数据被切割为长度相似的块)`来传输。有一种特殊的数据封包，即`尾包`(FIN)。被作为数据传输结束的信号发送给套接字。
移动端适配方案rem & vh、vw
rem布局 lib-flexible 假设设计MM给我们的设计稿尺寸为`750 x 1340`，那么我们前端拿到设计稿之后要如何动手开始开发呢？经过上面的介绍了移动端开发的基本概念之后，应该有了一些基本的思路，我们可以使用js动态计算rem的方案来实现。 rem是根据html节点的font-size来做计算的 举个例子：假如html元素的font-size为 `Npx`,
移动端开发基础知识
移动端开发基础知识,移动端常见的单位,DPR,PPI等概念的定义以及viewport等概念
[译+改] React Fiber reconciliation algorithm
[原文链接](https://indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react) From React Elements to Fiber nodes 从一个最简单 React 组件树开始，一个按钮，一个展示点击按钮数字 + 1 ```
[译+改] React Fiber 中为何以及如何使用链表遍历组件树
[原文链接](https://indepth.dev/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-to-walk-the-components-tree) 前置知识 Fiber 架构有两个主要的渲染阶段: - reconciliation/render - commit 在源码中 reconciliation 阶段也被
How JavaScript Work: 内存管理/垃圾收集/内存泄漏
JavaScript 是如何工作的：内存管理 + 处理常见的 4 种内存泄漏 我们将讨论另外一个越来越被开发人员忽视的主题，原因是应用于日常基础内存管理的程序语言越来越成熟和复杂。我们也将会在 [SessionStack](https://www.sessionstack.com/?utm_source=medium&utm_medium=blog&utm_content=Post-3-
前端资源加载优先级
浏览器里并不是每一个资源加载都很重要。 为了达到重要的资源先加载，浏览器有试探法，尝试对资源进行权重分配，例如CSS会在脚本和图片之前先加载。 因为浏览器在试探权重分配，所以并不总是分配的很正确，通常因为没有足够的信息，浏览器可能做出错误的决定。 下面介绍如何在现代浏览器中以代码的形式来调整资源加载的优先级。 默认优先级 如前所述，浏览器根据它们的重要程度为不同类型的资源分配不同
TCP 重传、滑动窗口、流量控制、拥塞控制
相信大家都知道TCP是一个可靠传输的协议，那它是如何保证可靠的呢？ 为了实现可靠性传输，需要考虑很多事情，例如数据的破坏、丢包、重复以及分片顺序混乱等问题。如不能解决这些问题，也就无从谈起可靠传输。 那么，TCP是通过序列号、确认应答、重发控制、连接管理以及窗口控制等机制实现可靠性传输的。 今天，将重点介绍TCP的重传机制、滑动窗口、流量控制、拥塞控制。
FP18：Semigroup
所谓`Semigroup`(半群)，其实就是含有concat方法的数据类型，典型的如字符串和数组...
FP17：Transform Naturally
我想要提出一个关于嵌套的问题。但不是那种马上会唤起老母亲整理打扫天性的那种问题，而是我们马上会在之后的章节中遇到的问题...
How JavaScript Work: 引擎、运行时、调用栈概述
- [JavaScript 如何工作系列: 引擎、运行时、调用栈概述](https://juejin.im/post/5c090bd9e51d45242973cad2) - [JavaScript 如何工作：在 V8 引擎里 5 个优化代码的技巧](https://juejin.im/post/5a102e656fb9a044fd1158c6) - [JavaScript 工作原理
FP16：Applicative Functor
Applicative Functor 应用 applicative functor 考虑到其函数式的出身，applicative functor 这个名称堪称简单明了。函数式程序员最为人诟病的一点就是，总喜欢搞一些稀奇古怪的命名，比如 `mappend` 或者 `liftA4`。诚然，此类名称出现在数学实验室是再自然不过的，但是放在其他任何语境下，这些概念就都像是扮作
Node.js 与多核CPU
Node.js是基于Chrome浏览器的V8引擎构建的，也就说明它的模型与浏览器是类似的。我们的JavaScript会运行在单个进程的单个线程上。这样有一个好处： - 状态单一 - 没有锁 - 不需要线程间同步 - 减少系统上下文的切换 - 有效提高单核CPU的使用率 但是`V8引擎`的单进程单线程并不是完美的结构，现如今CPU基本上都是多核的。真正的服务器往往有好几个CPU（像我们的线上物理
css in react
在传统的大型css代码库中存在一下几个问题： 全局命名空间 - css中的所有的选择器都是全局的。无论怎样使用命名空间或者BEM命名法组织css代码，最终都会污染全局命名空间，从长远来看，代码的可维护性会越来越差 依赖 - 现在往往使用css预处理器将css代码分割成子模块，但最终为浏览器生成的还是一个很大的全局css文件，很难清晰的声明某个特定组件依赖某段特定的css代码，并且这段代码要
react component using function as children
React社区对`函数子组件`的模式达成了共识，这个模式的主要概念是，不按组件的形式传递子组件，而是定义一个可以从父组件接收参数的函数。 这种模式本质上来说和[`high order component`]()的目的是一样的，都是为了抽取公共逻辑，不过实现的方式却大不相同，几乎所有的用高阶组件实现的效果，使用`函数子组件`的模式也能实现。 >这个模式初次看上去比较怪异，甚至有点违背re
FP15：Monad-2
> “A monad is just a monoid in the category of endofunctors. What’s the problem?” Monad是非常简单的，但是它的概念却有点让人云里雾里，尤其是网上查询资料博客的时候，一般会从范畴论开始讲解，这是正确的道路，不过可惜的是大部分的JavaScript开发人员，并不懂范畴论，范畴不仅仅是一种数学语言，也是一种哲学观点
react jsx
当你在查看React的例子时候，可能已经见过JSX了。但React代码也可以用纯JS代码来编写： ``` js const rootElement = React.createElement('div', {}, React.createElement('h1', {style: {color: 'red'}}, 'The world is yours'), React.cre
FP14：Monad-1
pointed functor 在继续后面的内容之前，我得向你坦白一件事：关于我们先前创建的容器类型上的 of 方法，我并没有说出它的全部实情。真实情况是，of 方法不是用来避免使用 new 关键字的，而是用来把值放到默认最小化上下文（default minimal context）中的。是的，of 没有真正地取代构造器——它是一个我们称之为 pointed 的重要接口的一部分。 >p
'类'模式
面向对象编程强调的是数据和操作数据的行为本质上是相互关联的(当然，不同的数据有不同的行为)，因此好的设计就是把数据以及和它相关的行为打包(封装)起来，这在正是的计算机科学中有时候被称为数据结构...
代理模式
多年以来，JavaScript中有一种奇怪的行为一直在被无耻地滥用，那就是`模仿类`。我们会仔细分析这种方法...
FP13：IO - keep code pure
Old McDonald Had Effects... 在关于纯函数的的那一章（即第 3 章）里，有一个很奇怪的例子。这个例子中的函数会产生副作用，但是我们通过把它包裹在另一个函数里的方式把它变得看起来像一个纯函数。这里还有一个类似的例子： ``` js // getFromStorage :: String -> (_ -> String) var getFromStorage = f
FP12：Either:Left or Right
Left or Right ?  说出来可能会让你震惊，`try/catch` 并不十分“纯”。当一个错误抛出的时候，我们没有收到返回值，反而是得到了一个警告！抛错的函数吐出一大堆的 0 和 1 作为盾和矛来攻击我们，简直就像是在反击输入值的入侵而进行的一场电子大作战。有了`Either`这个新朋友，我
FP11：Schrödinger's Maybe
Schrödinger's Maybe  说实话上一章讲解的`Box` functor挺无聊的，通常我们称它为`Identity`，与`id`函数的作用相同（这里也是有数学上的联系的，我们会在适当时候加以说明）。除此之外，还有另外一种 functor，那就是实现了 map 函数的类似容器的数据类型，这种 f
FP10：Functor
The Mighty Box  我们已经知道如何书写函数式的程序了，即通过管道把数据在一系列纯函数间传递的程序。我们也知道了，这些程序就是声明式的行为规范。但是，控制流（control flow）、异常处理（error handling）、异步操作（asynchronous actions）和状态（sta
Node.js错误捕获与处理
> 本篇文章为摘抄，原作者：王子亭，原文地址：[Node.js 错误处理实践](https://jysperm.me/2016/10/nodejs-error-handling/) 今天我想介绍的是 Node.js 开发中一个很小，但又很重要的话题 —— 错误处理。作为一名软件工程师，我想我们应该都会认可「错误是无法避免的」，因此我们必须积极地去对待这些错误，才能写出健壮的代码。 首先，我想
webpack svg placeholder loader
使用webpack loader生成svg placeholder，并在项目的实践
webpack webp loader
使用webpack loader动态的生成webp图片
What is 'this' in JavaScript
JavaScript里有个太常见的`this`关键字，不过却有很多的开发人员弄不懂`this`关键字在不同的环境中的指向，也弄不清楚应该怎样使用这个关键字。 当你彻底理解了`闭包`和`this`的时候，你也就弄明白了JavaScript的核心精髓了。 在理解this的绑定之前，首先要理解调用位置：调用位置就是函数在代码中的调用位置(此处绝不是说函数的声明位置)，这个过程中最重要是分析函数的调用
react 性能优化：arrow function in react
在react中最常见的一个操作就是把一个数组的数据map成一个react组件的数组，然后其中的每一个组件都要绑定事件，看一下下面的这个例子： ``` js import React from "react"; import { render } from "react-dom"; class User extends React.PureComponent { render() {
FP9：Hindley-Milner
初识类型 刚接触函数式编程的人很容易深陷类型签名(type signatures)的泥淖。类型(type)是让所有不同背景的人都能高效沟通的元语言。很大程度上，类型签名是以 “Hindley-Milner” 系统写就的，本章我们将一起探究下这个系统。 类型签名在写纯函数时所起的作用非常大，大到英语都不能望其项背。这些签名轻轻诉说着函数最不可告人的秘密。短短一行，就能暴露函数的行为和目的。
react 条件渲染
在react中通常我们需要根据各种不同的条件来渲染数据，例如最为常见的根据loading状态渲染loading动画组件还是渲染数据； 在项目中遇到的太多次上面的场景，故总结如下： 三元运算符 在JSX中，你可以使用`三元运算符`去处理条件渲染: ``` js class Todo extends Component { constructor() { supe
higher-order component(HOC)
在函数式编程中，有一个概念叫做[高阶函数](),高阶函数通常意义上来说会对传入的函数进行增强，返回一个添加了额外功能的新函数。 当高阶函数的概念应用到React组件上的时候，被称为高阶组件，首先来看一下高阶组件长什么样子： ``` js const hoc = InnerComponent => EnhancedComponent ``` 高阶组件其实就是一个函数，它接收组件作为参数，对组件进行
webpack loader
webpack loader实现的基本原理
arrow function this
ES6中值得称赞的特性之一就是提供函数表达式缩写定义的箭头函数语法。你很难发现关于ES6（或者甚至甚少与其相关的）的一篇文章、会议演讲或者书都没有首要介绍`=>`是新的`function`。 其中有一点是最让人困惑的，就是箭头函数内的`this`到底指向哪里？举个例子来说： ``` js function foo() { setTimeout(() => { console.
白夜行
又过了半年，她遇见了秋吉雄一。抵达大阪时已是傍晚。在酒店办好住房手续，秋吉便为典子介绍大阪这座城市。虽然她表示想同行时他曾面露难色，但今天不知为何，他对她很温柔...
web image 加载优化方案-responsive-image
所谓响应式的图片，就是让我们在不同的平台，不同的设备上使用的图片都不一样，设计师切图给我们的时候，一般都会把给我 1x,2x,3x,4x 的图片，有的时候，那么这几张图片我们该怎么使用呢？ 这个时候就会有 HTML5 的 img,[srcset](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img)属性出场的时候到了，sr
web image 加载优化方案-placeholder
大概的 placeholder 的技术方案基本思路都是先加载一个很小的模糊但是能基本展示图片的轮廓和色调的图片作为占位符，然后再加载真正要展示的图像，大的图像加载完成之后，使用一个渐变的效果隐藏小的图片，展示真正的图片。 placeholder 也分为很多类型，常见的有： <div style="text-align:center;margin-top:20px" align="center
web image 加载优化方案-lazy-load
Lazy loading 几乎所有的懒加载都是通过 JavaScript 来实现的 Scroll Listeners and relayout 我们一般会通过监听元素的`scroll`事件，来检查图像的占位符是否位于当前可是区域内，如果是，则开始加载，这是目前我们大多数人采用的思路，但是`scroll`事件可能会对页面性能产生负面影响，在滚动期间，浏览器会多次触发`scr
web image 加载优化方案-webp
what is webp webp 是由 Google 收购 On2 Technologies 后发展出来的格式，以 BSD 授权条款发布。目前已经在不同厂商之间进行了尝试，如 Google、Facebook、ebay、百度、腾讯、淘宝等。 webp 支持有损压缩和无损压缩，可以使用于大多数的图片、半透明、透明都可以；并且有损压缩的程度是可以调节的，用户可以在文件大小和图像质量之间作
web image 加载优化方案
优化方案 根据统计，用户打开网站，最满意的时间是1-2秒，如果超出了1-2秒，用户就会感觉卡顿，如果超过10秒以上，98%的用户会选择直接关闭这个网站，任何大于两秒的下载时间都将会使你的用户失去耐心，而现在网站中大部分的需要下载的资源都是`image`，那么优化`image`的加载速度就是重点部分， 错误格式的图片，或者是没有压缩的图片，还有就是图片太大的时候这些情况会极大地影响你的页面
前端代码规范
前端代码规范 代码格式化 Prettier [Prettier](https://github.com/prettier/prettier) 支持多种语言，它的一大特点就是能够支持命令行、API 等多种形式调用，可以让团队保持代码风格一致。包括 React 在内的很多项目已经开始使用了。 Prettier支持列表如下： JavaScript,TypeScript,E
单例模式
单例模式又被称为单体模式，在面向对象思想中，单例就是保证一个类只有一个实例，实现的方法一般是在类的内部提供一个`getInstance`方法用来创建实例...
Parcel简介
Parcel是web应用打包工具，主要特点是无须任何配置和速度极快
工厂模式
Simple Factory Pattern Intro 简单工厂模式的定义为定义一个工厂类，它可以根据参数的不同返回不同类的实例；简单工厂模式不属于GOF 23个经典设计模式之一，它的设计思想很简单，其基本流程如下： 将需要创建的各种不同类型的对象的相关代码封装到不同的类中，这些类称为具体产品类。 提供一个工厂方法用来创建产品，该方法可以根据所传入的参数不同创建不同的具体产品对
原型模式
什么是原型链 发现很多文章都是先讲`prototype`,这里我们换个思路来介绍，我们先讲`__proto__`。JS中每个对象(除了null和undefined)都有一个私有的只读属性`__proto__`。 当我们调用一个对象(obj)的某个方法或者属性(fn)的时候，首先会在该对象本身去查找是否具有这个属性(`obj.fn`)，如果找到，则直接返回； 如果没有找到则去查找`obj
构造函数模式
构造函数 在JavaScript中，构造函数通常是用开创建实例的，JavaScript中没有类的概念，但是有特殊的构造函数，可以通过`new`关键字来调用构造函数，约定成俗的构造函数的首字母大写。 example ``` js function Dog(name, type) { this.name = name; this.type = type; this.sound
发布订阅模式
发布订阅模式的概念 发布订阅模式Pub/Sub,它的主要概念为`定义一对多的关系，当一件事发布时会同时通知所有的订阅者`，在JavaScript和Jquery非常容易看到该模式的使用，例如Jquery里的`on`,下面的代码就可以想象成，`$('.someThing')`为订阅者，订阅了click,如果click事件发生了。发布者就会执行`doSomething`方法。 ``` j
JavaScript设计模式简介
JavaScript 设计模式简介
http cache
浏览器缓存知识详解
FP8：Recursion
> “古之欲明明德于天下者，先治其国；欲治其国者，先齐其家；欲齐其家者，先修其身；欲修其身者，先正其心；欲正其心者，先诚其意；欲诚其意者，先致其知，致知在格物。物格而后知至，知至而后意诚，意诚而后心正，心正而后身修，身修而后家齐，家齐而后国治，国治而后天下平。” --《礼记·大学》 递归不是一个容易掌握的概念。递归的思考需要考虑递归自身以及自身的一个修改版本。例如：想象将树枝组合成一棵树，
FP7：What is Function Composition?
函数组合就是组合两到多个函数来生成一个新函数的过程。将函数组合在一起，就像将一连串管道扣合在一起，让数据流过一样。
FP6：Partial Application And Curry
我们可以在一定程度上认为函数求值的过程，也可以认为就是函数消元的过程，当所有的元都被消完之后，那么就可以求的函数值。
FP5：What is a Closure?
要讲`闭包`,就必须先理解JavaScript中的[词法环境]()的概念；词法环境简单来说就是包括环境记录()和对外部词法环境的引用。 环境记录初始化 一段JS代码执行之前，会对环境记录进行初始化（声明提前），即将函数的形参、函数声明和变量先放入函数的环境记录中，特别需要注意的是： 形参会在初始化的时候定义值，但是函数内部定义的变量只声明不不赋值； 以下面这段代码为例，解析环境记录初
FP4：Pure function
在我们认识纯函数之前，我们来仔细审视一下函数的概念，或许从另外一种角度来观察函数，可以让我么更加容易的理解函数式编程的理念。 What is a Function? 函数是一组执行任务和计算值的过程，一个函数由称为函数体的一系列语句组成，函数包括函数的的输入参数(`arguments`),计算得出的输出结果(`return value`);函数可以有以下用途： Mappin
FP3：Functional Programming
What is Functional Programming? 函数式编程已经成为JavaScript领域里的一个非常热门的话题。几年以前，很少有JavaScript程序猿知道函数式编程是什么，但是在过去的三年里我所见过的每个大型应用程序代码都大量使用了函数式编程的思想。 函数式编程一种编程范式，我们常见的编程范式有命令式编程(`Imperative programming`)，函
山月记
因为害怕自己并非明珠而不敢刻苦琢磨，又因为有几分相信自己是明珠，而不能与瓦砾碌碌为伍，遂逐渐远离世间，疏避人群，结果在内心不断地用愤懑和羞怒饲育着自己懦弱的自尊心
Rxjs Observable
pull versus push 拉取 和 推送 是数据生产者和数据消费者之间进行通信的两种不同的机制。 What is pull?在拉取体系中，总是由数据的消费者决定何时何地从生产者那里获取数据。生产者对数据何时何地传递给消费者毫不知情，只是在被动的生产数据（数据是由消费者主动拉取的，数据生产者因为消费者的拉取数据而被动的生产数据）。 每一个`Java
Rxjs Observer
Observer what is Observer? Observer(观察者)是 Observable(可观察对象)推送的数据的消费者。在 Rxjs 中，Observer 是由回调组成的对象，对象的键名分别为：`next`、`error`和`complete`，以此接受 Observable 推送的不同类型的通知，下面的代码是 Observer 的一个简单示例：
Rxjs intro
在介绍Rxjs之前，先通过一个简单的输入框示例的演化来了解一下Rxjs的核心思想。  这是input输入框的示例非常简单，就是在input输入的时候，实时更新下面的文字，程序的逻辑看起来是这样的：  从上面的实例中我们可
setState Might Be Synchronous
之前一直知道React中`setState`是一个异步的操作，如果我们再一个函数内有两个`setState`,那么他们会合并，只执行最后一个`setState`,例如： ``` js handleClick = () => { console.log(this.state.count); // assume it is 0 this.setState({ count: this.
pub & sub
发布订阅模式Pub/Sub,它的主要概念为`定义一对多的关系，当一件事发布时会同时通知所有的订阅者`，在JavaScript和Jquery非常容易看到该模式的使用，例如Jquery里的`on`,下面的代码就可以想象成，`$('.someThing')`为订阅者，订阅了click,如果click事件发生了。发布者就会执行`doSomething`方法。 ``` javascript $('.Som
lexical environment
尽管通常认为JavaScript是一门“动态”或者“解释执行”的语言，但是事实上JavaScript是一门“编译”语言。而在传统的编译语言的流程中，编译主要分为一下三个步骤： 词法分析 - 这个过程会将由字符组成的字符串分解成有意义的代码块，这些代码块被称为词法单元。例如：`var a = 2`。这段程序通常会被分解成下面这些词法单元：`var`,`a`,`=`,`2`。 语法分析 — 这
React Bind
在应用react开发中，大家经常遇到各种this的问题，其中最常见的情况，也是很多新手容易些的代码([在线地址](https://stackblitz.com/edit/react-lczb2u?embed=1&file=index.js))是： ``` javascript class App extends React.Component { constructor() {
SPA 实现原理
基础概念 单页面应用的核心是在不刷新当前页面的情况下，来实现页面URL和页面内容的变化，那么我们需要关注的要点也就在于怎么修改URL和页面的内容 浏览器history HTML5引入了`history.pushState()`和`history.replaceState()`方法，它们分别可以添加和修改历史记录条目。这些方法通常与`window.onpopstate`配合使用。
FP2：Why Learn FP in JavaScript?
请忘掉你认为你知道的有关JavaScript的任何东西，以初学者的心态来接触这份资料。为帮助你这样做，我们打算从头开始复习JavaScript的基础知识，就像你以前从来没有看到过JavaScript一样。如果你是已经熟悉JavaScript或者纯函数式语言的老手，也许你会认为用JavaScript来探究函数式编程就是个笑话。请把你的这些想法放一边，尝试用新的心态来接触这份博客。你可能会发现这是
FP1：Composing software introduction
在我高中第一节程序设计课上，我被告知软件开发是"将复杂问题转化为较小问题，并组合简单的解决方案并形成完整的解决方案以解决复杂的问题的行为"。
FP0：Rise and fall of functional programming
我16岁的时候，花了很多时间与最好的哥们一起玩电脑游戏。他家里有一个满是电脑的房间。它们对于我来说是无法抵御的、神奇的。我花了很多时间探索所有游戏。有一天我问我哥们，“我们做一个游戏怎么样？”。 他也不知道怎么做，所以我们就问他老爸。他老爸爬上一个高架子，拿出一本用 Basic 编写的游戏书。于是我们就开始了编程之旅。等到公立学校开始教代数时，我已经对代数掌握的不错了，因为编程基本上都是
React Pass Params
在react中经常会遇到onClick,onChange 等事件的传参问题，现在简单把react event中传递参数的方法，进行简单总结,举例如下： 1.bind ``` javascript const names = ['zhao', 'qian', 'sun', 'li']; class App extends Component { showName(name, eve
HTTPS与网络安全
> 本篇文章为摘抄，原作者：接水怪，原文地址：[https://mp.weixin.qq.com/s/uUGy94fp3x8khCTR0gZeJA](https://mp.weixin.qq.com/s/uUGy94fp3x8khCTR0gZeJA) 本篇文章将带你深入 HTTPS 加解密原理，希望看完能够有这些收获： - 明白 HTTPS 到底解决了什么问题 - 理解对称加密与非对称加密
http协议简介
工作了这么长的时间，每天都在写大量的业务代码，对有些基础知识有所忘却，尤其是http协议部分，读书的时候就学了理论知识，却没有自己去验证过，到现在连理论部分都有所忘却了，现在重新捡起书本和拿起工作已经掌握的技能从新认识一下http协议。 网络基础 TCP/IP分层 TCP/IP体系一般分为五层，从上到下分别为应用层、传输层、网络层、数据链路层、物理层，不过按照协议来划分的话，物
async & await
关于异步的实现，上面的一节中的需求：有接口1，接口2，接口3，要求按照顺序输出接口1，接口2，接口3的返回值 如果用async函数来实现，可以这样写： ``` js async function getData() { await loadData1() await loadData2() await loadData3() } getData() ``` `async`就像是Gene
操作系统与进程/线程
线程与进程可以说是老生常谈的话题了 只要是懂事计算机相关的小伙伴，提起这个大都思如泉涌，多线程，多进程，高并发等等各种零碎的概念和认知或许难以汇成一个成体系的知识结构，我们先来罗列一下这两个概念简介的官方解释。 - 进程(process): 处于执行期的代码，正在运行的程序，它不仅包括代码，还有数据、资源、状态和虚拟的计算机 - 线程(thread): 一个程序里的一个执行路线就叫做线程。更
Generator
说起javascript异步，我想你一定会想起ES7的`async`，甚至要排在Promise之前，从今天起我们来聊一聊async 要说async，就不得不提Generator生成器（好多知识都是一环扣一环，很是无奈），async就是Generator的语法糖 Generator Generator写法很像一个函数，但是区别于普通函数，一个例子： ``` js function
React Magic
react-magic [](https://www.npmjs.com/package/react-magic) <a href="https://github.com/facebook/react"><img src="https://img.shields.io/b
Promise API
可以这么说，resolve和reject撑起了Promise的半边天，我们平时用的最多的就是这两个API resolve和reject 我们知道Promise是一个构造函数，用来实例化一个Promise实例， 这个Promise构造函数，用一个函数来作为参数,这个作为参数的函数又有两个参数,当然这两个参数都不是必填项: 第一个参数是`resolve` 第二个参数是`reject
Promise
callback的缺点 我们说处理javascript异步最常用的方式就是通过回调函数，对于回调函数我们昨天对此做了介绍 简单快速， 我们一般使用嵌套回调或者链式回调，会产生以下问题 当采用嵌套回调时，会导致层级太多，不利于维护 所以我们又采用了链式回调，对嵌套回调进行拆分，拆分后的函数间耦合度很高， 如果需要传递参数，函数之间的关联性会更高，而且要对参数进行校验以提高代码
React setState
Component state is a way of holding, processing and using information that is internal to a given Component and allows you to implement its logic. State is usually a POJO (Plain Old Java[Script] Objec
How JavaScript Work: Event Loop
Event Loop 单线程 我们常说“JavaScript是单线程的”。 所谓单线程，是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。 但是实际上还存在其他的线程。例如：处理AJAX请求的线程、处理DOM事件的线程、定时器线程、读写文件的线程(例如在Node.js中)等等。这些线程可能存在于JS引擎之内，也可能存
web攻击与防范
针对Web的攻击技术 简单的HTTP协议本身并不存在安全性问题，因此协议本身几乎不会成为攻击对象。而应用HTTP协议的服务器和客户端，以及运行在服务器上的Web应用等才是攻击的目标。 HTTP本身不具备必要的安全功能 从整体上看HTTP就是一个通用的单纯协议机制，它并不具备会话(session)安全，加密处理等安全性方面的功能，开发者需要自行设计并开发认证及会话管理
BFC 块级格式化上下文
在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个Box的类型。 不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内
Node.js核心概念讲解
Node.js架构 相信只要你是一名前端，或多或少都能说出一些你对 Node.js 的理解与看法。 我们先来看看浏览器与Node的一个对比，毕竟很多前端初学者可能还没有接触过Node，只是在浏览器里面跑项目。 ![Node.js VS Chrome](https://p1.music.126.net/EEohndwWlmawXTRv6As9Ww==/109951164833954299
facebook placeholder
偶然间看到facebook的网页版和手机版在网速比较慢的时候，都会有一个`loading`的过程，但是这个loading,完全不同于一般的一个小圈圈在页面上转，而是如下的一个`占位`+`动画`： <div style="text-align:center;margin-top:20px" align="center"> <img style="height:200px;" src="../..
how browser work
关于浏览器的工作原理，一直存有好奇却又无从下手的状态，最近看到了一篇绝对棒的文章（[原文链接](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork)），具体讲解了主流浏览器的工作原理，部分摘抄如下： 简介 网络浏览器很可能是使用最广的软件。在这篇入门文章中，我将会介绍它们的幕后工作原理。我们会了解到，从您在
What really happens when you navigate to a url?
作为一个软件开发者，你一定会对网络应用如何工作有一个完整的层次化的认知，同样这里也包括这些应用所用到的技术：像浏览器，HTTP，HTML，网络服务器，需求处理等等。 本文将更深入的研究当你输入一个网址的时候，后台到底发生了一件件什么样的事～ 1. 首先嘛，你得在浏览器里输入要网址 例如:`https://facebook.com/` 2. 浏览器查找域名的IP地址 导航的第一
Argument vs Parameter
Argument vs Parameter 在试用函数的时候常常遇到这两个名词，翻译上有很多种，常见的有`形参`和`实参`却让挺多的人容易混淆，为了以后的清晰明了，做个总结😄。 引用[stack overflow](https://stackoverflow.com/questions/1788923/parameter-vs-argument/17889261788926)上的回答
negative margin
作为前端开发人员，我们都在使用margin,不过在使用负margin的时候，有时候会变得非常的头疼，有些人认为负margin是常规武器，有些人确认为负margin是魔鬼的代名词。 常见的negative margin如下： ``` css .content{ margin-left:-100px; } ``` 关于negative margin必须有一下几个要点需要澄清： neg
How To Keep Your Footer At The Bottom Of The Page With CSS
如何将`footer`固定在底部是一个非常经典的问题，这个问题 乍看起来非常简单，但是实际上相当棘手，在所有的"隐蔽大坑"的难题中，简直就是教科书一般的存在。 而我们想要达成的效果是： 1、当页面内容尚未充满的时候，页脚固定在底部。 2、页面填充满后，页脚随页面内容的增加而填充在主体内容的下方。 几乎所有的经典的解决方案都是给页脚设置固定的高度，然后按照某些特定的结构来写，可以
常用小工具代码集合
常用小工具代码集合
傲慢与偏见
接到这封信请不要害怕，担心我重提旧话，将我对你的一片痴情告诉你，再度求婚，像昨夜一样，惹得你厌恶。我写此信无意再谈什么心愿，叫你不痛快，也贬低我自己的身价...
Ajax call when session time out
1.问题重新 通过ajax请求后端数据的时候，如果后端返回的状态吗是302，则约定为登陆过期，需要跳转到登录页，重新登录，前端代码如下： ``` javascript axios.interceptors.response.use(function(res) { // 判断登录状态是否过期 if (res.data.result == 302) {
CSS 圣杯布局
圣杯布局算是一个"古老"的话题了，关于其来源网上资料众多，在此不多做表述。 下面看一下实现的过程，先看HTML结构： ``` html <header class='header'>header</header> <main class='main'> <div class='content'>content</div> <div class='left'>left</div>
Call Back
在JavaScript代码中，回调是编写和处理JavaScript程序异步逻辑的最常用的方式，甚至可以说回调是JavaScript中最基础的异步模式，回调函数作为异步的主力军，并且他们不辱使命的完成了自己的任务。 但是回调函数也不是没有缺点。 嵌套回调 考虑代码： ``` js listen('click', function () { setTimeout(function (
JS单线程异步
事实上，程序中`现在运行`的部门和`将来运行`的部分之间的关系就是异步编程的核心，毫无疑问，从一开始，Javascript就是涉及到异步编程，但是多数JavaScript开发者从来没有认真思考过自己程序中的异步到底是如何出现的，以及其为什么会出现，页没有探索过处理异步的方法。因为一直以来，低调的回调函数就算是足够好的方法了，但是随着异步应用越来越广泛，对多个异步的管理也越来越复杂，诸如：`回调地
CSS实现元素水平垂直居中
水平居中 子元素是行内元素(inline)或者inline-block, inline-table, inline-flex 父元素直接设置`text-align:center` 子元素是块级元素 子元素直接设置`margin:0 auto;` 父元素设置`position:relative`,子元素设置`position: absolute;left:
CSS float 详解
CSS中`float`是一个比较让人疑惑的属性，在平常的印象中，float大多数时候用来实现多列布局，还有float会莫名其妙的影响到他的邻居元素，以及作用于自身的`clear`。 float的本意 CSS是相当灵活的语言，要想实现某个效果，可能有好多种方法，那么究竟应该使用哪一种呢，目前统一的判断标准，例如：重绘，回流，极简主义等等，在现在的代码中，存在大量的CSS使用违反了该CSS
追风筝的人
我成为今天的我，是在1975年某个阴云密布的寒冷冬日，那年我十二岁。我清楚地记得当时自己趴在一堵坍塌的泥墙后面，窥视着那条小巷，旁边是结冰的小溪...
JavaScript Regular Expression
`ECMAScript3` 开始支持正则表达式，其语法和其他语言的正则表达式语法很类似，一个完整的正则表达式结构如下： ``` js var expression = /pattern/flags ; ``` 其中，模式(pattern)部分可以是任何简单或复杂的正则表达式，可以包含字符型、限定符、分组、向前查找以及反向查找。 每个正则表达式都可带有亦或多个标志(flags),用以标
JS内置对象理解
JavaScript有很多个内置对象，像是String,Number这类，我们深入了解一下内置对象，下面列出JS中常见的内置对象。 String Boolean Number Object Function Array Date Error RegExp Symbol // ES6 如果在浏览器中,还有各类的HTMLDomEleme
Photos Wall
常用小组件及样式收集
挪威的森林
星期日早上九点半，绿子来接我。我刚睁开眼睛，脸还没洗，只听有人“咚咚”敲门吼道：“喂，渡边，有女人找你！”我跑下门厅，只见绿子穿一条短得令人难以置信的牛仔裙...
CSS基础知识
CSS使用方法 link 标记 link必须放在head元素中，绝不能放在其他元素内部,因为link标记用来链接外部的样式，所以也被成为外部样式表 ``` html <link rel='stylesheet' type='text/css' href='main.css'/> ``` style 元素 可以使用style元素包含样式表，它在文档中单独出现，因为这个样式表嵌套在文