Beijiyang999-CSDN博客

原创微信小程序短信验证功能的实现（附案例代码/前后端/直接用）

模块效果展示（小程序界面）实现的功能小程序端：请求获取短信验证码两次请求之间间隔至少一分钟填写必填内容后，才能提交表单手机号合法性检验后台：接前台请求后，通过阿里云发送短信生成随机数字验证码（默认6位）收到提交的表单后，对验证码字段进行判断验证码是否过期验证码是否正确通过验证后，方能进行下一步操作如保存表单信息至数据库等结果反馈说明项目包含前后端代码，可以直接用，并

2017-09-07 18:10:55 17753 15

原创微信小程序实现城市名称拼音搜索框汉字/拼音（城市区县定位模块）

要实现的效果展示如下总体思路：首先，数据中，城市对象里，包含其全拼、简拼的属性；然后，逻辑层，找出能与输入框输入的字符串相匹配的对象；最后，展示层，把所有匹配的城市名都渲染出来。接下来，我们按步骤来一窥究竟。首先，是数据为了举例方便，test.js 中，我们使用简化版的数据：'use strict’const cityList = [{ "id": "35", "provinc

2017-06-12 19:57:49 9327 6

原创数据可视化：在 React 项目中使用 Vega 图表 (二)

上一篇讲了如何在 React 项目中用 Vega-Lite 绘制基本的 area chart 图表。本篇将介绍如何绘制多层图表，如何添加图例。多层图表通过上一篇文章，我们知道了可以通过 mark, encoding 等来描述我们想要的图表。要实现多层图表，只需要把多个包含上述属性的图表对象放进 layer 数组中就可以。就像栈一样，从栈顶压入，后压入的（index 大的）图层在上层。我...

2019-10-29 22:47:11 952

原创数据可视化：在 React 项目中使用 Vega 图表 (一)

相关包打开搜索引擎，一搜 Vega，发现相关的包有好几个，Vega, Vega-Lite, Vega-Embed，React-Vega 等等，不免让人头晕。别急，它们之间的关系三四句话就能说明白，以下是极简介绍：Vega：一套数据可视化的语法。它强大、灵活。用 JSON 描述配置，以 Canvas 或者 SVG 出图。Vega-Lite：一套描述 Vega 配置的语法。它简易、快速。同样...

2019-10-24 23:54:33 1776

原创用 reduce 实现一行代码深拷贝对象/数组

一行实现深拷贝数组const deepCopyArr = arr => arr.reduce((acc, cur) => ( cur instanceof Array ? [...acc, deepCopyArr(cur)] : [...acc, cur]), [])一行实现深拷贝对象const deepCopyObj = obj => Object.entries...

2019-05-23 05:47:21 1176

原创经典闭包题目ES7新解

题目for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(new Date, i) }, 1000)}console.log(new Date, i)输出：5 （1s）5 5 5 5 5如何变成： 5（1s）0（1s）1（1s）2（1s）3（1s）4经典解法闭包fo...

2019-05-02 05:43:31 234

原创垂直居中：两方向，四方法，条条大路通罗马

垂直居中常见的四种方法总结两条路，即 flex box 或者绝对定位。四种方法，分别如下：方法一： flex box#container{ display: flex; justify-content: center; align-items: center;}方法二：绝对定位2.1 先把顶点移动到中心，再挪回自身长宽的一半（transform-translate）...

2019-03-07 19:26:06 248

原创 JavaScript实现简单的二叉树中序遍历(class / prototype 写法)(附 Python)

