自己实现 React-Redux (三)：结合 context 和 store
构建 createStore 函数实现 Redux 架构原理: 构造一个函数 createStore，该函数可以对全局变量的状态进行统一的管理。该函数传入一个全局 state 以及状态修改纯函数 reducer, reducer 定义了改变状态的逻辑并返回一个新的状态，为后面的动态渲染优化做准备。
在 src/index.js 中加入 createStore 函数
12345678910111213141516171819202122232425262728293031323334353637function createStore(reducer){ // 初始状态 let state = null // 定义发布者 const listeners = [] // 绑定订阅者 const subscribe = (listener)=>listeners.push(listener) // 获取 state const getState = ()=>state // 绑定处理函数 const dis ...
自己实现 React-Redux (二)：初始化工程
构建项目在命令行依次输入以下命令
12// 利用脚手架创建新项目npx create-react-app react-redux
12// 安装类型检查依赖npm install --save prop-types
创建文件安装好后在 src/ 目录下新增三个文件：Header.js、Content.js、ThemeSwitch.js。
修改 src/Header.js：
1234567891011121314import React, { Component } from 'react'import PropTypes from 'prop-types'class Header extends Component { render() { return ( <div> <h1>动手实现React-Redux</h1> </div> ) } ...
自己实现 React-Redux (一)：React.js中的 context
Redux架构Redux是一种前端架构，是由 Facebook 的 Flux 框架演变而来，但避开了 Flux 的复杂性。而 Flux 是一种模式而非正式框架，通过利用单项数据流补充React的组合视图组件。
Redux要解决的问题React的数据流是单项数据流，如果任何一个子组件依赖了父组件的状态，就需要将状态存储到父组件中进行状态提升。但假设该父组件又是另一组件的子组件且状态又由另一组件决定，那么状态又需提升至另一组件。层层的状态依赖非常麻烦。
React中可以通过设置 context属性实现全局变量的效果，任何该组件的子组件都可以读取到 context 属性；而一旦 context 属性改变，所有依赖 context 属性的组件都会更新。
并且所有能读取到 context 的组件都可以对该属性进行修改，如果在组件关系非常复杂，到处存在这种修改父组件 context 的逻辑，那么可能产生难以预测的后果。
因此 Redux 规范了修改全局属性 state 的方法，便于状态改变的维护与管理。
核心概念1. 单一数据源
整个应用的 state 被储存在一棵 object tree 中，并 ...
用JS写算法
用JS去除字符串前后空格1234567891011121314151617181920212223242526272829function trim(str){ if(!str) return ""; return trimRight(trimLeft(str));}function trimLeft(str){ // 判断字符串（去掉换行、tab等） const judgeStr = new String(" \t\r\n"); if(judgeStr.indexOf(str.charAt(0))!==-1){ let j = 1, len = str.length; while(j<len && judgeStr.indexOf(str.charAt(j))!==-1){ j++; } str = str.substring(j); } ...
自己动手实现符合Promise/A+规范的Promise
Promise异步实现之前在JS异步函数小结里面初步介绍了JS里面的一些异步操作与 Promise 的使用方法，我们要知其然也要知其所以然，所以让我们看一下如何动手实现自己的 MyPromise。
Promise/A+协议协议是实现的基础，Promise/A+协议的中文参考网站如下：
https://www.ituring.com.cn/article/66566
英文网站如下：
https://promisesaplus.com/
实现最简单的构造函数，可以满足回调函数的调用
首先Promise构造参数只能接受函数，否则报错。
Promise内部变量包括：
值 value => 指任何 JavaScript 的合法值（包括 undefined , thenable 和 promise）。
拒因 reason => 值一个 promise 拒绝的原因。
状态 state => promise 执行所处的状态
Promise规范规定了Promise的状态一共有三种：Pending、Fulfilled 及 Rejected。状态之间的转换只能是 Pending =&g ...
D3实现多对多关联关系弧线图
多对多关联关系基于D3实现的多对多关联关系：github地址
各人员之间的互动关系、各公司上下游企业的关联关系、各地之间的交互关系等等，都是多对多关联关系的表达，他们之间可以通过矩阵图的形式来表达, 如下图所示 (用python的heatmap：
而利用 D3库函数可以实现更为酷炫的弧线,如下图所示：
要画多方关系图，首先需要确定绘制的数据，是一个 N * N 的矩阵。
1234567891011121314matrix = [ const matrix = [ [1, 41, 0, 0, 8, 4, 2, 0, 5, 5], [6, 0, 1, 1, 1, 0, 4, 1, 0, 1], [1, 12, 0, 0, 3, 0, 1, 0, 1, 3], [0, 11, 3, 0, 4, 1, 1, 0, 0, 2], [1, 1, 0, 0, 1, 0, 0, 2, 2, 0], [4, 0, 4, 0, 0, 0, 0, 1, 0, 1], [0, 6, 0, 0, ...
JS实现图片的懒加载
场景需求在长博客、商品网站上经常见到大量的图片，而同时加载如此多的图片会导致服务器响应慢、页面卡顿，用户体验不佳。
而图片懒加载就是应对这个痛点。图片懒加载技术就是根据图片在可视区域的位置对图片进行逐步加载，利用 DOM对象元素属性、分流等技术实现。
实现原理步骤一 隐藏懒加载图片的 src 属性我们首先需要确定懒加载的图片资源，对于 img 标签，首先把src 属性用自定义的属性如 data-src 代替，等到图片需要加载时我们将 data-src 的网址赋予 src 属性即可。
1<img data-src='./dzq.jpg' alt="dzq">
步骤二 判断待加载图片是否位于视窗范围内DOM 元素拥有一个方法 element.getBoundingClientRect()，可以获取该元素的大小及其相对于视口的位置，方法返回的是一个 DOMRect 对象，其 left, top, right, bottom 属性解释了相对于视口位置，如下所示。
然后利用 img.getBoundingClientRect(). ...
背包问题
01 背包有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。
第 i 件物品的体积是 $v_i$，价值是 $w_i$。
求解将哪些物品装入背包，可使这些物品的总体积不超过背包容量，且总价值最大。输出最大价值。
输入格式第一行两个整数，N，V，用空格隔开，分别表示物品数量和背包容积。
接下来有 N 行，每行两个整数 $v_i,w_i$，用空格隔开，分别表示第 i 件物品的体积和价值。
输出格式输出一个整数，表示最大价值。
数据范围$0< N,V ≤ 1000$$0< v_i,w_i ≤ 1000$
输入样例123454 51 22 43 44 5
输出样例：18
思路+方法f[i][j]表示面对第 i 件物品时，体积为 j 的背包的最大总价值。两种选择：1. 不放入第 i 件物品。 2. 放入第 i 件物品。
状态转移方程：f[i][j]=max(f[i−1][j],f[i−1][j−w[i]]+v[i])
优化：f[j]=max(f[j],f[j−w[i]]+v[i])。此时 j 要从大到小遍历，保证第 i 件物品只能选择一次。否则 f[i][j] 会由 f[i ...
CSS 布局知识
CSS实现垂直水平居中对于父元素 parent 与 子元素 child，如何实现子元素在父元素内部的水平垂直居中？
元素的 html 代码如下：
1234567891011121314151617181920212223242526<!DOCTYPE html><html><head> <title>Document</title> <style> .parent{ width: 500px; height: 500px; background-color: aquamarine; } .child{ width: 200px; height: 200px; background-color: coral; } </style></head>< ...
CSS 知识要点
选择元素
基本元素选择
12/* 把段落文本设置成红色，12像素大，粗体 */p {color:red; font-size:12px; font-weight:bold;}
上下文选择
12/* 选择祖先元素为 article 标签的所有段落 p 后代 */article p {color:red; font-size:12px; font-weight:bold;}
特殊上下文选择
子选择符12/* 将 section 的 h2 子元素的字体设置为 italic */section > h2 {font-style:italic;}
紧邻同胞选择
12/* 将紧邻着 h2 的元素同胞 p 选择设置 */h2 + p {font-style:italic;}
一般同胞选择12/* 将 h2 与 p 之间的同胞全部选择 */h2 ~ p {font-style:italic;}
通用选择
1234/* 全文所有字体颜色（包括文本框）设置为黑色 */* {colo ...
