闭包和作用域April 16, 2023

对于那些有一点JavasScript使用经验但从未真正理解闭包概念的人来说,理解闭包可以看做某种意义上的重生,但是需要付出非常多的努力和牺牲才能理解这个概念。闭包是基于词法作用域书写代码时所产生的自然结果,你甚至不需要为了利用他们而有意识地创建闭包。闭包的创建和使用在你的代码中随处可见。你缺少的是根据你自己的意愿来识别、拥抱和影响闭包的思维环境。

#JavaScript#作用域#闭包

React Refs的多种用法归纳整理September 12, 2021

Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

#React#Refs#Javascript

React中PureComponent的浅比较September 12, 2021

PureComponent是react中创建组件的一种方式,可以减少不必要的更新,进而提升性能。这也是React应用性能优化的一种方式。

#React#JavaScript

脚手架开发:Lerna简介July 08, 2021

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.

#Lerna#脚手架开发

脚手架开发:命令注册和参数解析June 06, 2021

本篇会动手写很简单的命令注册和参数解析的实例。

#脚手架开发#脚手架命令注册#脚手架参数解析

脚手架开发:脚手架开发的流程以及本地调试、分包调试May 29, 2021

明确脚手架开发的基本流程、重难点,以及本地调试方法和技巧。

#脚手架#脚手架开发流程#脚手架本地调试

脚手架开发:认识脚手架May 20, 2021

站在架构的角度,从整体的角度出发,认识脚手架是个怎样的存在以及我们为什么需要它。

#架构设计#脚手架开发

浅谈需求分析和架构设计May 16, 2021

脱离业务的架构就是耍流氓。架构师必须要深入理解需求、参与需求、看透需求背后的业务本质。

#需求分析#架构设计

动态改变第三方UI框架的样式February 16, 2021

有时候想动态改变第三方UI框架(比如element)某个组件的样式,利用ref属性操作dom是个不错的选择。自己封装的组件当然不会选择这样做的,我们可以直接操作数据即可。

#vue#ref

巧妙监测元素尺寸变化February 15, 2021

这个方法的主要思想是在被监测元素里包裹一个跟元素位置大小相同的隐藏块。隐藏块可以滚动,并有一个远远大于它的子元素。当被监测元素尺寸变化时期望能触发隐藏块的滚动事件。

#Recommended#Resize#闲读源码#闲读规范

linux系统git设置代理February 14, 2021

如果你的linux系统配置了proxy服务,比如shadowsocks结合SwitchyOmega,如果不配置git代理,你很有可能不能正常的使用github。比如,在终端无法ping通github、不能git clone项目等。

#linux#proxy#git

为node-gyp配置本地编译环境January 13, 2021

为node-gyp配置本地编译环境,娓娓道来。

#node-gyp

基于Vue的H5首屏加载优化以及打包优化实践December 28, 2020

偶尔一个H5 项目在 build 的时候特别慢,看了下时间大约在 60 - 80s,并且需要经常 build,于是去网上找找资料如何缩短这个加载时间。以下是我在优化加载过程中遇到的一些坑及优化方案。

#H5#vue#首屏加载

prototype 与 __proto__ 的爱恨情仇November 18, 2020

先理解两者的一个本质区别,prototype 是函数独有的,是人为设定的;__proto__ 是所有对象都有的,是继承的。

#Recommended#Understanding JavaScript#闲读规范

Get All Images in DOM (including background)October 14, 2020

To get all the images in DOM there are actually three places we are going to look at: <img> element, background-image CSS property and, <iframe>. Yes, every iframe hides a magical kingdom.

#Recommended#Image#JavaScript#DOM

WordPress注册链接提示“您的密码重设链接无效”September 21, 2020

如果你的WordPress站点刚搭建完成并尝试开启用户注册功能,此时你可能会遇到一些意想不到的麻烦:确认邮件发到了你的邮箱,你点击链接,却无法打开链接去设置密码,提示你您的密码重设链接无效,请在下方请求新链接。

#wordpress

node环境:Error listen EADDRINUSE :::3000August 21, 2020

错误原因:其实是3000端口被其他应用程序占用了,只要找到占用该端口的应用程序,杀死它,就好了。

