- 博客(145)
- 收藏
- 关注
RSS订阅
原创 前端动画专题（三）：撩人的按钮特效
本文来自「心谭博客」的《动画设计·按钮特效》，更多文章放在了Github欢迎交流和Star特效一览滑箱：果冻：脉冲：闪光：气泡：滑箱特效效果图原理因为 button 元素可以使用 before/after 伪元素，所以借助伪元素，可以实现动态图中的遮盖层。为了避免回流重绘，滑箱的运动方向是垂直方向，所以使用scaleY属性。对于动画的方向，需要借助trans...
2019-08-02 10:38:30
673
1
原创 JavaScript设计模式实践：18份笔记、例子和源码
背景介绍之前在阅读《JavaScript设计模式和开发实践》这本书的时候，收货颇丰，学习了设计模式在很多场景下的应用。但也是因为书上场景过多，所以当记不清某一种设计模式的时候，翻书温习复杂案例的成本是相对较高的。有时候，只需要一段经典、简洁的demo就可以迅速回顾起精髓，在快速业务开发中，这是个比较经济的做法。除此之外，当主要工作语言发生变化的时候（例如：js -> python），简...
2019-04-11 14:48:04
724
原创 webpack4 系列教程: 前言
1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的是，它为前端工程化提供了最好支持。vue、react等大型项目的脚手架都是利用 webpack 搭建。所以，学习webpack可以帮助开发者更好的进行基于javascript语言的开发工作。2. 怎么学习webpack?如果一个新手...
2018-07-31 22:57:37
705
原创 深入Nodejs模块fs - 文件系统操作
node 的fs文档密密麻麻的 api 非常多，毕竟全面支持对文件系统的操作。文档组织的很好，操作基本分为文件操作、目录操作、文件信息、流这个大方面，编程方式也支持同步、异步和 Promise。本文记录了几个文档中没详细描写的问题，可以更好地串联fs文档思路：文件描述符同步、异步与 Promise目录与目录项文件信息stream???? 关注公众号“心谭博客” / ???? 前往 xxo...
2020-01-29 11:03:38
362
原创 有趣的NodeJS模块 - os
读了 os 模块的文档，研究了几个有意思的问题：???? 识别操作系统平台???? 理解和计算“平均负载”???? 理解和计算“cpu 使用率”???? 理解和计算“内存使用率”???? 查看运行时间???? 关注公众号“心谭博客” / ???? 查看原文： xxoo521.com / 欢迎交流和指正识别操作系统平台nodejs 提供了os.platform()和os.type()，可以用来识别操作系统平台。推荐...
2020-01-19 13:20:44
460
原创 有趣的NodeJS模块 - Buffer
Buffer 作为 nodejs 中重要的概念和功能，为开发者提供了操作二进制的能力。本文记录了几个问题，来加深对 Buffer 的理解和使用：认识缓冲器如何申请堆外内存如何计算字节长度如何计算字节长度如何转换字符编码理解共享内存与拷贝内存???? 关注公众号“心谭博客” / ???? 查看原文： xxoo521.com / 欢迎交流和指正认识 Buffer（缓冲器）Buffer ...
2020-01-18 21:21:53
373
原创 有趣的Nodejs模块之events
读了 events 模块的文档，研究了几个有意思的问题：????️ 事件驱动模型????️ 优雅的错误处理????️ 监听器器队列顺序处理????️ 内存管理与防止泄漏引用/转载 请声明出处：原文链接: xxoo521.com事件驱动模型Nodejs 使用了一个事件驱动、非阻塞 IO 的模型。events模块是事件驱动的核心模块。很多内置模块都继承了events.EventEmitter。自己无需...
2020-01-10 15:51:25
268
原创 剑指offer - 二进制中1的个数 - JavaScript
专注前端与算法的系列干货分享，欢迎关注(¬‿¬)：「微信公众号：心谭博客」| xxoo521.com | GitHub题目描述输入一个整数，输出该数二进制表示中 1 的个数。其中负数用补码表示。解法 1: 判断每一位依次判断数字的每一位，统计其中 1 的数量。整体思路如下：数字先和 1 相与，结果为 0 说明改位是 1，结果为 1 说明该位是 1将 1 左移一位，再和数字相与。...
2020-01-02 22:43:45
199
原创 剑指offer - 青蛙跳台阶 - JavaScript
专注前端与算法的系列干货分享，欢迎关注(¬‿¬)：「微信公众号：心谭博客」| xxoo521.com | GitHub题目描述一只青蛙一次可以跳上 1 级台阶，也可以跳上 2 级。求该青蛙跳上一个 n 级的台阶总共有多少种跳法（先后次序不同算不同的结果）。解法 1: 斐波那契数列这题其实就是在求斐波那契数列。理解起来也很简单。假设跳到 n 级台阶有 f(n)种方法。根据题目，青蛙在跳...
2020-01-02 22:42:03
240
原创 剑指offer - 斐波那契数列 - JavaScript
专注前端与算法的系列干货分享，欢迎关注(¬‿¬)：「微信公众号：心谭博客」| xxoo521.com | GitHub题目描述大家都知道斐波那契数列，现在要求输入一个整数 n，请你输出斐波那契数列的第 n 项（从 0 开始，第 0 项为 0）。n<=39。解法 1: 数学定义根据数学定义：f(n) = f(n - 1) + f(n - 2)。最初始情况是f(0) = 0和f(1...
2020-01-02 22:39:57
296
原创 剑指offer-旋转数组的最小数字-JavaScript
题目描述把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个非递减排序的数组的一个旋转，输出旋转数组的最小元素。例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转，该数组的最小值为 1。NOTE：给出的所有元素都大于 0，若数组大小为 0，请返回 0。解法 1:暴力法遍历一次，直接找到比较出最小的数字。时间复杂度是 O(N)，空间复杂度是 O(1)。...
2019-12-28 22:11:27
178
原创 剑指offer - 用两个栈(队列)实现队列(栈) - JavaScript
专注前端与算法的系列干货分享，欢迎关注(¬‿¬)：「微信公众号：心谭博客」| xxoo521.com | GitHub题目描述用两个栈来实现一个队列，完成队列的 Push 和 Pop 操作。 队列中的元素为 int 类型。解法 1: 利用栈的特性栈的特性是：后入先出。根据题目提示，使用 2 个栈即可。一个栈inStack用来存储插入队列的数据，一个栈outStack用来从队列中取出数...
2019-12-25 17:48:40
589
原创 剑指offer - 重建二叉树 - JavaScript
题目描述输入某二叉树的前序遍历和中序遍历的结果，请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6}，则重建二叉树并返回。解法 1: 递归首先前序/后序遍历 + 中序遍历可以重建二叉树。题目考察的就是前序+中序来重建二叉树，后序+中序的思路是类似的。例子与思路假设有二...
2019-12-21 23:50:18
161
原创 剑指offer - 从尾到头打印链表 - JavaScript
题目描述输入一个链表，按链表从尾到头的顺序返回一个 ArrayList。解法 1: 栈题目要求的是从尾到头。这种“后进先出”的访问顺序，自然想到了用栈。时间复杂度 O(N)，空间复杂度 O(N)。// ac地址：https://www.nowcoder.com/practice/d0267f7f55b3412ba93bd35cfa8e8035// 原文地址：https://xxoo52...
2019-12-21 23:49:13
150
原创 剑指offer - 二维数组中的查找 - JavaScript
题目描述在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。解法 1：暴力法遍历数组中的所有元素，找到是否存在。时间复杂度是 O(N^2)，空间复杂度是 O(1)// ac地址：https://www.nowcoder.com/practice/ab...
2019-12-20 11:47:57
172
原创 剑指offer - 替换空格 - JavaScript
题目描述请实现一个函数，将一个字符串中的每个空格替换成“%20”。例如，当字符串为 We Are Happy.则经过替换之后的字符串为 We%20Are%20Happy。解法 1：正则表达式第一反应肯定正则表达式，在真正项目中，肯定也会选用正则来做匹配和替换。// ac地址：https://www.nowcoder.com/practice/4060ac7e3e404ad1a894ef3e...
2019-12-20 11:45:19
157
原创 「超全」手写Promise的相关方法
原文发布在：手写Promise的相关方法。摘要Promise 作为 JS 社区的异步解决方案，为开发者提供了.then()、Promise.resolve()、Promise.reject()等基本方法。除此之外，为了更方便地组合和控制多个的 Promise 实例，也提供了.all()、.race()等方法。本文会在 Promise 的基本方法上，手动实现更高级的方法，来加深对 Promis...
2019-12-13 16:45:59
255
原创 一文说清「VirtualDOM」的含义与实现
本文来自《一文说清VirtualDOM的含义与实现》，如果觉得不错，欢迎给Star Github仓库。摘要随着 React 的兴起，Virtual DOM 的原理和实现也开始出现在各大厂面试和社区的文章中。其实这种做法早在 d3.js 中就有实现，是 react 生态的快速建立让它正式进入了广大开发者的视角。在正式开始前，抛出几个问题来引导思路，这些问题也会在不同的小节中，逐步解决：????️...
2019-11-30 16:19:20
229
原创 《MongoDB实战》读书笔记
在国庆前后看了《MongoDB实战》，结合上半年工作中的云数据库的工作和自己使用mongo的一些的经验，做一下总结。本文来自「心谭博客」的《基础、编码和优化》和《进阶：索引、复制和分片》，更多文章放在了Github仓库。欢迎Star。MongoDB特性和介绍1. 简介MongoDB的特点：扩展策略、直观的数据模型。在mongodb中，编程语言定义的对象能被“原封不变”地持久化，消除对象...
2019-10-12 10:28:24
335
原创 前端动画专题（二）：输入框特效
本文来自「心谭博客」的《动画设计·输入框特效》，更多文章放在了Github欢迎交流和Star特效一览划线动态：动态边框：划线动态效果图原理和代码:before 和 :after伪元素指定了一个元素文档树内容之前和之后的内容。由于input标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。<div> <inpu...
2019-07-31 19:38:36
464
原创 CSS动画设计专题（一）：字体特效
本文来自《动画设计·字体特效》，更多文章放在了Github欢迎交流和Star特效一览划线动态：背景高亮：色块进出：划线动态效果图原理首先，利用::after和::before就可以画出上下两条线，所以只需要一个 dom 元素即可。其次，对于鼠标移入的动画，要给上面两个伪元素设置:hover选择器。最后是处理动画方向。我们以上面的线条为例，在鼠标移入的时候，是从右到...
2019-07-29 19:00:36
1180
原创 深入koa源码（二）：核心库原理
最近读了 koa2 的源码，理清楚了架构设计与用到的第三方库。本系列将分为 3 篇，分别介绍 koa 的架构设计和 3 个核心库，最终会手动实现一个简易的 koa。这是系列第 2 篇，关于 3 个核心库的原理。本文来自《心谭博客·深入koa源码：核心库原理》所有系列文章都放在了Github。欢迎交流和Star ✿✿ ヽ(°▽°)ノ ✿is-generator-function：判断 ge...
2019-06-24 17:27:40
192
原创 深入koa源码（一）：架构设计
本文来自《心谭博客·深入koa源码：架构设计》前端面试、设计模式手册、Webpack4教程、NodeJs实战等更多专题，请来导航页领取食用所有系列文章都放在了Github。欢迎交流和Star ✿✿ ヽ(°▽°)ノ ✿最近读了 koa 的源码，理清楚了架构设计与用到的第三方库。本系列将分为 3 篇，分别介绍 koa 的架构设计和 3 个核心库的原理，最终会手动实现一个简易的 koa。ko...
2019-06-21 16:46:37
283
原创 「翻译」逐步替换Sass
本文来自心谭博客·「译文」逐步替换Sass，最新文章请见导航页，欢迎交流✿✿ヽ(°▽°)ノ✿翻译说明这是一篇介绍现代 css 核心特性的文章，并且借助 sass 进行横向对比，充分体现了 css 作为一门设计语言的快速发展以及新特性为我们开发者带来的强大生产力。第一次尝试翻译技术文，为了让文章更通俗易懂，很多地方结合了文章本意和自己的说话风格。另外，时间有限水平有限，难免有些失误或者翻译...
2019-06-19 14:50:54
186
原创 基于ServerLess的极简网页计数器：源码分析与实践
这几天基于支持HTML5无感认证的ServerLess平台开发了一款博客、门户网站等web平台常用的PV统计工具：page-counter 。主要用到的技术是js+webpack。回首看来，解决了以下几个比较有意思的问题：如何设计代码，用统一的方式支持多个ServerLess平台？如何架构项目，使得其支持CDN和npm两种方式引入？如何精简源码，源码大小控制在4kb？如何借助webp...
2019-05-18 22:14:04
384
原创 NodeJS实现简易区块链
之前由于课程要求，基于Nodejs做了一个实现简易区块链。要求非常简单，结构体记录区块结构，顺便能向链中插入新的区块即可。但是如果要支持多用户使用，就需要考虑“可信度”的问题。那么按照区块链要求，链上的数据不能被篡改，除非算力超过除了攻击者本身之外其余所以机器的算力。想了想，就动手做试试咯。
2019-05-03 13:58:27
3650
原创 【笔记】微信网页登录逻辑与实现
现在的网站开发，都绕不开微信登录（毕竟微信已经成为国民工具）。虽然文档已经写得很详细，但是对于没有经验的开发者还是容易踩坑。所以，专门记录一下微信网页认证的交互逻辑，也方便自己日后回查：加载微信网页sdk绘制登陆二维码：新tab页面绘制 / 本页面iframe绘制用户扫码登陆，前端跳入回调网址回调网址进一步做逻辑处理，如果是页内iframe绘制二维码，需要通知顶级页
2019-04-29 13:57:47
686
原创 HTML5原生拖放事件的学习与实践
前言之前学习了HTML5的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。具体实现的效果也很简单：元素可以在容器中任意拖动，元素被移入容器的时候，还会有相关样式的改变已达到更好的展示效果。例子基本运用了拖放事件的全部事件，并且尽量简洁的展示了出来。特此记录。
2019-04-20 22:08:40
166
原创 《前端面试手记》之ES6重难点整理
? 内容速览 ?let和constSet和MapGenerator和yieldPromise、async/await介绍Proxy代理器…?查看全部教程 / 阅读原文?let和constES6新增了let和const，它们声明的变量，都处于“块级作用域”。并且不存在“变量提升”，不允许重复声明。同时，const声明的变量所指向的内存地址保存的数据不得改变：对于简单类型的...
2019-04-19 20:17:46
299
原创 《前端面试手记》之JavaScript基础知识梳理(下)
? 内容速览 ?实现ES5继承的4种方法原型和原型链作用域和作用域链Event Loop执行上下文闭包的理解和分析关注微信公众号 「心谭博客」，前往 「xin-tan.com」专注前端与算法的系列干货分享，欢迎关注(¬‿¬)ES5继承题目：ES5中常用继承方法。方法一：绑定构造函数缺点：不能继承父类原型方法/属性function Animal(){ thi...
2019-04-03 13:01:15
170
原创 《前端面试手记》之JavaScript基础知识梳理(上)
? 内容速览 ?普通函数和箭头函数的this原始数据类型及其判断和转化方法深浅拷贝及实现JS事件模型常见的高阶函数关注微信公众号 「心谭博客」，前往 「xin-tan.com」专注前端与算法的系列干货分享，欢迎关注(¬‿¬)普通函数和箭头函数的this还是一道经典题目，下面的这段代码的输出是什么？（为了方便解释，输出放在了注释中）function fn() { co...
2019-03-31 17:23:25
160
原创 《前端面试手记》之谈谈promise/async/await的执行顺序
? 内容速览 ?题目和答案输出解释再谈谈async/await最新的v8和谷歌浏览器的正确输出?查看全部教程 / 阅读原文?1. 题目和答案故事还是要从下面这道面试题说起：请问下面这段代码的输出是什么？console.log('script start')async function async1() { await async2() console.log('...
2019-03-22 23:53:28
401
原创 《前端面试手记》之常考的源码实现
? 内容速览 ?手动实现call/apply/bind实现一个完美的深拷贝函数基于ES5/ES6实现双向绑定instanceof原理与实现?查看全部教程 / 阅读原文?手动撸个call/apply/bind实现call来看下call的原生表现形式：function test(arg1, arg2) { console.log(arg1, arg2) console.l...
2019-03-20 23:14:34
273
原创 设计模式手册之状态模式
1. 什么是“状态模式”？状态模式：对象行为是基于状态来改变的。内部的状态转化，导致了行为表现形式不同。所以，用户在外面看起来，好像是修改了行为。Webpack4系列教程(17篇) + 设计模式手册(16篇)：GitHub地址博客主题推荐：Theme Art Design，“笔记记录+搭建知识体系”的利器。原文地址: 设计模式手册之状态模式2. 优缺点优点封装了转化规则，对于...
2019-03-11 13:54:48
153
原创 GPSR：贪婪转发与周边转发
博客原文地址：https://godbmw.com/passages/2019-03-02-gpsr/博客主题推荐：Theme Art Design，“笔记记录+搭建知识体系”的利器。这是之前学习《无线传感网络》这门课做的期末大作业，GPSR是"greedy perimeter stateless routing"的缩写。这是一种无状态的路由转发协议，巧妙地借助“贪婪转发”和“周边转发”有效...
2019-03-05 16:14:42
4716
1
原创 每天一个设计模式之装饰者模式
作者按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript和python两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式
2019-01-23 19:54:39
186
原创 每天一个设计模式之责任链模式
作者按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript和python两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式
2019-01-07 12:24:00
260
1
原创 每天一个设计模式之组合模式
作者按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript和python两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式
2018-12-15 18:41:01
171
原创 每天一个设计模式之命令模式
作者按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript和python两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式
2018-12-13 13:51:04
171
原创 每天一个设计模式之订阅-发布模式
博主按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript（靠这吃饭）和python（纯粹喜欢）两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式
2018-12-10 13:05:41
209
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人