一棵简单的二叉树如图。构建二叉树首先，构建如图的二叉树，并添加一个打印该树的方法 printTheTree。ES6 class 语法如下class TreeNode { constructor(value) { this.value = value this.left = null this.right = null } printTheTree()...

2018-11-13 22:42:31 335

原创 ASCII码在算法题中的两个小妙用：转换字母大小写与转换整数字符String/Number类型（JavaScript/Python描述）

最少必要知识‘0’ 对应的ASCII码是 48‘A’ 对应的ASCII码是 65'a‘ 对应的ASCII码是 97这也是 JavaScript 中 'a' &gt; 'A' 为 true 的原因。转换字母大小写假设做如下规定参数letter：为单个英文字母字符；参数 mode ：小写换大写为 1；大写换小写为 -1。JavaScript：const toUpperO...

2018-11-12 01:17:44 704

原创用 JavaScript 创建一个栈，并优化时间复杂度 (附 Python 描述)

题目描述：Design a stack that supports push, pop, top, and retrieving theminimum element in constant time.要实现的栈方法push(x) – Push element x onto stack.pop() – Removes the element on top of the stack....

2018-11-12 00:37:28 257

原创滚动条挤占内容宽度、破坏布局的解决方案

问题当内容增多，滚动条从无到有时，它的出现挤压了内容宽度，导致原来设计好的布局被破坏。原因滚动条的宽度是计算到内容 content 里的。解决思路增加一个中间层，使得外部容器宽度保持设计宽度，内部元素排列保持不变。具体案例使用 antd 的 Modal 弹窗，基于其最简单的基本示例，如图：希望的效果：弹窗定宽定高；一排4个，宽度、边距固定；当总...

2018-08-21 17:11:02 30631 2

原创 JavaScript 用一个一元函数精简地实现 ES6 的 findIndex 与 findLastIndex 方法

普通地实现 findIndex 与 findLastIndexES6 新增了 findIndex 与 findLastIndex 数组方法，可以正序、反序地查询，并返回数组中满足回调函数的第一个元素的索引，否则返回 -1。// 用法arrayObj.findIndex(callbackfn [, thisArg]);// 回调函数用法function callbackfn(value...

2018-07-10 00:25:54 10917

原创 JavaScript 实现对象、数组、类数组通用的遍历方法 each

jQuery 的 each 方法jQuery 有个 each 方法，是对于对象、数组通用的遍历方法。具体的用法参考官方文档：.each()今天我们也来实现这样一个 each 方法。思路参数：参考 jQuery ，each 方法接收两个参数：要遍历的对象；要在其上执行的回调函数。逻辑：自然是要先判断其类型，是数组（类数组）就执行 for 循环（forEac...

2018-07-08 22:41:46 1017

原创 grid 入门：用 grid 布局轻松解决 flex 布局不太好做的一个问题

最近一个需求如图：大概是数据上，react 组件从父组件接收两个数组，分别渲染出左右两列；左右两列内容都是动态的，要求自适应文字高度，同一行其行高一致；左列文字右对齐，右列文字左对齐；伪代码：Array1.map(渲染左列表组件)Array2.map(渲染右列表组件)...

2018-06-30 17:05:54 9031 4

原创二分搜索 / 折半查找

查找/搜索算法中，顺序搜索没什么好说的，从二分搜索 / 折半查找开始。步骤选择中间值（low+high） / 2如果它是目标值，bingo~如果大了，从其左边的一半找如果小了，从其右边的一半找如果找不到，返回 -1 或 null 等注意：需要数组本身有序递归实现function binaryhSearch(arr, low, high, target) ...

2018-05-06 13:14:55 267

原创几种常见的排序算法总结（JavaScript 描述）

本文讨论：冒泡排序、插入排序、希尔排序、简单搜索排序、快速排序、归并排序、堆排序。冒泡排序介绍冒泡排序比较任何两个相邻的项。如果前一个比后一个大，就交换它们。元素向上移动至正确的位置，看上去就像水中上升的气泡一样。代码function bubbleSort(arr) { let length = arr.length; let flag; ...

2018-05-06 00:49:02 394

原创 JavaScript 实现 reduce() 方法函数

思路与之前两篇文章( map()的实现，filter()的实现）中的迭代方法不一样，reduce() 是归并方法。reduce 接收两个参数：第一个参数是在每一项上调用的函数该函数接收 4 个参数：前一个值 prev 当前值 cur 项的索引 index 数组对象 array第二个可选参数是作为归并基础的初始值reduce 方法返回一个最终的值。代码表示...

2018-05-03 20:40:01 13696 3

原创 JavaScript 实现 filter() 方法函数

思路filter 方法接收两个参数：对每一项执行的函数该函数接收三个参数：数组项的值数组项的下标数组对象本身指定 this 的作用域对象filter 方法返回执行结果为true的项组成的数组。代码表示：arr.filter(function(item, index, arr){}, context)实现由此，实现 fakeFilter...

2018-05-03 14:26:57 8695

原创 JavaScript 实现 map() 方法函数

思路map 迭代方法接收两个参数：对每一项执行的函数该函数接收三个参数：数组项的值数组项的下标数组对象本身指定 this 的作用域对象map 方法返回每次函数调用结果组成的数组。代码表示：arr.map(function(item, index, arr) {}, this);实现由此，实现 fakeMap 方法如下代码：Array...

2018-05-03 13:57:52 12117

原创用 JavaScript 函数实现时间格式转换（'46秒' => '00:00:46'）

题目假设传入的参数就是“2时5分”、“3时46秒”这种格式的字符串，省去参数类型检测。略去检测分秒数大于 60 的情况。思路：先把字符串 split 打散转换为数组forEach() 遍历数组元素找出“时”、“分”等关键词的 index据此切分拼接新格式数组注意点：arguments 和对应参数的绑定非严格模式下，当传入实参，实参和 arguments ...

2018-05-03 02:13:56 718

转载 Understanding Block Formatting Contexts in CSS

A Block Formatting Context is part of the visual CSS rendering of a web page in which block boxes are laid out. The positioning scheme to which it belongs is normal flow. According to W3C:Fl

2018-04-30 21:07:32 247

原创 JavaScript 实现继承的方式：原型链、组合式、寄生组合式

原型链继承let Parent = function() { this.name = [‘parent']}Parent.prototype.sayName = function() { console.log(this.name)}let Child = function(){}Child.prototype = new Parent() //原型式继承l...

2018-04-14 19:10:44 399

原创 JavaScript 函数节流（throttle）的实现

函数节流是什么对于持续触发的事件，规定一个间隔时间（n秒），每隔一段只能执行一次。上一篇讲的函数防抖（debounce）与本篇说的函数节流（throttle）相似又不同。函数防抖一般是指对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时。二者都能防止函数过于频繁的调用。区别在于，当事件持续被触发，如果触发时间间隔短于规定的等待时间（n秒），那么...

2018-04-06 20:27:32 12710

原创 JavaScript 函数防抖（debounce）的实现

函数防抖是什么函数防抖是指对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时，是常见的优化，适用于表单组件输入内容验证防止多次点击导致表单多次提交等情况，防止函数过于频繁的不必要的调用。代码实现思路用 setTimeout 实现计时，配合 clearTimeout 实现“重新开始计时”。即只要触发，就会清除上一个计时器，又注册...

2018-04-06 12:53:52 18414

原创 JS 显示原型、隐式原型与原型链 / 构造函数、实例、实例原型之间的关系

什么是原型链原型链是利用原型，让一个引用类型继承另一个引用类型的属性和方法。为了说明白原型链，需要从构造函数、原型与实例的关系讲起。构造函数、原型与实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针（显式原型），而实例都包含一个指向原型对象的内部指针（隐式原型）。那么，假如让原型对象等于另一个类型的实例，结果会让此事的原型对象包含一个指...

2018-03-31 16:06:49 1772

原创 JavaScript new 的实现

new 特性《你不知道的JavaScript》提到：使用 new 调用函数，或者说发生构造函数调用时，会自动执行下面的操作：创建（或者说）构造一个全新的对象；这个新对象会被执行 [[Prototype]] 连接；这个新对象会绑定到函数调用的 this；如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。new 的实现用法： fakeNe...

2018-03-31 14:49:10 536

原创 JavaScript bind() 方法的实现

bind() 方法的特点bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，可以把除了第一个参数以外的其他参数都传递给下层的函数（这种技术称为“部分应用”，是“柯里化”的一种）注①如果 bind() 返回的函数作为构造函数使用，bind 时指定的 this 值会失效，但传入的参数有效。 new 调用返回的实例能够继承绑定...

2018-03-31 11:00:02 1379

原创 JavaScript call() 与 apply() 方法的实现与思路解析

用一个例子开始greet = "Hi, Im global";let foo = { greet: "Hello"};let bar = function(name, character) { console.log(this.greet); return { greet: this.greet, person: `${name} is ${char...

2018-03-30 17:15:23 335

原创一道 promise 亮灯问题的思路演进与深坑 (JS异步机制) 分析

问题红灯三秒亮一次，绿灯一秒亮一次，黄灯2秒亮一次；如何让三个灯按照这个规律不断交替重复亮灯？（用Promse实现）三个亮灯函数已经存在：function green() { console.log("green");}function yellow() { console.log("yellow");}function red() { console.log(...

2018-03-17 23:42:24 1300

原创单线程 JavaScript 的异步机制与经典 for 循环面试题

从一个经典的 for 循环问题开始for (var i = 1; i <= 5; i++) { setTimeout( function timer() { console.log(i); }, i*1000)}输出是：每隔1秒，输出一个6，共5次。原理这样的输出，是由 JavaScript 的单线程及异步机制决定的。JavaScript 是单线...

2018-03-07 17:38:32 978 2

原创 react-router 只变 link 不更新内容的问题的解决记录

React + Redux + node.js 的项目之前遇到类似的问题，是这种情况：用 withRouter() 解决 Blocked Updates Generally, React Router and Redux work just fine together. Occasionally though, an app can have a component th...

2018-01-06 23:47:36 7472

原创 React项目：代码分片、按需加载（code splitting）/ 免webpack配置

为什么需要代码分片Facebook 的 create-react-app 是一款非常优秀的开发脚手架。它为我们生成了 React 开发环境，自带 webpack 默认配置。它会通过 webpack 打包我们的应用，产生一个 bundle.js 文件。随着我们的项目越写越复杂，bundle.js 文件会随之增大。由于该文件是唯一的，所以不管用户查看哪个页面、使用哪个功能，都必须先下载所有的功能代...

2017-11-21 13:12:08 5432 1

原创在阿里云 ECS 服务器部署 React + Express 项目

项目开发了一部分，准备先上线看看效果，就进行了部署。以下是文档记录。0-选购阿里云 ECS 服务器操作系统： Ubuntu 14.04 64位1-创建普通用户登录方式使用阿里云管理终端连接 ECS 实例实际操作过程中，发现这种方式速度慢，易卡死。本地通过 SSH 登录参考文档配置好秘钥后，用起来速度飞快。创建普通用户创建一个名为cat的普通用户。注：如果使用阿里云管理终端登录，跳过第

2017-11-17 21:49:49 2644

翻译 React 实现井字棋游戏 (tic-tac-toe) 教程 (6) <译自官方文档>

你的井字棋已经实现了如下功能：你可以玩井字棋游戏；当有玩家获胜时，宣布结果；存储棋局的历史步骤记录；允许玩家穿越回之前，查看当时棋盘的格局。

2017-11-06 16:46:23 1264

翻译 React 实现井字棋游戏 (tic-tac-toe) 教程 (5) <译自官方文档>

存储历史步骤，并显示每一步棋。我们来实现这样的功能：通过重新访问board旧的状态，穿越回到之前的某一步。目前我们已经做到：每走一步棋，都随即创造一个新的`squares`数组。由此，我们可以同步地存储board的旧状态。

2017-11-06 16:27:45 703

翻译 React 实现井字棋游戏 (tic-tac-toe) 教程 (4) <译自官方文档>

轮流下棋与宣布获胜者。目前，游戏中一个明显的问题是，只有“X”一个人能玩。现在就解决这个问题。我们默认，“X”执先手。在 Board 组件的构造函数中

2017-11-05 13:40:22 1900

翻译 React 实现井字棋游戏 (tic-tac-toe) 教程 (3) <译自官方文档>

状态提升至此，我们已经拥有了编写井字棋游戏的基本构件。但现在，状态（state）是被包裹在各个 Square 组件内的。为了完成这个游戏，我们还需要做这两件事：检查是否已经有玩家胜出；以及在小方格中轮流填入“X”和“O”

2017-11-05 09:37:36 1053

翻译 React 实现井字棋游戏 (tic-tac-toe) 教程 (2) <译自官方文档>

介绍什么是 React，如何开始编写，怎么通过 Props 传数据，什么是交互式组件，有什么好用的开发者工具。React 用于构建用户界面，它是一种声明式的，高效灵活的 JavaScript 库。

2017-11-04 20:56:46 1319

翻译 React 实现井字棋游戏 (tic-tac-toe) 教程 (1) <译自官方文档>

翻译 react 官方指南 Tutorial: Intro To React用 react 一步步实现了井字棋游戏 tic-tac-toe

2017-11-04 17:33:15 2020

翻译 React : 展示组件 & 容器组件附案例与视频

写React应用时，我发现了一种简单而有效的模式。如果你也写过一阵子React，或许你也已经发现它了。对于这种模式，这篇文章讲得不错，不过我还想再补充几点。如果把组件分为以下两类，对组件的复用和理解会更容易一些。我这两类组件称为展示组件和容器组件。也有叫“胖的&瘦的”、“聪明的&笨的”、“包含状态的的&纯的”、“Screens and Components”的等等说法，这些说法并不完全一致，但核心理念大概

2017-11-04 11:35:15 892

空空如也

空空如也