#端口占用#netstat#taskkill

检测 DOM 结点插入August 18, 2020

代码很短,就是维护了一个事件队列。核心在 onFn 和 offFn 上。后者同理,便主要看 onFn 的实现。

#闲读源码

如何在Debian上安装和保护RedisAugust 10, 2020

Redis是一个内存中的键值存储,以其灵活性,性能和广泛的语言支持而闻名。本教程演示如何在Debian服务器上安装,配置和保护Redis。

#Debian#Redis

MySQL 用户和角色管理入门August 08, 2020

MySQL 8.0 正式版目前已发布,MySQL 8.0 增加了很多新的功能,具体可参考 MySQL 8.0 正式版 8.0.11 发布 一文。

#Linux#MySQL

Mysql 8.x 创建用户和数据库August 08, 2020

linux上使用命令行操作。

#MySQL

Debian10 buster 安装 mysql workbenchAugust 08, 2020

之前仓库一直都有 mysql-workbench, 通过配置一下mysql-apt-config 就直接可以apt install mysql-workbench-community 了, 但是因为workbench 在buster发版的时候有致命的bug, 导致最后没有被吸收进仓库.

#Debain#MySQL workbench

Debian10 安装mysqlAugust 08, 2020

Debian10使用了MariaDB 在APT的软件包存储库中并没有mysql。

#Debian#MySQL

Ubuntu18.04 sudo apt update无法解析域名的解决方案August 02, 2020

拿起了封尘已久的ThinkPad,输入 sudo apt update 的时候,发现这个命令变得不好使了,主要是提示:无法解析域名等相关错误。

#apt update#无法解析域名

Use Proxy for Git/GitHubAugust 02, 2020

如果linux配置了代理,比如shadowsocks结合SwitchyOmege等,那么git配置ssh的时候需要写入代理相关的配置,不然ssh的配置并不能正常的工作。

#linux#git#proxy#ssh

Ubuntu16.04(debian)下拨号连接不稳定(pppoeconf连接)August 02, 2020

在debian下开启dsl帐号密码拨号连接(需要安装pppoe和pppoeconf包),浏览网页经常断开不稳定,需要更改配置。

#linux#pppoe#pppoeconf#dsl

从debian9升级到debian10August 02, 2020

升级到debian10,打开新立得包管理器:Wayland,Synaptic continue without administrative privileges...

#linux

Progressive background-image With EaseJuly 29, 2020

Everyone likes smooth loading. Lately I tried to make the background-image of the menu to load progressively(also to the cover if you view the blog on mobile).

#CSS#Image#Progressive Image#GraphicsMagick#Recommended

elementui周选择器July 12, 2020

elementui周选择器获取当前选中周,返回的数据是一个Mon May 04 2020 00:00:00 GMT+0800 (中国标准时间)。。。这样的,我们需要自己处理一个格式问题。

#element

vuex模块中使用namespaced之后的引用方法July 12, 2020

利用createNamespacedHelpers函数快速获取vuex模块的状态。

#vue#vuex#namespaced

echart自定义图例路径报错July 12, 2020

除了static文件夹,图片放在其他文件夹都会被webpack构建,如改成base64的格式。因此js就会找不到图片路径。

#echart

express中间件实现原理July 12, 2020

百把行代码,模拟express框架中间件的实现机制。

#express#middleware

echarts实现折现图的拐点为空心圆圈July 12, 2020

echarts实现折现图的拐点为空心圆圈

#echart

echarts折线图线条颜色和区域颜色设置July 12, 2020

echarts折线图线条颜色和区域颜色设置

#echart

git 将本地项目关联到远程仓库July 12, 2020

将本地项目关联到远程仓库

#git

extend,mixins,extends,components,installJuly 12, 2020

你知道extend,mixins,extends,components,install用法吗? 你知道他们的区别吗? 你知道他们的执行顺序嘛? 下面都能找到这些答案。

#extend#mixins#extends#components#install

nginx设置代理July 12, 2020

用vue,react开发的前端项目build打包之后,如果项目中设置了代理,那么线上环境也需要相应的设置代理。比如nginx作为服务的话设置代理的如下进行即可

