- 博客(53)
- 收藏
- 关注
RSS订阅
原创 不要再用axios 和 fetch了，试试更强大的up-fetch
假如你已经厌倦了在每个项目中都编写 fetch 封装程序，那么，up-fetch 或许就是你的救命稻草。up-fetch 是一个仅有 1kb 大小，同时集成了一些合理配置的Fetch API 工具。
2024-04-21 10:42:32
998
原创 真懂了？自定义实现 Javascript 中的 call、apply 和 bind 方法
通常情况下，在调用函数时，函数内部的 this 的值是访问该函数的对象。利用callapply和bind，你可以在调用现有函数时将任意值分配给this，而无需先将函数作为属性附加到对象上。这使得你可以将一个对象的方法用作通用的实用函数。
2024-04-19 22:04:37
521
原创 如何使用CSS构建一个瀑布流布局
瀑布流布局是一种常见的网页布局方式，其中元素以不同的大小排列，且行与列之间没有不均匀的间隙。在瀑布流布局中，即使某一行或列中的元素较短，下一个元素也会占据空间。
2024-04-06 19:19:12
444
原创 答：一道价值25k的蚂蚁金服异步串行面试题
原题： 一道价值25k的蚂蚁金服异步串行面试题const log = console.log;const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));const subFlow = createFlow([() => delay(1000).then(() => log("c"))]);createFlow([ () => log("a"), () => l
2020-08-15 22:42:06
544
翻译 【译】Git Commit Message 格式约定
原文链接目的可以自动生成 CHANGELOG;可以忽略通过git bisect生成的commit message;为浏览提交历史提供更清晰的格式；生成 CHANGELOG在更改日志中使用这三个部分：新功能、bug修复、非后向兼容变更（breaking change）。在发布版本时，这三个部分的内容可由脚本生成，并指向相关commit的链接。当然，也可以在实际发布之前基于脚本生成骨架，手动编辑CHANGELOG的内容。查看自上次发布以来所有提交主题（提交消息中的第一行）的列表：gi.
2020-08-07 15:25:44
402
原创 Koa源码笔记
Koa是基于Node.js的web框架，利用它可以很快搭建起一个http服务。本来是要利用它验证下http协议中某些细节问题，但是发现源码不多，就顺带看了下。Koa作为一个第三方模块，对外仅暴露了 Application和HttpError。 我们仅讨论Application（HttpError实际为第三方模块，用于给Koa添加自定义的http错误处理方法）。Application是一个class可看做Koa自身，先看下Koa实例上有哪些方法：上面的这些方法除了inspect和toJSON这两个.
2020-05-21 14:15:45
424
原创 2019 JS内功修炼之读jQuery源码
引言：2019年，react hooks成功上位，vue3.0发布alpha版，TS使用率的飞速增长，以及大量前端开发工具使用体验的大幅优化和提高等等让越来越多的开发者吐槽前端学不动了的时候，最好的应对方式便是对基础概念的掌握。内功足够强大，才能做到不被别人牵着鼻子走。阅读开源代码是一个很好的方式，首先率选择了jQuery便是里面的内容没有太多足够抽象的设计思想。更多的是对于基础内容的覆盖。同时...
2020-01-05 19:33:52
256
原创 探究JavaScript中的valueOf和toString
JS 中的类型JS中的类型分为两大类： primitive和object。primitive： null, undefined, Number, String, Boolean, Symbol。object：不是primitive类型的值，都是object类型。JS是非严格类型的语言在JS中存在大量的数据隐式转换，例如 1 + 'a'。对于primitive类型，在不同类型之间有明确的转...
2020-01-05 17:03:21
135
原创 JavaScript prototype 原型链
几个概念构造函数： 构造函数实际上是一个普通函数，通过new操作符，可以利用构造函数快速创建对象；prototype：每个构造函数自身上都会有一个prototype属性，该属性值为一个对象，这个对象具有一个constructor属性，constructor指向构造函数自身；实例： 通过构造函数创建的对象，可以看做是该构造函数的实例；__proto__：通过构造函数创建的每个对象上面，都会...
2019-07-01 20:36:02
115
原创 面试题 纯CSS实现一个自适应的正方形
要求：正方形；宽度或高度有一个是100%；自适应；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
2019-06-19 20:58:09
556
原创 CSS揭秘之多重边框
多重边框的两种实现方案：border-shadowoutline<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
2019-06-09 21:33:24
129
原创 元素总是居中且高度为宽度一半
有一个元素element, 实现如下需求：元素e水平垂直居中元素e水平方向与父元素保持10px间距元素e的高度是宽度的一半<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...
2019-04-26 09:09:11
657
原创 初窥AST
AST是什么AST(Abstract Syntax Tree)，抽象语法树， 是程序的抽象意义表示。意味着跟语言的具体文法无关，利用抽象语法树可以进行程序的处理和转换。例如更改函数名称，语法转换甚至不同语言间的转换。AST的一个示例：AST的各种应用场景编译器（compilor）DOMJS引擎构建工具webpack依赖查询treeshakingbabelJ...
2019-02-24 16:43:03
221
原创 利用clear清除浮动的一些问题
下面这段代码是用来清除浮动带来的高度塌陷问题.clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden;}Question 1: 上面的代码的能够实现清除浮动的问题吗？Answer： Can’t. 因为clear属性只...
2019-01-17 22:42:00
452
原创 CSS2中盒模型与布局的一些概念关系
CSS的一些名词和概念用来帮你更明确地去描述HTML/CSS世界的事物。box在CSS中，一个元素就可以看作一个box。具体信息可以参考盒模型的解释，这里暂且不作展开。containing blocksBox的位置和大小时根据一个称为containing blocks的边界进行计算的。block-level elements 和 block boxesblock-level elem...
2019-01-06 17:24:06
348
原创 CSS三角形&&containing block
CSS浏览用CSS画一个三角形一个红色的三角形<style> .bottom-triangle { width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right:...
2018-11-11 22:36:40
149
原创 CSS中的层叠上下文
CSS中的层叠上下文在页面上z轴方向（垂直于页面的方向），如果存在多个元素，那么这些元素间的覆盖关系是啥？遵循的规则是啥？这就是这篇文章要讲述的内容。前提声明： 不特别说明的话，文中在提到多个元素的位置关系时，均默认这些元素在Z轴上存在重叠关系。什么是层叠水平什么是层叠上下文层叠上下文（stacking context），可以理解为一个对象/环境。跟 BFC（块级格式化上下文）很接近，...
2018-11-07 06:33:49
496
原创 面试题：清除浮动的三种方式及其原理
清除浮动的三种方式及其原理浮动元素的特性浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。浮动元素带来的问题因为浮动元素脱离文档流，所以对于其处于正常文档流中父元素，无法获知其高度，导致父元素自身的高度塌陷（失去浮动元素占据的高度）。清除浮动的三种方式设置float<div style="float: left;"> <div ...
2018-11-05 17:55:33
12654
原创 前端面试题：CSS中的选择器权重
CSS中选择器优先级的权重计算先看一段代码，如下： &amp;lt;style&amp;gt; a{ color: red; } #box a{ color: green; } [class=&quot;box&quot;] a{ color: gold; } .box a{ color: brown; } ...
2018-11-04 17:19:32
2168
原创 一道用hasOwnProperty给数组去重的面试题
hasOwnPropertyhasOwnProperty是javascript中用于检测对象是否包含某个属性的方法，返回一个布尔值。var o = { a: 1};console.log(o.hasOwnProperty('a')); // trueconsole.log(o.hasOwnProperty('b')); // false有一个用hasOwnProperty实现数组去重的...
2018-11-04 13:33:08
2025
1
原创 读《码农翻身》
读《码农翻身》什么是线程？线程属于进程，与该进程中的其它线程共享该进程的资源（变量、指令等）。线程可以理解为计算机中处理任务的最小单位。线程有三个状态： 就绪、运行、等待。理论上，线程在被创建并执行完分配给它的任务后就会被销毁。所以线程只有这三个状态。所以，线程池中的线程不算在内。因为处于线程池中的线程实际上是自由状态，处于等待分配任务状态。而前面讲到的三个状态是针对带有任务的线程而言。...
2018-10-28 21:46:14
222
原创 MongoDB 初步教程
Install系统基于Linux CentOS6.x离线包安装方式yum安装方式离线包安装方式下载安装包 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel62-4.0.3.tgz；解压缩 tar -zxvf mongodb-linux-x86_64-rhel62-4.0.3.tgzmv mongodb...
2018-10-25 17:46:24
134
原创 ES7(ES2016)中的Decorator
Decorator，字面意思是修饰器。用来修饰啥呢？ 类。先看一段代码index.js：let readOnly = function(target, name, descriptor){ descriptor.writable=false; return descriptor}class ClassA { @readOnly boo() { ...
2018-10-19 12:26:12
472
原创 ES6中的Generator
ES6中GeneratorGenerator是ES6一个很有意思的特性，也是不容易理解的特性。不同于let/const提供了块级作用域这样明显的目的，这玩意儿被搞出来到底是干嘛的？首先我们需要明确一个问题，在JavaScript中，任何一个函数只要开始执行，便无法停止下来直到执行完成（别跟我提debug，你见过哪个用户在使用产品的还得开个debug调试你的代码）。but，Generator提...
2018-10-16 16:52:43
317
原创 ES6中的let/cont、解构赋值和迭代器Interator
ES6中的一些新特性这是进入十月份的第一篇笔记（\笑哭）。引入let/const的目的ES5中的作用域分为：全局作用域 和 函数作用域。并没有块作用域的概念，ECMAScript 6(简称ES6)中新增了块级作用域。块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。ES5创建作用域的两种方式：立即执行函数try catch语句在ES6中引入let/co...
2018-10-15 16:52:19
448
原创 JavaScript通过Promise实现sleep方法
主要还是为了练习Promise， async/await 的使用(async function(){ /** * s 休眠时长， 单位：秒 */ function sleep(s){ s = s || 0; s = parseInt(s) * 1000; let now = +new Date(); ...
2018-10-15 10:02:00
7544
1
转载 无头浏览器 和 Puppeteer
什么是无头浏览器无头浏览器即headless browser，是一种没有界面的浏览器。它有浏览器该有的一切功能，除了界面。可以通过命令进行浏览器内的各种操作。我们日常使用浏览器的步骤为：启动浏览器、打开一个网页、进行交互。在无头浏览器中，我们可以通过程序或脚本来执行以上过程，从而模拟出真实的浏览器使用场景。无头浏览器应用场景有了无头浏览器，我们就能做包括但不限于以下事情：对网页进行截图...
2018-09-18 22:32:53
3815
2
翻译 CSS Grid布局完全指南
原文：A Complete Guide to GridCSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。 你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来使用网格布局。引言CSS网格布局（又名“网格”）是一个二维的基于网格的布局系统，其...
2018-09-13 19:19:50
1267
转载 FlexBox布局完全指南
FlexBox布局Flex即弹性盒模型, 该布局方案由W3C于2009年提出。该布局模型旨在提供一种更有效的方式来进行布局，对齐和分配容器中的项目之间的空间，即使这项对象的大小未知或者会动态变化（这也是之所以叫Flex的原因）。FlexBox的思想：赋予容器更多的能力，可以修改子项的宽高来最完美的填充可用空间。Flex容器可以是子项变大填充剩余可用空间或者缩小子项防止溢出可用范围。容...
2018-09-13 16:54:43
157
原创 编写一个Chrome插件
也可说是突然萌生出来的一个想法： 编写一个Chrome插件。前段时间发现Chrome浏览器占用的系统内存相当的大。其实也对，随着现代web程序的功能日益强大和丰富，浏览器吃内存是必然的。连office都有在线版的了，对比一下office2016的安装包大小（2.41G），想想当初的windows XP安装包大小也才700M。所以可想而知，在线版的office承载的功能之强大。这么一看，感觉浏览...
2018-09-11 16:10:48
466
原创 CORS——一种新的跨域解决方案
一种新的跨域解决方案：CORS（跨域资源共享）。它是W3c的工作草案，定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用 自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。CORS需要浏览器和服务器同时支持。目前，所有主流浏览器都支持该功能，IE浏览器不能低于IE8（IE10提供了对规范的完整支持；但在IE8、IE9中，CORS...
2018-09-09 15:59:42
232
原创 前端中的跨域
同源策略？同源策略/SOP（Same origin policy）是一种约定，属于浏览器的一个安全功能。不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。基于这个策略，有以下几种限制：cookie：js不能读取其它域下的cookie，否则你的登录信息，安全信息就泄露了；Storage和Index...
2018-09-09 15:54:28
128
原创 初探Go语言
GO语言Go（通常称为Golang）是由Google于2009年由Robert Griesemer，Rob Pike和Ken Thompson（C语言作者之一，UNXI创建者）创建的一种编程语言。Go是一个静态类型、编译型语言，很像C。具有 存储器的安全，垃圾回收，结构输入和 CSP式的并发特性。它的编译器，工具，和源代码都是免费和开源的。Go是从2007年末由Robert Griesem...
2018-09-07 15:12:49
202
原创 Play Arch Linux
Play Arch LinuxArch Linux 是什么 一个 轻量级、易定制的Linux。适用对象ArchLinux 适用于乐于自己动手的用户，他们愿意花时间阅读文档，解决自己的问题。Arch Linux的安装借助vmware虚拟机安装Arch Linux。磁盘大小建议 20G，不要小于10G内存大小建议 2G以上CPU数量简易 2+首...
2018-08-26 22:51:13
208
转载 再写Node基础（读《Node.js 来一打C++扩展》）
NPM的作用： Node.js程序依赖包的发布、管理和安装。CommonJS规范requirerequire是一个函数，参数是模块标识符，返回值是所引用模块暴露给外部使用者的内容。直白一点讲：一个模块定义文件module1.jsmodule.exports={ a:1, f: function(){ console.log('f'...
2018-08-24 20:21:50
1467
翻译 不要阻塞事件循环（或工作池）
原文: Don’t Block the Event Loop (or the Worker Pool)你应该阅读本指南吗？如果您编写比命令行脚本更复杂的程序，那么阅读本文可以帮助您编写性能更高，更安全的应用程序。在编写本文档时，主要是基于Node服务器。但里面的原则也适用于其它复杂的Node应用程序。在没有特别说明操作系统的情况下，默认为Linux。TL; DRNode.j...
2018-08-13 21:08:36
668
原创 Node基本原理学习
node是什么 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。 Node使用包管理器NPM。第一句话 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 运行环境， 不是一门语言，不是一个框架。只是能够作为Ja...
2018-07-28 11:29:18
1307
原创 H5中的Canvas
Forturn’s wheel takes you very high and then throws you very low, and there is nothing you can do but face the turn of it with courage.Canvas设置<canvas>元素的 宽度时，注意不要使用style属性，直接通过指定 <...
2018-07-23 15:06:33
1571
原创 JS中的事件
事件事件是JavaScript跟HTML交互实现的一种机制。在文档或浏览器进行用户交互或其它的某些特定瞬间，会触发事件，然后JavaScript响应这些事件。在设计模式上看，这类似于观察者模式。JavaScript 和 HTML 之间是 松耦合的。到今天为止，虽然不同的浏览器（IE9+、Chrome、Firefox、Opera、Safira）基本上都实现了 “DOM2级事件” 的 核心部分...
2018-07-16 16:04:37
208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人