自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Beijiyang

就这样不停地挑战生活,再与之言和。

  • 博客(62)
  • 论坛 (1)
  • 收藏
  • 关注

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

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

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

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

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

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

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

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

2019-10-29 22:47:11 290

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

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

2019-10-24 23:54:33 482

原创 用 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 551

原创 经典闭包题目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 88

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

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

2019-03-07 19:26:06 104

原创 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 203

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

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

2018-11-12 01:17:44 465

原创 用 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 108

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

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

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

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

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

2018-07-10 00:25:54 5077

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

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

2018-07-08 22:41:46 587

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

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

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

原创 二分搜索 / 折半查找

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

2018-05-06 13:14:55 140

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

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

2018-05-06 00:49:02 232

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

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

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

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

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

2018-05-03 14:26:57 5875

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

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

2018-05-03 13:57:52 9314

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

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

2018-05-03 02:13:56 413

转载 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 119

原创 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 236

原创 JavaScript 函数节流(throttle)的实现

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

2018-04-06 20:27:32 9118

原创 JavaScript 函数防抖(debounce)的实现

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

2018-04-06 12:53:52 11454

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

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

2018-03-31 16:06:49 1093

原创 JavaScript new 的实现

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

2018-03-31 14:49:10 398

原创 JavaScript bind() 方法的实现

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

2018-03-31 11:00:02 1098

原创 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 195

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

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

2018-03-17 23:42:24 866

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

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

2018-03-07 17:38:32 650 1

原创 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 6694

原创 React项目:代码分片、按需加载(code splitting)/ 免webpack配置

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

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

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

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

2017-11-17 21:49:49 2265

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

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

2017-11-06 16:46:23 1013

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

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

2017-11-06 16:27:45 493

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

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

2017-11-05 13:40:22 1634

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

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

2017-11-05 09:37:36 719

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

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

2017-11-04 20:56:46 907

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

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

2017-11-04 17:33:15 1538

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

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

2017-11-04 11:35:15 636

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除