#nginx

chrome插件之:SwitchyOmega的安装设置July 12, 2020

既然有Shadowsocks为什么还要用SwitchyOmega?简单来说,就算启动Shadowsocks越墙而出,很多网站在PAC模式下无法打开。我就遇到一种情况,开启Shadowsocks后google.com在老掉牙的ie浏览器能够畅通,在最新版本的Chrome浏览器却无法通行。我借助SwitchyOmega配置一个代理到本地127.0.0.1的场景模式后,在所有浏览器畅通无阻。

#SwitchyOmega#

echarts如何实现“暂无数据”July 12, 2020

echarts3中为什么删去了noDataLoadingOption的方法?我用.innerHTML=”暂无数据”可以实现,但是这样破坏了echarts自己生成的canvas,当有数据的时候需要重新执行init()方法。所以当我有很多个chart要管理的时候情况会变得很复杂。

#echart#暂无数据

vue项目实现前端导出excel+样式控制July 12, 2020

项目提出一个前端导出Excel表格的需求,利用xlsx,file-saver很容易实现。后台需求变更,需要样式可控,字段显示顺序可控等需求。查阅大量资料,用xlsx-style插件可实现。

#xlsx#file-saver#xlsx-style

debian9 + Ghost 2.X + MySQL 搭建博客July 12, 2020

我发现有许多类似的文章,但是大多都是过时的或者有许多我并不认为是最好的做法。所以打算自己写篇教程,希望可以帮助到需要的人。

#Ghost

linux创建用户并给用户sudo权限July 12, 2020

我经常看到博客说只要改/etc/sudoers文件就可以了。虽然这种方法可行,但是这种方法不利于管理用户。最重要的是,这种方法很low。

#linux#sudo

linux+xampp服务器配置https证书July 12, 2020

linux+xampp服务器配置https证书,分步骤详细说明。

#https#ssl#wordpress#xampp#linux

wordpress安装主题失败June 23, 2020

Wordpress搭建博客。但是坑难免还是要踩的,下面说一下此次采坑要点。 wordpress后台管理里面,我惊奇的发现不能安装自己喜欢的主题。弹窗要求输入ftp验证。而我输入了正确的ftp账户和密码,却“言而无信”的提示说无法连接到我的主机。

#wordpress

JavaScript this 的六道坎May 13, 2020

鉴于this风骚的运作方式,对this的理解是永不过时的话题,本文试图通过将其大卸六块来钉住这个磨人的妖精。

#Understanding JavaScript#This#Recommended

获取一周的开始时间与结束时间April 14, 2020

获取一天所属一周的开始时间和结束时间。

#javascript

JavaScript 有必要缓存 for 循环中的 Array.length 吗?March 18, 2020

先上笔者得到的结论:缓存 Array.lengh 对优化影响不大,甚至会减慢。

#Recommended#Understanding JavaScript#JavaScript#Array

TypeScript 集合转换为交集January 16, 2020

本文深入聊聊 TypeScript 的一些高级特性,以实现集合转换为交集为主线。

#TypeScript

TypeScript 函数泛型部分赋值January 11, 2020

本文聊聊如何用柯里化解决 TypeScript 函数泛型部分赋值的问题。

#TypeScript

Web 可访问性整理November 20, 2019

web可访问性整理。

#可访问性#Accessibility#语义化

实现一个有趣的 RxJS OperatorOctober 21, 2019

本文聊聊如何实现一个按 id 切换的 switchMap 。

SVG Symbol 和 Sprite 的好处和坑October 07, 2019

用 Symbol 来把 SVG 合并到一个文件几乎是现在最流行的用法

#Image#SVG#Sprite#Recommended

配置 SplitChunksPlugin 减少 Webpack 打包体积September 30, 2019

本文聊聊如何根据项目对 SplitChunksPlugin 进行细调从而减少 Webpack 打包体积。

#Webpack

JavaScript 继承总结September 24, 2019

总结js继承的几种形式和场合。

#Understanding JavaScript#JavaScript#Inheritance

真·复用组件 - React hooks 结合 RxJS 封装异步逻辑September 22, 2019

