- 博客(69)
- 收藏
- 关注
RSS订阅转载 js随笔
参考链接：https://juejin.im/post/5d23e750f265da1b855c7bbehttps://github.com/ly2011/blog/issues/1537 ES5/ES6 的继承除了写法以外还有什么区别class Super {}class Sub extends Super {}const sub = new Sub();Sub.__pro...
2019-08-13 10:17:00
224
转载 浏览器和Node 中的Event Loop
前言js与生俱来的就是单线程无阻塞的脚本语言。 作为单线程语言，js代码执行时都只有一个主线程执行任务。无阻塞的实现依赖于我们要谈的事件循环。eventloop的规范是真的苦涩难懂，仅仅要理解的话，不推荐去硬啃。进程与线程一直在说js是单线程语言。那么什么是线程呢，对于大部分前端同学来说，可能并不是那么清晰。推荐阮大佬的这篇文章，形象生动首先,计算机的核心是CPU，它承担了所有...
2019-07-24 14:57:00
134
转载 Promise原理探究及实现
前言作为ES6处理异步操作的新规范，Promise一经出现就广受欢迎。面试中也是如此，当然此时对前端的要求就不仅仅局限会用这个阶段了。下面就一起看下Promise相关的内容。Promise用法及实现在开始之前，还是简单回顾下Promise是什么以及怎么用，直接上来谈实现有点空中花园的感觉。(下面示例参考自阮大佬es6 Promis,)定义Promise 是异步编程的一种解决方案...
2019-07-18 15:03:00
168
转载 yarn or npm 版本固化如何选择
前言作为前端开发者，npm这个包管理工具的重要性显而易见。优点不再表述，但一些缺点是为使用者诟病比较多的：速度慢、版本控制。下面主要讨论下npm的版本固化问题，即lock文件。npm语义化版本管理对于npm来说，依赖相关的信息体现在package.json的dependencies里，这里使用了Semver(语义化版本来控制)关于语义化版本的规范可以查看。大致准则如下：软件的...
2019-07-10 12:29:00
435
转载 关于CORS 应该注意的几点
前言对于跨域，随着w3c的CORS的出现，相比较于有些年头的jsonp，CORS以其简单安全，支持post的优势越来越收到大家的欢迎。具体如何CORS的原理和实现，直接推荐阮老师的文章,十分详细。本文主要关注CORS实现过程中的几个疑惑点。预检请求背景浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request)。...
2019-07-01 23:12:00
286
转载 带着问题看redux源码
前言作为前端状态管理器，这个比较跨时代的工具库redux有很多实现和思想值得我们思考。在深入源码之前，我们可以相关注下一些常见问题，这样带着问题去看实现，也能更加清晰的了解。常见问题大概看了下主要有这么几个：redux三大原则这个可以直接参考官方文档redux 的优缺点。 关于优缺点，太主观了大家见仁见智。redux中间件相关，洋葱模型是什么，常见中间件。背景有关...
2019-05-21 18:43:00
118
转载 带着问题看 react-redux 源码实现
前言Redux作为通用的状态管理器，可以搭配任意界面框架。所以并搭配react使用的话就要借助redux官方提供的React绑定库react-redux，以高效灵活的在react中使用redux。下面我们一起看看是react-redux如何灵活高效的redux 概述在开始之间还是大概提一下redux的内容，以免脱节。比较早的时候也解读了下redux的源码实现，可以参考一下Redu...
2019-05-20 17:42:00
102
转载 node.js监听文件变化
前言随着前端技术的飞速发展，前端开发也从原始的刀耕火种，向着工程化效率化的方向发展。在各种开发框架之外，打包编译等技术也是层出不穷，开发体验也是越来越好。例如HMR，让我们的更新可以即时可见，告别了手动F5的情况。其实现就是监听文件变化自动调用构建过程。下面就关注下如何实现node监听文件变化。场景假定要监听index.js，每当内容更改重新编译。我们就用简单的console来...
2019-04-17 10:18:00
446
转载 http Content-Type 知多少
前言作为前端开发，工作中少不了与接口请求打交道。对于常见的content-type，也能说上来几个，感觉还算了解。直到有一天，我要在查看google的批量接口合并时发现Content-Type: multipart/mixed以及Content-Type: application/http时，有点措手不及。赶紧深入研究下Content-Type相关内容来弥补下自己的不足，从前端的角度来...
2019-04-14 23:23:00
271
转载 CDN拾遗
作为前端er，辛辛苦苦搬完砖，好不容易上线之后，正准备告一声万事大吉，回家吃鸡。忽然qa/pm/老板问，为什么我这里还是没有更新？只能是弱弱的回一声，清个缓存看看？或者还有那么一天，发现大部分区域都是好的，只有某些区域是旧的，这就要讨论一个叫CDN的东西了。背景说个最经典的结论，无论什么东西，传输都需要时间。这个应该都不会有疑问。我们的网络而言，有两个用户，一个在海角天边，一个就用...
2019-04-10 11:49:00
115
转载 Rendering React components to the document body
React一个比较好用的功能是其简单的API，一个组件可以简单到一个return了组件结构的render函数。除了一个简单的函数之外，我们还有了一段有用且可复用的代码片段。问题不过有时候可能会受到限制。特别是，实际上这个API返回的是一个没有限制dom挂载在何处的组件，这就使得一些popup组件比较困难去实现。如果父元素限制了oerflow为hidden。就像下面这个例子一样实...
2019-03-18 20:01:00
100
转载 模拟select,隐藏下拉列表的几种实现
前言平时开发过程中，出于各种原因模拟原生slect的要求并不算少见。在实现的过程中，点击其他区域隐藏下拉列表，又是一个必备的功能，最近在一次开发的过程中引发了点思考，做下总结。现象实际中的实现比较复杂，列表中还要增删改查等操作。这里就只放个最简单的demo。目的是点击select以外的其他区域，隐藏下拉列表。效果大概这个样子(简单粗暴纯演示用)：首先这确实不难实现，上来...
2019-03-17 21:43:00
544
转载 前端数据范式化
前言现代web应用的飞速发展，特别是数据驱动思想指导下的React、vue等框架的出现，让我们越来越需要关注数据的组织管理。随着应用复杂度的提升，如果不对数据进行有效合理的设计拆分，那么从性能、可维护性等方面来看会逐渐成为一种阻碍。所以我们需要关注前端数据设计。其实没有一种很明确的规范告诉我们具体到前端的数据结构应该如何去设计。关系数据库设计有很多范式，借鉴而不照搬结合前端自身特点，...
2019-02-19 16:36:00
91
转载 其实我们可以少写点if else和switch
前言作为搬砖在第一线的底层工人，业务场景从来是没有做不到只有想不到的复杂。不过他强任他强，if-else全搞定，搬就完了。但是随着业务迭代或者项目交接，自己在看自己或者别人的if代码的时候，心情就不再表述了，各自深有体会。所以我们一起看看if还能怎么写最基本if-else假设有这么个场景,不同情况下打印不同值。因为涉及到的条件太多，就不提三目运算之类优化了。if (a == ...
2019-01-09 22:42:00
68
转载 [译]the cost of javascript in 2018(1)
前言为了构建交互性网站，我们需要发送js给我们的用户，但很多情况下，我们使用了太多js。在移动端，经常看到只加载了个点击链接或者滚动不了的情况。实话说，js仍然是移动端最昂贵的资源，因为其在很大程度上会延迟交互(即交互要在js资源生效之后才可进行)。下图展现了不同手机处理js的耗时，高端机和低端机的差别是相当的大，而用户的机型不可控，所以必须要去优化我们的加载策略。今天我们将展...
2018-12-12 14:57:00
70
转载 provisional headers are shown 知多少
前言请求里面provisional headers are shown(显示临时报头) 出现的情况很多，但原因是多样的。如果你去直接匹配关键字搜索，得到的结果可能与你自己的情况大相径庭。网上大部分都是在跨域时出现，或者是请求被插件拦截，但关于缓存时的请求很少。我在上文查看缓存的时候发现了这个问题,当时查找资料都是聚焦于请求被拦截，所以本文就简单整理一下相关情况。问题描述当刷...
2018-11-30 09:55:00
177
转载 f5到底刷新了点什么，你知道吗
引言前面翻到了http缓存相关内容，关于强制缓存和协商缓存，他们之间的差别可能大家比较清楚。并且常规情况下是否该使用缓存以及使用哪种缓存，相关文章多且全，这里不再赘述。不过用户的不同行为会打破原有规范，本文就会去探究下不同行为下的浏览器缓存表现。也就是f5到底刷新了哪些内容浏览器缓存说道浏览器缓存，脑海中常见的应该是那么几种关键词：Cache-Control、Expire...
2018-11-27 14:36:00
126
转载 react-router v4 路由规则解析
前言react-router升级到4之后，跟前面版本比有了很大的差别。例如包的拆分，动态路由等详细的差别就不说了，各位大神的总结也很到位，详细可以点击看看，All About React Router 4这篇文章。此外还有个差别是路由规则的变化。 一直有着上个版本的习惯，所以稍微复杂的路由，配起来的时候简直痛不欲生。痛定思痛，要好好了解下其依赖的匹配规则，即path-to-reg...
2018-11-09 17:13:00
118
转载 前端解读面向切面编程(AOP)
前言面向对象(OOP)作为经典的设计范式，对于我们来说可谓无人不知，还记得我们入行起始时那句经典的总结吗-万事万物皆对象。是的，基于OOP思想封装、继承、多态的特点，我们会自然而然的遵循模块化、组件化的思维来设计开发应用，以到达易维护、可扩展、高复用的目的。既然OOP这么多优点，那么经常被大家提起的面向切面编程（AOP）是什么回事呢，下面我们就一起来看一下。AOP定义第一步还是...
2018-10-26 19:45:00
80
转载 [译]javascript中的依赖注入
前言在上文介绍过控制反转之后，本来打算写篇文章介绍下控制反转的常见模式-依赖注入。在翻看资料的时候，发现了一篇好文Dependency injection in JavaScript，就不自己折腾了，结合自己理解翻译一下，好文共赏。我喜欢引用这样一句话‘编程是对复杂性的管理’。可能你也听过计算机世界是一个巨大的抽象结构。我们简单的包装东西并重复的生产新的工具。思考那么一下下，我们使用...
2018-10-25 16:01:00
87
转载 前端解读控制反转(IOC)
前言随着前端承担的职责越来越重，前端应用向着复杂化、规模化的方向发展。大型项目模块化是一种趋势，不可避免模块之间要相互依赖，此外还有很多第三方包。这样的话如何去管理这些繁杂的文件，是一个不可避免的话题。此时作为一种已经被实践证明过的思想模式一直得到大家的青睐，这就是控制反转(IOC)。IOC定义先看一下维基百科上的定义：控制反转（Inversion of Control，缩写为I...
2018-10-24 21:31:00
212
转载 npm包的更新说明，你还敢不看吗
npm包的更新说明，你还敢不看吗前言平时工作少不了依赖一些第三方的npm包，站在各位大牛的肩膀上来更好的写bug，此外还可以学习各位大佬们的各种设计思路和优雅实现。不过npm包虽好，但使用之前也要多加甄别，特别是相同包的不同版本之间的差别，可能一不小心，原本用的飞起的轮子就会让我们笑不出来。下面用两次惨痛的线上问题来给大家提个醒。版本依赖符号在描述问题之前，先谈一下npm的包管理...
2018-09-22 15:00:00
316
转载 一次webapck4 配置文件无效的解决历程
前言升级webpack4，一定要去看文档，特别是更新说明，不要自持用过原本webpack就自己开始折腾。折腾到后面，可能就默默流下眼泪了。webpack4的变化webpack-cli抽离webpack-cli被单独拆了出来，使用的时候如果只是全局装了CLI，直接执行的时候是可以的。webpack --config ./config/webpack.dev.js如果是写在npm...
2018-09-18 19:54:00
121
转载 npm link中文文档
Symlink(符号链接)一个package文件夹。概括npm link (in package dir)npm link [<@scope>/]<pkg>[@<version>]alias: npm ln描述package 链接过程分为两步首先、npm link将会在全局包{prefix}/lib/node_modules/下面创建一...
2018-09-11 11:03:00
472
转载 ESLint + lint-staged 禁用老项目中的es6
前言ESLint作为插件化的javascript代码检测工具，为我们的平时的开发保驾护航，好处就不多说了详情查看官网。问题有这么一个五年前开发的老项目，机缘巧合到了我们这边来维护。项目是zepto撸起来的，单个文件巨大，只有gulp+公司内部古老的打包工具做了下简单的打包。但是问题很严重的是，现在es6写习惯了，在老项目时总会有些地方会忽略掉直接用了es6的语法。这种未经ba...
2018-09-10 16:42:00
370
转载 由自定义事件到vue数据响应
前言除了大家经常提到的自定义事件之外，浏览器本身也支持我们自定义事件，我们常说的自定义事件一般用于项目中的一些通知机制。最近正好看到了这部分，就一起看了下自定义事件不同的实现，以及vue数据响应的基本原理。浏览器自定义事件定义除了我们常见的click，touch等事件之外，浏览器支持我们定义和分发自定义事件。创建也十分简单：//创建名为test的自定义事件var even...
2018-08-26 09:25:00
71
转载 【译】谈橡皮筋特效的解决方案
前言本文翻自Scroll Bouncing On Your Websites，拜读之后收获颇多，结合自己的理解，将该文章翻成中文，一方面加深理解另一方面好文共享。导读本文介绍了不同浏览器上弹簧滚动(即scroll bouncing)特效及实现，并回顾了网上几种常见的解决方案,顺便介绍了下近来实现的css属性 overscroll-behavior。希望读过之后能对构建和设计带有fi...
2018-08-21 10:47:00
120
转载 重读redux源码(一)
前言对于react技术栈的前端同学来说，redux应该是相对熟悉的。其代码之精简和设计之巧妙，一直为大家所推崇。此外redux的注释简直完美，阅读起来比较省事。原本也是强行读了通源码，现在也忘得差不多了。因为最近打算对redux进行些操作，所以又开始重读了redux，收益匪浅。关于redux的基本概念，这里就不再详细描述了。可以参考Redux 中文文档。阅读源码感受有很多大牛已...
2018-06-13 11:25:00
57
转载 开发一个简单的babel插件
前言对于前端开发而言，babel肯定是再熟悉不过了，工作中肯定会用到。除了用作转换es6和jsx的工具之外，个人感觉babel基于抽象语法树的插件机制，给我们提供了更多的可能。关于babel相关概念和插件文档，网上是有很多的，讲的挺不错的。详细的解析推荐官方的babel插件手册。在开发插件之前，有些内容还是要了解一下的，已经熟悉的大佬们可以直接跳过。抽象语法树（AST）Babel...
2018-06-04 19:48:00
311
转载 你可能忽略的js类型转换
前言相信刚开始了解js的时候，都会遇到 2 == '2'，但 1+2 == 1+'2'为false的情况。这时候应该会是一脸懵逼的状态，不得不感慨js弱类型的灵活让人发指，隐式类型转换就是这么猝不及防。结合实际中的情况来看，有意或无意中涉及到隐式类型转换的情况还是很多的。既然要用到，就需要掌握其原理，知其然重要知其所以然更重要。js的变量类型JavaScript 是弱类型语言，意...
2018-05-25 19:21:00
79
转载 深入清除浮动原理
关于浮动设置为浮动的元素会脱离当前文档流，向左或向右移动直到边缘遇到另一个浮动元素或者到达边界。普通元素不会对齐造成影响。浮动是把双刃剑，在给我们的布局带来便利的同时有一些缺点需要我们去解决。例如最常见的父元素塌陷。如下图所示：.warper{ width: 200px; border:1px solid #ff6633;}.float-1{ flo...
2018-05-15 09:38:00
80
转载 前端应该了解的PWA
一、传统web 应用当前web应用在移动时代并没有达到其在桌面设备上流行的程度，下面有张图来对比与原生应用之间的差别。究其原因，无外乎下面不可避免的几点：移动设备网络限制-不可忽略的加载时间web应用依赖于浏览器作为入口体验与原生的差距假如能解决以上的几点，对web app 来说会有多大的提升可以想象。二、PWA是什么PWA 全称Progressive Web A...
2018-05-09 21:53:00
68
转载 提升现代web app中页面性能
提升现代web app的中的页面性能前言，本文翻译自https://docs.google.com/presentation/d/1hBIb0CshY9DlM1fkxSLXVSW3Srg3CxaxAbdocI67NCQ/edit#slide=id.g32e52b1ea6_1_0看到之后感觉讲解的系统清晰明了，实属一篇好文。就加上自己的理解翻译了一下，聊以加深印象。硬件、网络，对性能...
2018-05-07 13:48:00
103
转载 webpack优化之code splitting
作为当前风头正盛的打包工具，webpack风靡前端界。确实作为引领了一个时代的打包工具，很多方面都带来了颠覆性的改进，让我们更加的感受到自动化的快感。不过最为大家诟病的一点就是用起来太难了。要想愉快的使用，要使用n多的配置项，究其原因在于文档的不够详细、本身默认集成的不足。也不能说这是缺点吧，更多的主动权放给用户就意味着配置工作量的增加，这里就不过多探讨了。当历尽千辛万苦，你的项目跑起...
2018-01-25 23:02:00
231
转载 更便捷的css处理方式-postcss
更便捷的css处理方式-PostCSS一般来说介绍一个东西都是要从是什么，怎么用的顺序来讲。我感觉这样很容易让大家失去兴趣，先看一下postcss能做点什么，有兴趣的话再往下看，否则可能没有耐心看下去。让我们开始吧postcss能做什么补全css属性浏览器前缀手写的代码可以是这样的:.div{ display: flex;}postcss可以转换之后成了这样:.d...
2017-12-22 22:08:00
133
转载 DOMContentLoaded、readystatechange、load、ready详谈
对前端同学而言，loade,unload,DOMContentLoaded等页面加载过程中会触发的事件肯定是都接触过，不过要是具体问各个事件的区别，我就不是那么能清晰的解答上来的了。正好刚刚在无阻塞脚本那看到了DOMContentLoaded事件，就来翻翻具体文档详细看一下各个事件吧。常言道温故而知新，让我们一起回头看一下触发时机先看下各个事件的触发时机(参考自MDN)DOMCon...
2017-12-17 18:40:00
311
转载 node实现一个Websocket服务器
早点时候翻译了篇实现一个websocket服务器-理论篇，简单介绍了下理论基础，本来打算放在一起，但是感觉太长了大家可能都看不下去。不过发现如果拆开的话，还是不可避免的要提及理论部分。用到的地方就简要回顾一下好了。Websockt 基本通信流程在具体代码实现之前，我们需要大概理一下思路。回顾一下websocket的理论部分。简单的websocket流程如下(这里就不谈详细的过程了，大...
2017-12-09 17:57:00
159
转载 前端worker之web worker
web worker背景众所周知javascript是单线程的，同一时间内只能做一件事情。这是十分必要的，设想，如果js是多线程的。有个dom元素两个线程同时做了改变，一个display:none,另一个display：block，这样让浏览器就无所适从了。出于此种考虑，单线程的js就这样一直延续下来，但是凡事必有两面性，虽然单线程保证了一些ui操作的可行性，但一些比较耗时任务， ...
2017-11-28 23:00:00
124
转载 如何实现websocket服务器-理论篇
WebSocket 服务器简单来说就是一个遵循特殊协议监听服务器任意端口的tcp应用。搭建一个定制服务器的任务通常会让让人们感到害怕。然而基于实现一个简单的Websocket服务器没有那么麻烦。一个WebSocket server可以使用任意的服务端编程语言来实现，只要该语言能实现基本的Berkeley sockets（伯克利套接字）。例如c(++)、Python、PHP、服务端Jav...
2017-11-11 10:29:00
263
转载 短时间内多个请求状态更新，导致react 不能及时响应问题总结
个人总结这段时间项目中遇到这样一个问题，旧项目中增加了一个聊天对话的模块，这是其他同学负责的部分，因为要有消息提醒，所以做了个轮询。消息提示因为是页头部分，所以每个模块都会引用到。这是背景。现象我负责的详情页部分，因为内容比较多，所以会有3个请求发出，修改的数据内容也比较多，来改变state以改变视图。本次也只是加了点东西而已，原本是可以正常显示。本地mock时也没什么问题，发...
2017-11-11 08:40:00
476
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人