- 博客(114)
- 收藏
- 关注
RSS订阅原创 迟来的回顾2019年
受时疫影响，回到北京已经三周了，今天才第一天来公司上班。坐在工位前摸着????，突然想起很久都没有更新博客了，来回顾下2019做了什么哪些事情吧。工作篇今年还在这家互联网医疗公司当偏前端的全栈。sql没少写，前端上vue写的比react多，react基本是删删改改的那种，没有什么从头搭建的项目了。不过给大家分享了一次react-hooks。少年看金庸，总见到“二者相互对照，XX豁然开朗”之类桥段。...
2020-02-25 12:13:56
494
1
翻译 CSS优先级规则：类型、来源、特异性、位置
css-cascade本文从类型、来源、特异性、位置四个方面描述了css的优先级规则。four level/type of the importance首先看类型，以下4种类型，重要性依次降低。transition (active)!importantanimation (active)normalorigin类型相同，看这个规则是在哪里规定的。websiteuser...
2020-02-24 17:49:30
388
原创 一文详解sass新特性——模块
1. 简介2. @import的缺点3. 模块化的核心@use3.1 @use的基本用法3.2 @use与@import的区别3.3 配置样式库的基础变量4. 给库开发者使用的利器@forward4.1 @forward的基本用法4.2 用show/hide控制成员是否可见4.3 给不同的子模块添加前缀5. sass内置模块6. 兼容性7. 迁移指南8. 参考资料简介...
2019-12-02 12:02:39
3098
1
原创 webpack中分割代码的三种方式
文章目录entry - 配置多入口、多页面splitChunks - 智能抽取公共代码dynamic-import - 按需动态加载tips - 踩坑小提示避免过度优化！结局官网教程：code-splitting最近在开发一个新的功能，需要在某一条件下引入新包，而之前的场景则完全不需要。这种情况下，动态加载+代码分割正可以派上用场。在动手之前，先看看官网是怎么说的吧。entry - 配置多入...
2019-10-10 16:48:12
2409
原创 typescript笔记
深入浅出typescript在Youtube上看视频学了一下typescript，主要为了接下来读源码方便。primitive类型的用小写。少用object/any。可以直接用[key: string]这样的方式去定义规范。interface Person { readonly sex: string; [key: string] : string | number;}cons...
2019-09-10 12:08:29
206
原创 vue-router源码解读
文章目录目录结构路由组件history与hash模式的实现如何拼装与install vue-router番外篇：如何用rollup打包插件/包vue-router是vue全家桶中的一员。当初学习的时候，因为内容比较简单，只是匆匆浏览了一下文档就开始对照api干活了，对history mode的实现也仅仅是知道用到了h5的history的方法。这次其实是为了看看vue-router是怎么用roll...
2019-07-24 16:25:48
414
原创 docker入门及常用命令
文章目录docker 是什么镜像是怎么来的从ducker hub上拉一个从Dockerfile生成用镜像run一个容器容器的网络模式常用命令docker builddocker rundocker exec 在运行的容器中执行命令docker 是什么Docker 是一个基于Go语言开源的应用容器引擎。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任...
2019-07-15 17:11:14
203
原创 commonjs与es6 中的模块化机制有什么区别
CommonJs导出的是变量的一份拷贝，ES6 Module导出的是变量的绑定（export default 是特殊的）cjs中，对象的传递如同a = b 一样，基本类型值传递，对象则引用传递。而es6 module中，如果不用export default去引用，基本类型也是引用传递的。export default的赋值则与a = b 相同。CommonJs是单个值导出，ES6 Module可...
2019-07-11 11:51:18
2167
翻译 打包工具比较：webpack VS rollup VS parcel
comparing-bundlers-webpack-rollup-parcel原文：https://medium.com/js-imaginea/comparing-bundlers-webpack-rollup-parcel-f8f5dc609cfd文章目录一句话总结特性webpackrollupparcel分3个方面来对比配置入口文件transformations摇树优化dev serv...
2019-06-10 17:22:54
6970
3
翻译 css的组织方式：BEM规则
why?无论选择了什么样的css组织方法，你都会从更加结构化的css 和 Ui 结构中获益。有些方式不那么严格，更加灵活。而另一些方法则更加易于理解，适用于团队协作。为什么要选择bem呢？它不像其他语法（smacss）那么复杂，但是仍然可以提供给我们优良的代码结构和易于识别的术语。模块化block永远不依赖于页面上的其他元素，因此不会遇到级联问题。而且易于从旧项目中迁移。只要从某一个块级元...
2019-05-10 16:08:44
4895
原创 消息服务实践
prefetch:如果什么都不配置，Rabbit会尽可能快速地发送队列中的所有消息到client端。因为consumer在本地缓存所有的message，从而极有可能导致内存耗尽或不足，影响其它进程的正常运行。prefetch允许为每个consumer指定最大的unacked messages数目。简单来说就是用来指定一个consumer一次可以从Rabbit中获取多少条message并缓存在...
2019-05-05 19:21:57
304
原创 React hooks API小结
setStateconst [state, setState] = useState(initialState)setState(currentState)setState((prevState) => f(prevState))接受一个值或者一个函数不会自动Merge，需要解构自己merge(或者使用useReducer)懒init 如果initialState需要通过复...
2019-03-23 22:17:16
2245
翻译 页面的生命周期API及给开发者的建议------来自谷歌开发者博客
导读：web平台很早就有了生命周期的概念，如load, unload, visibilitychange，但这些时间只能让开发者响应用户发起的生命周期变化。为了更合理地使用系统资源，开发者应善用页面周期状态。另外，对浏览器而言，越多的开发者开始应用新的页面周期API，冻结和丢弃页面也会变得更安全可靠，从而节约内存，cpu，电量和网络资源。文章目录背景概览页面生命周期和状态检测生命周期跨浏览器差异...
2018-11-15 16:16:55
522
原创 理解es6系列-----【proxy和refection】----未完待续
文章目录什么是proxy和refection生成一个新的简单proxy用set陷阱来验证属性用get陷阱来验证对象结构（object shape）用has陷阱来隐藏属性deleteProperty 来阻止属性被删除getPrototypeOf 和 setPrototypeof结论什么是proxy和refection通过 new Proxy()可 生成一个proxy来代替目标对象（target...
2018-10-27 18:19:11
1377
1
原创 微信position: fixed的坑及解决之道
文章目录问题描述解决之道思路和踩的坑思路：踩坑（不完美/无效的解决方案）：问题描述安卓手机上，微信环境下上传完图片后，position: fixed 的导航栏在上下滚动页面的时候出现了抖动的情况，抖动完回到原位。ios上没测，但搜索问题的过程中发现有人反应IOS微信环境下position:fixed也有抖动的问题。解决之道页面结构是：<div id="#app"></...
2018-10-18 11:18:25
10382
翻译 chrome官方解释在导航栏输入url敲下回车后发生了什么？
这是来自谷歌官方博客： inside modern browser 的四篇系列文章，也有人作了全文翻译，参见承香墨影。本文可看做一个abstract，对全文进行了重点摘要，以期读完后对chrome浏览器的体系结构，处理机制有整体的了解。有个经典的前端面试问题：在导航栏输入url敲下回车后发生了什么？本文可以看做一个比较全面、深入一点的回答。文章目录浏览器体系结构导航发生了什么？浏览器体系结构...
2018-09-30 15:22:39
833
原创 你今天又写了什么bug? --持续更新中，更新到不写代码的那天
前两天有个大学同学在微信上敲我，劈头一句“又在忙着写bug呢？”，不禁失笑，无以反驳。嗯，不管多厉害的coder，都很难说写的程序0 Bug。今天看公众号还爆了一个ios上元素嵌套过多引起的苹果手机重启的问题。入行也有一年多了，来回顾下自己都写了哪些Bug出来，引以为戒吧。莫名消失的底部操作栏这是在上家公司干的了。在前人基础上改一个页，底部会新加一个悬浮的操作栏。这个页用了一个x-pull...
2018-09-17 17:11:58
622
翻译 七个意想不到的vue pattern
周末在家刷如懿传，顺带在youtube看了一个7-secret-patterns-about-vue的视频，讲得还蛮有意思的，确实有些地方意想不到。更多内容参见作者的github仓库。productivity Boostssmart watcherscomponent Registrationmodule Registrationradical Tweakscleaner v...
2018-09-17 15:20:37
3236
原创 记两个ios的bug： 日期问题和奇葩的vue 点击无响应问题
目录new Date()– invalid Datevue @click 点击经常无响应new Date()– invalid Dateios 不认’2018-12-12’的’-‘, 也不认日期与事件之间的空格，需要在字符串用new Date()转化为日期时，replace一下const dateString = '2010-11-29 11:11:11'const ...
2018-09-06 18:05:57
2659
2
原创 解读vue源码之nextTick：何谓 event-loop, 浏览器的事件机制，task/microtasks
前言：目录：nextTick 与异步渲染UI浏览器的event-loopnextTick 与异步渲染UI浏览器的event-loop
2018-08-23 18:54:40
675
原创 rxjs6学习笔记----结合react，redux使用
rxjs版本是当前2018-07-23最新， &amp;amp;amp;amp;amp;amp;amp;quot;rxjs&amp;amp;amp;amp;amp;amp;amp;quot;: &amp;amp;amp;amp;amp;amp;amp;quot;^6.2.2&amp;amp;amp;amp;amp;amp;amp;quot;。导入模块的区别pipe操作符学习资源导入模块的区别rxjs已经出到6
2018-07-23 18:00:01
4464
原创 node.js 的 模块加载机制和server端hot reload热加载实践
工作上遇到个后台的项目，express + vue 写的，用了Webpack Hot Middleware配合webpack-dev-middleware来让客户端连接到客户端，使用nodemon来监听重启服务器。但是webpack打包前端静态资源的速度还是比较慢的，每一次对server端的改动都要等待重新打包，但客户端的文件其实并没有改动，这么做就浪费了时间。所以，想摸索一下服务器端热加载的方法...
2018-07-15 14:35:30
2609
2
原创 手把手教你用express + mysql + knex 做个 todoList
成果展示安装mysql及其基本应用用knex来连接mysql接口功能拆分建表：创建任务列表查询任务列表添加任务删除任务修改任务内容把任务设为已完成/恢复任务为未完成前端展示：vue+bootstrapAll Done：一点想法成果展示项目源代码地址见git，在routes下找todolist 安装mysql及其基本应用用knex来连接my...
2018-05-22 15:50:21
4087
原创 为了全局设MongoDB的路径，mac下修改bashrc来配环境变量的心酸历程
昨天配Mongodb是终端手动打的export PATH=xxxxx，但还是想找一个一劳永逸的方法。过程中颇多纠结，这里小记一笔吧。mac下登入终端后直接进入Users/yourUserName 目录，在这里直接 ls - al 找.bashrc文件或者.base_profile文件。然并卵，没找到。touch .base_profile && vim .base_profil...
2018-05-16 11:37:09
1771
原创 mac下 mongodb 的超详细、傻瓜式安装与启动 （无需brew ）
在搭建microblog的过程中，用到了mongo数据库，我还没安装过，就搜了下怎么安装启动，隔壁的小姐姐还给了我个网址，但感觉都有一句话带过的地方（可能我太菜了吧），最后当然还是配好了，这里放一个超详细、手把手 的教程。目录 下载安装启动下载安装本来要用brew来安装的，结果sudo brew install mongodb之后给我报了个错，反正是有...
2018-05-15 21:38:58
1571
原创 express 4+mongo 3+bootstrap 4 从零搭建微博
对着绿皮书《nodejs开发指南》来用express搭建微博，然而技术更新太快，很多老的api都用不成了，各种踩坑。这里实战更新一把。以供后来人。目录版本号建立工程全局安装express之后需要额外安装express-generator才能生成基本结构模板引擎partial不可使用，用include代替动态/静态 视图助手 helpers/dynamicHelpers 用...
2018-05-15 17:24:57
710
原创 迁移到webpack4：从webpack.optimize.CommonsChunkPlugin到config.optimization.splitChunk，以及有个搜出来的中文解决办法是错的
今天在对着webpack中文指南一点点敲demo，在代码分离这一节遇到了一个报错：webpack4 Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead哦，原来是原来的插件不能用了，这个中文指南，标的是webpack4...
2018-05-07 16:57:00
48334
26
原创 input的autocomplete效果 ---又是一道腾讯编程题
题目效果代码htmlcssjs思考题目页面内有一个 input 输入框，实现在数组 arr 查询命中词并和 autocomplete 效果。效果忽略圆圈，这是quickTime录屏的side effect。。。 代码html <div id="div1"> <input type="text" ...
2018-04-25 19:40:26
2670
3
原创 原生实现html5的拖拽功能 drag and drop
题目思路代码效果图拖拽库HTML5的拖拽API题目页面内有一个正方形元素 A 以及一个待放置区域 B，实现对其拖拽和放下到 B 区域内，并且改变 B 区域背景颜色 (不可用 html5 原生事件)。这也是一道腾讯面试题，要求远程编程。思路用鼠标的mousedown事件来模拟dragstart用持续的mousedown事件来模拟dra...
2018-04-25 11:55:28
1717
原创 大数相加 之 javascript版 据传是个腾讯面试题
前两天看公众号，有腾讯的面试题是远程写个大数相加。早上自己就练手写了一个。大致思路是用字符串代替数字，倒序后进位相加。暂时不考虑负数的情况。（正负数在判断符号后，可以归纳为异号相减，同号相加，最后处理符号即可）。为了调试方便没有加函数，直接写在最外层：var a = '011', b = '0023'function turnToNum (str){ if(typeo...
2018-04-23 14:13:29
543
原创 理解 ES6 --- 数组新方法
英文电子书点此阅读《understanding es6》目录array in javascript (类)Array.of(), Array.from()find() and findIndex()fill() , copyWithin()typed arraysarray in javascript (类)Array.of(), Array.from()...
2018-03-29 10:04:03
219
原创 理解 es6 --- 类 class
英文电子书点此阅读《understanding es6》目录class in javascript (类)class 的特点在类中定义generatorstatic 关键词扩展类 derived classes从built-in的类型中继承Symbol.species在 class constructor 中使用 new.targetsummary...
2018-03-28 11:56:27
434
原创 理解understanding es6 ---- 迭代器与生成器（iterators and generators）
英文电子书点此阅读《understanding es6》目录迭代器与生成器（iterators and generators）iterator和generator的概念iterable 和 for-of内置的迭代器高阶用法执行异步任务summary迭代器与生成器（iterators and generators）iterator和gen...
2018-03-27 11:30:37
263
原创 利用ES6的generator写一个时间间隔递增的定时器
任务是这样，定时器在0时刻打出1，然后隔1s打出2，隔2s打出3…….如此，时间间隔依次递增。考虑用generator的 yield 功能来完成 停顿。talk is cheap, here’s the code.function sleep(sleepTime){ setTimeout( ()=>{ it.next() // 关键在于异步控制...
2018-03-26 16:25:09
2481
2
原创 用伪元素做图片的底部阴影效果
我司的 UI 虽然不是 处女座，但认（挑）真（剔）程度也与之不相上下了。作为一枚前端，当然也不好意思掉链子，所以在 UI 小哥的督促下，会最大可能地完美实现视觉稿。于是乎，一些本来一行实现的东西，为了效果美观，会用更多代码做得更加细致。上效果： UI 要求是，底部阴影宽度比图片的宽度略小，然后整体是个轮播效果，每张图片的阴影颜色不一样。假设图片的容器为banner, 为了减少html...
2018-03-12 14:31:50
1302
原创 如何用css3画一根优雅的0.5px细线
利用细线布局、区分页面是常用的手段。一般UI为了美观都会采用 0.5 px 而不是 1px 的细线。而这就造成了问题：由于屏幕和设计稿的分辨率转换，如果在border中直接定义为0.5 px, 会造成有时候细线被抹杀成 0 px，从而看不到， 如果定义为 1px， 则实际显示的时候会变成 2px， 就失去了UI设计细线的原意。那么，该如何画一根优雅的 .5px 细线呢？这可以用css3的tra...
2018-03-12 11:05:06
8650
翻译 理解ES6--第6部分：set 和 map , js中的字典，地图，弱字典和弱地图
英文电子书点此阅读《understanding es6》目录set and map 字典和地图ES5中模拟set和mapES6中的setES6中的地图 mapsummaryset and map 字典和地图ES5中模拟set和maplet set = Object.create(null)//set 用于检查某个值是否存在。map用...
2018-03-08 18:09:24
2676
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人