本文聊聊 React hooks 如何改变旧有的开发思路,以及如何利用 hooks 结合 RxJS 将异步逻辑封装到组件中,从而轻松复用功能更复杂的组件。

#React#RxJS#Hooks

ES6 随笔:函数与块级作用域August 21, 2019

阅读 Kyle Simpson 《You don't JS: Scope and Closures》第三章过程中的一些随笔

#Understanding JavaScript#JavaScript#Scope#闲读规范

Arch Linux 使用 iptables 管理网络June 30, 2019

出门在外,有时需要流量上网,本文聊聊如何使用 iptables 只允许特定的程序连接网络。

#Linux

定位与拖动 iframeJune 26, 2019

用户选择一段文本之后,会在鼠标附近显示一些元素。 这个初看很简单,监听一个 mouseup 事件,获取 clientX 和 clientY 就行。但这个方法有个缺陷:iframe 里的鼠标事件不会传到父窗口上。解决方法也很简单,就难在把它们都联系起来。

#Recommended#iframe#JavaScript#postMessage#Drag#Extension

轻松写测试:编写 JSX 直接生成 DOM 元素June 24, 2019

在编写测试时有时候我们需要生成大量不同 DOM 元素来进行测试。本文将聊聊几种生成 DOM 元素的方式以及它们的优劣势。

#Testing

搭建 Karma+Mocha+Chai 测试 TypeScript 项目June 18, 2019

测试是软件开发中重要的一环,有了测试项目开发起来大脑负担减少,心里踏实,许多没想到的边界条件也能一一揪出。Karma+Mocha+Chai 是经过时间考验的经典测试组合,具有较高的灵活性,非常值得研究学习。本文将从零开始搭建,同时配合 TypeScript 进行测试。

#Testing#Karma

纯 CSS 实现浮动介绍June 18, 2019

它是使用 JavaScript 响应鼠标事件并计算高度和显示。作为 CSS 洁癖,我第一反应当然是先考虑用 CSS 实现。

#CSS

JavaScript 音频变速保持音调June 06, 2019

在上篇文章中我们提到如何结合 React 为音频显示波形与区间循环播放,但有时候音频说话太快了,我们需要放慢下来听,所以本文我们来看看如何实现音频的变速,以及如何处理变速时声调出现的奇怪变化。

#React#Audio#Waveform#Wavesurfer#SoundTouch#Pitch Stretch

搭建 Gatsby 博客五:实现草稿模式和上下篇May 13, 2019

本文通过实现草稿模式和上下篇来进一步了解 Gatsby 的 Node APIs。

#Gatsby#Blog

搭建 Gatsby 博客四:兼容 Jekyll 式路径May 05, 2019

前面已经让博客顺利运行起来,接下来就是实现一些个性化的功能。本文通过实现兼容 Jekyll 式路径来了解 Gatsby 的 Node APIs。

#Gatsby#Blog#Jekyll

搭建 Gatsby 博客三:使用 Netlify CMS 管理文章April 26, 2019

一个博客如果不能方便地编写文章将非常打击作文欲望。本文将谈谈如何在 Gatsby 中配置 Netlify CMS 管理文章。

#Gatsby#Blog#Netlify

搭建 Gatsby 博客二:使用 GraphQL 管理资源April 22, 2019

Gatsby 默认使用了 GraphQL 来管理资源。本文将谈谈这么做的优点以及当中的一些坑。

#Gatsby#Blog#GraphQL

搭建 Gatsby 博客一:为什么选 GatsbyApril 18, 2019

Gatsby 是一个 React 建站框架。在使用 Gatsby 搭建了一个小博客后,非常喜欢其管理数据的方式。然而,尽管上手可以非常快,对于刚开始用 Gatsby 的人来说,理解其基本思想是个小门槛。官方提供了非常详细的教程,甚至有点过于基础了,本文面向有 React 基础,没有使用过 Gatsby 和 GraphQL 的读者分享一份笔记。

#Gatsby#Blog

JavaScript 创建对象总结March 20, 2019

JavaScript 是一门灵活的语言,就创建对象而言就有各种各样的方法。本文是《JavaScript高级程序设计》(第3版)的笔记,主要是针对各种创建对象方法之间的关系、优缺点进行梳理。每种方法相关的其它细节不是本文重点,我会标记页码。

