闭包和作用域 • April 16, 2023
对于那些有一点JavasScript使用经验但从未真正理解闭包概念的人来说,理解闭包可以看做某种意义上的重生,但是需要付出非常多的努力和牺牲才能理解这个概念。闭包是基于词法作用域书写代码时所产生的自然结果,你甚至不需要为了利用他们而有意识地创建闭包。闭包的创建和使用在你的代码中随处可见。你缺少的是根据你自己的意愿来识别、拥抱和影响闭包的思维环境。
React Refs的多种用法归纳整理 • September 12, 2021
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
React中PureComponent的浅比较 • September 12, 2021
PureComponent是react中创建组件的一种方式,可以减少不必要的更新,进而提升性能。这也是React应用性能优化的一种方式。
脚手架开发:Lerna简介 • July 08, 2021
Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.
脚手架开发:命令注册和参数解析 • June 06, 2021
本篇会动手写很简单的命令注册和参数解析的实例。
脚手架开发:脚手架开发的流程以及本地调试、分包调试 • May 29, 2021
明确脚手架开发的基本流程、重难点,以及本地调试方法和技巧。
脚手架开发:认识脚手架 • May 20, 2021
站在架构的角度,从整体的角度出发,认识脚手架是个怎样的存在以及我们为什么需要它。
浅谈需求分析和架构设计 • May 16, 2021
脱离业务的架构就是耍流氓。架构师必须要深入理解需求、参与需求、看透需求背后的业务本质。
写一个好玩的万花筒 • April 26, 2021
动态改变第三方UI框架的样式 • February 16, 2021
有时候想动态改变第三方UI框架(比如element)某个组件的样式,利用ref属性操作dom是个不错的选择。自己封装的组件当然不会选择这样做的,我们可以直接操作数据即可。
巧妙监测元素尺寸变化 • February 15, 2021
这个方法的主要思想是在被监测元素里包裹一个跟元素位置大小相同的隐藏块。隐藏块可以滚动,并有一个远远大于它的子元素。当被监测元素尺寸变化时期望能触发隐藏块的滚动事件。
linux系统git设置代理 • February 14, 2021
如果你的linux系统配置了proxy服务,比如shadowsocks结合SwitchyOmega,如果不配置git代理,你很有可能不能正常的使用github。比如,在终端无法ping通github、不能git clone项目等。
为node-gyp配置本地编译环境 • January 13, 2021
为node-gyp配置本地编译环境,娓娓道来。
基于Vue的H5首屏加载优化以及打包优化实践 • December 28, 2020
偶尔一个H5 项目在 build 的时候特别慢,看了下时间大约在 60 - 80s,并且需要经常 build,于是去网上找找资料如何缩短这个加载时间。以下是我在优化加载过程中遇到的一些坑及优化方案。
prototype 与 __proto__ 的爱恨情仇 • November 18, 2020
先理解两者的一个本质区别,prototype 是函数独有的,是人为设定的;__proto__ 是所有对象都有的,是继承的。
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.
WordPress注册链接提示“您的密码重设链接无效” • September 21, 2020
如果你的WordPress站点刚搭建完成并尝试开启用户注册功能,此时你可能会遇到一些意想不到的麻烦:确认邮件发到了你的邮箱,你点击链接,却无法打开链接去设置密码,提示你您的密码重设链接无效,请在下方请求新链接。
node环境:Error listen EADDRINUSE :::3000 • August 21, 2020
错误原因:其实是3000端口被其他应用程序占用了,只要找到占用该端口的应用程序,杀死它,就好了。
检测 DOM 结点插入 • August 18, 2020
代码很短,就是维护了一个事件队列。核心在 onFn 和 offFn 上。后者同理,便主要看 onFn 的实现。
如何在Debian上安装和保护Redis • August 10, 2020
Redis是一个内存中的键值存储,以其灵活性,性能和广泛的语言支持而闻名。本教程演示如何在Debian服务器上安装,配置和保护Redis。
MySQL 用户和角色管理入门 • August 08, 2020
MySQL 8.0 正式版目前已发布,MySQL 8.0 增加了很多新的功能,具体可参考 MySQL 8.0 正式版 8.0.11 发布 一文。
Mysql 8.x 创建用户和数据库 • August 08, 2020
linux上使用命令行操作。
Debian10 buster 安装 mysql workbench • August 08, 2020
之前仓库一直都有 mysql-workbench, 通过配置一下mysql-apt-config 就直接可以apt install mysql-workbench-community 了, 但是因为workbench 在buster发版的时候有致命的bug, 导致最后没有被吸收进仓库.
Debian10 安装mysql • August 08, 2020
Debian10使用了MariaDB 在APT的软件包存储库中并没有mysql。
Ubuntu18.04 sudo apt update无法解析域名的解决方案 • August 02, 2020
拿起了封尘已久的ThinkPad,输入 sudo apt update 的时候,发现这个命令变得不好使了,主要是提示:无法解析域名等相关错误。
Use Proxy for Git/GitHub • August 02, 2020
如果linux配置了代理,比如shadowsocks结合SwitchyOmege等,那么git配置ssh的时候需要写入代理相关的配置,不然ssh的配置并不能正常的工作。
Ubuntu16.04(debian)下拨号连接不稳定(pppoeconf连接) • August 02, 2020
在debian下开启dsl帐号密码拨号连接(需要安装pppoe和pppoeconf包),浏览网页经常断开不稳定,需要更改配置。
从debian9升级到debian10 • August 02, 2020
升级到debian10,打开新立得包管理器:Wayland,Synaptic continue without administrative privileges...
Progressive background-image With Ease • July 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).
elementui周选择器 • July 12, 2020
elementui周选择器获取当前选中周,返回的数据是一个Mon May 04 2020 00:00:00 GMT+0800 (中国标准时间)。。。这样的,我们需要自己处理一个格式问题。
vuex模块中使用namespaced之后的引用方法 • July 12, 2020
利用createNamespacedHelpers函数快速获取vuex模块的状态。
echart自定义图例路径报错 • July 12, 2020
除了static文件夹,图片放在其他文件夹都会被webpack构建,如改成base64的格式。因此js就会找不到图片路径。
express中间件实现原理 • July 12, 2020
百把行代码,模拟express框架中间件的实现机制。
echarts实现折现图的拐点为空心圆圈 • July 12, 2020
echarts实现折现图的拐点为空心圆圈
echarts折线图线条颜色和区域颜色设置 • July 12, 2020
echarts折线图线条颜色和区域颜色设置
git 将本地项目关联到远程仓库 • July 12, 2020
将本地项目关联到远程仓库
extend,mixins,extends,components,install • July 12, 2020
你知道extend,mixins,extends,components,install用法吗? 你知道他们的区别吗? 你知道他们的执行顺序嘛? 下面都能找到这些答案。
nginx设置代理 • July 12, 2020
用vue,react开发的前端项目build打包之后,如果项目中设置了代理,那么线上环境也需要相应的设置代理。比如nginx作为服务的话设置代理的如下进行即可
chrome插件之:SwitchyOmega的安装设置 • July 12, 2020
既然有Shadowsocks为什么还要用SwitchyOmega?简单来说,就算启动Shadowsocks越墙而出,很多网站在PAC模式下无法打开。我就遇到一种情况,开启Shadowsocks后google.com在老掉牙的ie浏览器能够畅通,在最新版本的Chrome浏览器却无法通行。我借助SwitchyOmega配置一个代理到本地127.0.0.1的场景模式后,在所有浏览器畅通无阻。
echarts如何实现“暂无数据” • July 12, 2020
echarts3中为什么删去了noDataLoadingOption的方法?我用.innerHTML=”暂无数据”可以实现,但是这样破坏了echarts自己生成的canvas,当有数据的时候需要重新执行init()方法。所以当我有很多个chart要管理的时候情况会变得很复杂。
vue项目实现前端导出excel+样式控制 • July 12, 2020
项目提出一个前端导出Excel表格的需求,利用xlsx,file-saver很容易实现。后台需求变更,需要样式可控,字段显示顺序可控等需求。查阅大量资料,用xlsx-style插件可实现。
debian9 + Ghost 2.X + MySQL 搭建博客 • July 12, 2020
我发现有许多类似的文章,但是大多都是过时的或者有许多我并不认为是最好的做法。所以打算自己写篇教程,希望可以帮助到需要的人。
linux创建用户并给用户sudo权限 • July 12, 2020
我经常看到博客说只要改/etc/sudoers文件就可以了。虽然这种方法可行,但是这种方法不利于管理用户。最重要的是,这种方法很low。
linux+xampp服务器配置https证书 • July 12, 2020
linux+xampp服务器配置https证书,分步骤详细说明。
wordpress安装主题失败 • June 23, 2020
Wordpress搭建博客。但是坑难免还是要踩的,下面说一下此次采坑要点。 wordpress后台管理里面,我惊奇的发现不能安装自己喜欢的主题。弹窗要求输入ftp验证。而我输入了正确的ftp账户和密码,却“言而无信”的提示说无法连接到我的主机。
JavaScript this 的六道坎 • May 13, 2020
鉴于this风骚的运作方式,对this的理解是永不过时的话题,本文试图通过将其大卸六块来钉住这个磨人的妖精。
获取一周的开始时间与结束时间 • April 14, 2020
获取一天所属一周的开始时间和结束时间。
JavaScript 有必要缓存 for 循环中的 Array.length 吗? • March 18, 2020
先上笔者得到的结论:缓存 Array.lengh 对优化影响不大,甚至会减慢。
TypeScript 集合转换为交集 • January 16, 2020
本文深入聊聊 TypeScript 的一些高级特性,以实现集合转换为交集为主线。
TypeScript 函数泛型部分赋值 • January 11, 2020
本文聊聊如何用柯里化解决 TypeScript 函数泛型部分赋值的问题。
Web 可访问性整理 • November 20, 2019
web可访问性整理。
实现一个有趣的 RxJS Operator • October 21, 2019
本文聊聊如何实现一个按 id 切换的 switchMap 。
SVG Symbol 和 Sprite 的好处和坑 • October 07, 2019
用 Symbol 来把 SVG 合并到一个文件几乎是现在最流行的用法
配置 SplitChunksPlugin 减少 Webpack 打包体积 • September 30, 2019
本文聊聊如何根据项目对 SplitChunksPlugin 进行细调从而减少 Webpack 打包体积。
JavaScript 继承总结 • September 24, 2019
总结js继承的几种形式和场合。
真·复用组件 - React hooks 结合 RxJS 封装异步逻辑 • September 22, 2019
本文聊聊 React hooks 如何改变旧有的开发思路,以及如何利用 hooks 结合 RxJS 将异步逻辑封装到组件中,从而轻松复用功能更复杂的组件。
ES6 随笔:函数与块级作用域 • August 21, 2019
阅读 Kyle Simpson 《You don't JS: Scope and Closures》第三章过程中的一些随笔
Arch Linux 使用 iptables 管理网络 • June 30, 2019
出门在外,有时需要流量上网,本文聊聊如何使用 iptables 只允许特定的程序连接网络。
定位与拖动 iframe • June 26, 2019
用户选择一段文本之后,会在鼠标附近显示一些元素。 这个初看很简单,监听一个 mouseup 事件,获取 clientX 和 clientY 就行。但这个方法有个缺陷:iframe 里的鼠标事件不会传到父窗口上。解决方法也很简单,就难在把它们都联系起来。
轻松写测试:编写 JSX 直接生成 DOM 元素 • June 24, 2019
在编写测试时有时候我们需要生成大量不同 DOM 元素来进行测试。本文将聊聊几种生成 DOM 元素的方式以及它们的优劣势。
搭建 Karma+Mocha+Chai 测试 TypeScript 项目 • June 18, 2019
测试是软件开发中重要的一环,有了测试项目开发起来大脑负担减少,心里踏实,许多没想到的边界条件也能一一揪出。Karma+Mocha+Chai 是经过时间考验的经典测试组合,具有较高的灵活性,非常值得研究学习。本文将从零开始搭建,同时配合 TypeScript 进行测试。
纯 CSS 实现浮动介绍 • June 18, 2019
它是使用 JavaScript 响应鼠标事件并计算高度和显示。作为 CSS 洁癖,我第一反应当然是先考虑用 CSS 实现。
JavaScript 音频变速保持音调 • June 06, 2019
在上篇文章中我们提到如何结合 React 为音频显示波形与区间循环播放,但有时候音频说话太快了,我们需要放慢下来听,所以本文我们来看看如何实现音频的变速,以及如何处理变速时声调出现的奇怪变化。
搭建 Gatsby 博客五:实现草稿模式和上下篇 • May 13, 2019
本文通过实现草稿模式和上下篇来进一步了解 Gatsby 的 Node APIs。
搭建 Gatsby 博客四:兼容 Jekyll 式路径 • May 05, 2019
前面已经让博客顺利运行起来,接下来就是实现一些个性化的功能。本文通过实现兼容 Jekyll 式路径来了解 Gatsby 的 Node APIs。
搭建 Gatsby 博客三:使用 Netlify CMS 管理文章 • April 26, 2019
一个博客如果不能方便地编写文章将非常打击作文欲望。本文将谈谈如何在 Gatsby 中配置 Netlify CMS 管理文章。
搭建 Gatsby 博客二:使用 GraphQL 管理资源 • April 22, 2019
Gatsby 默认使用了 GraphQL 来管理资源。本文将谈谈这么做的优点以及当中的一些坑。
搭建 Gatsby 博客一:为什么选 Gatsby • April 18, 2019
Gatsby 是一个 React 建站框架。在使用 Gatsby 搭建了一个小博客后,非常喜欢其管理数据的方式。然而,尽管上手可以非常快,对于刚开始用 Gatsby 的人来说,理解其基本思想是个小门槛。官方提供了非常详细的教程,甚至有点过于基础了,本文面向有 React 基础,没有使用过 Gatsby 和 GraphQL 的读者分享一份笔记。
JavaScript 创建对象总结 • March 20, 2019
JavaScript 是一门灵活的语言,就创建对象而言就有各种各样的方法。本文是《JavaScript高级程序设计》(第3版)的笔记,主要是针对各种创建对象方法之间的关系、优缺点进行梳理。每种方法相关的其它细节不是本文重点,我会标记页码。
React Native 搭配 MobX 使用心得 • December 13, 2018
MobX 是一款十分优秀的状态管理库,不但书写简洁还非常高效。当然这是我在使用之后才体会到的,当初试水上车的主要原因是响应式,考虑到可能会更符合 Vue 过来的思考方式。然而其实两者除了响应式以外并没有什么相似之处。
Manacher 马拉车算法 • November 21, 2018
马拉车算法可以在线性时间复杂度内求出一个字符串的最长回文字串。其核心思想跟 KMP 相似,即反复利用已掌握的情况。
如何文明提交代码 • September 24, 2018
程序员最烦的几件事:写测试,变量命名,还有填代码提交信息(commit message)。翻几个开源项目遍马上可以回味那作文凑字数的青春时光。 其实 commit message 的作用远不止如此,经过简单的配置便可无痛成为代码提交的文明公民。 Commit Message…
CSS Font 单位 • September 12, 2018
了解 CSS font 各个单位的意义,搜了一些资料。
React 黑魔法之 Portal + SyntheticEvent + iframe • July 15, 2018
在实现划词扩展的时候,查词面板等模块需要植入到源网页,为了更方便地隔离样式污染,植入的模块均使用了 <iframe> 包装。在前一个 Vue 实现的版本 Saladict 5 中,有几个不太舒服的小小小小地方: <iframe> 内外事件不通。 <iframe> 内外环境不一样,变量不能共用,需要 postMessage 交流。 Vue 组件必须要有一个根元素,且 v-if…
选中鼠标附近的文字 • June 22, 2018
选中鼠标附近的文字摸索记录。
深入 React Render Props 模式 • April 03, 2018
随着 React 的新 Context API 出来,render props 模式再次发挥重要作用。本文将尝试深入理解 render props 的利弊,并结合高阶组件寻找合适的处理方式。 基础 先看官方给出的简单例子: 加个 DataProvider 的简单实现, 这里是将一个返回 React 元素的函数传给 DataProvider 的 props.render,DataProvider…
阅读 jQuery 源码的18个惊喜 • March 06, 2018
Jquery作为从前统治网页的框架,看看源码,对深入去学习js很有启发。
理解 RxJS :四次元编程 • February 16, 2018
RxJS 属于响应式编程,其思想是将时间看作数组,随着时间发生的事件被看作是数组的项,然后以操作数组的方式变换事件。其强大的地方在于站在四维的角度看问题,这就像是拥有了上帝视野。
Sublime Text 2 Emmet 快捷键整理 • December 04, 2017
整理一些常用的快捷键,助力开发。
Git 分支模式笔记 • November 06, 2017
Git 开发流程方面的资料,做一下笔记。
Sublime Text 2 快捷键整理 • October 31, 2017
基本涵盖绝大部分情况了,鼠标跳跃多选可以利用标签代替,或者用回鼠标(毕竟一般使用频率不高)。
获取 DOM 里所有图片(包括背景和iframe) • March 09, 2017
在写浏览器扩展什么的时候可能会用上。 获取 DOM 里的图片主要是在这几个地方里面找: <img> 元素, background-image CSS 属性和 <iframe>。 img 如果只想获取 <img> 的图片,有两种方式: 直接获取所有 img 标签: 还可以用 document.images: background-image 获得背景图片需要查看所有 DOM…
深入 ES2015 默认参数 • January 22, 2017
S2015 为函数加入了方便的默认参数语法。