#Understanding JavaScript#JavaScript#Object

React Native 搭配 MobX 使用心得December 13, 2018

MobX 是一款十分优秀的状态管理库,不但书写简洁还非常高效。当然这是我在使用之后才体会到的,当初试水上车的主要原因是响应式,考虑到可能会更符合 Vue 过来的思考方式。然而其实两者除了响应式以外并没有什么相似之处。

#React#React Native#JavaScript#MobX

Manacher 马拉车算法November 21, 2018

马拉车算法可以在线性时间复杂度内求出一个字符串的最长回文字串。其核心思想跟 KMP 相似,即反复利用已掌握的情况。

#Manacher#算法#Algorithms#回文#Palindrome#字符串#String#Recommended

如何文明提交代码September 24, 2018

程序员最烦的几件事:写测试,变量命名,还有填代码提交信息(commit message)。翻几个开源项目遍马上可以回味那作文凑字数的青春时光。 其实 commit message 的作用远不止如此,经过简单的配置便可无痛成为代码提交的文明公民。 Commit Message…

#Git

CSS Font 单位September 12, 2018

了解 CSS font 各个单位的意义,搜了一些资料。

#CSS#Font#闲读规范

React 黑魔法之 Portal + SyntheticEvent + iframeJuly 15, 2018

在实现划词扩展的时候,查词面板等模块需要植入到源网页,为了更方便地隔离样式污染,植入的模块均使用了 <iframe> 包装。在前一个 Vue 实现的版本 Saladict 5 中,有几个不太舒服的小小小小地方: <iframe> 内外事件不通。 <iframe> 内外环境不一样,变量不能共用,需要 postMessage 交流。 Vue 组件必须要有一个根元素,且 v-if…

#JavaScript#React

选中鼠标附近的文字June 22, 2018

选中鼠标附近的文字摸索记录。

#JavaScript#Recommended

深入 React Render Props 模式April 03, 2018

随着 React 的新 Context API 出来,render props 模式再次发挥重要作用。本文将尝试深入理解 render props 的利弊,并结合高阶组件寻找合适的处理方式。 基础 先看官方给出的简单例子: 加个 DataProvider 的简单实现, 这里是将一个返回 React 元素的函数传给 DataProvider 的 props.render,DataProvider…

#React#JavaScript

阅读 jQuery 源码的18个惊喜March 06, 2018

Jquery作为从前统治网页的框架,看看源码,对深入去学习js很有启发。

#Translation#JavaScript#jQuery#闲读源码

理解 RxJS :四次元编程February 16, 2018

RxJS 属于响应式编程,其思想是将时间看作数组,随着时间发生的事件被看作是数组的项,然后以操作数组的方式变换事件。其强大的地方在于站在四维的角度看问题,这就像是拥有了上帝视野。

#RxJS#JavaScript#Functional

Sublime Text 2 Emmet 快捷键整理December 04, 2017

整理一些常用的快捷键,助力开发。

#Sublime Text#Tips

Git 分支模式笔记November 06, 2017

Git 开发流程方面的资料,做一下笔记。

#Git

Sublime Text 2 快捷键整理October 31, 2017

基本涵盖绝大部分情况了,鼠标跳跃多选可以利用标签代替,或者用回鼠标(毕竟一般使用频率不高)。

#Sublime Text 2#Tips

获取 DOM 里所有图片(包括背景和iframe)March 09, 2017

在写浏览器扩展什么的时候可能会用上。 获取 DOM 里的图片主要是在这几个地方里面找: <img> 元素, background-image CSS 属性和 <iframe>。 img 如果只想获取 <img> 的图片,有两种方式: 直接获取所有 img 标签: 还可以用 document.images: background-image 获得背景图片需要查看所有 DOM…

#Recommended#Image#JavaScript#DOM

深入 ES2015 默认参数January 22, 2017

S2015 为函数加入了方便的默认参数语法。

#TDZ#Understanding JavaScript#Function#Parameters#Arguments#Recommended

eat();

sleep();

code();

repeat();