JonyYu
JonyYu
## Bug Report Please include either a failing unit test or a simple repro. You can start by forking this Code Sandbox: https://codesandbox.io/s/03qpzq1p9p?module=%2FExample.js ### What is the current behavior? If...
# 响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh） ------ 简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 > * px和视口 > * 媒体查询 > * 百分比 > * 自适应场景下的rem解决方案 > * 通过vw/vh来实现自适应 ------ ## 一、px和视口 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。在pc端，通常认为css中,1px所表示的真实长度是固定的。 ***那么，px真的是一个设备无关，跟长度单位米和分米一样是固定大小的吗？*** 答案是否定的，下面图1.1和图1.2分别表示pc端下和移动端下的显示结果，在网页中我们设置的font-size统一为16px。 图1.1 pc端下font-size为16px时的显示结果 图1.2 移动端下font-size为16px时的显示结果 从上面两幅图的对比可以看出，字体都是16px，显然在pc端中文字正常显示，而在移动端文字很小，几乎看不到，说明在css中1px并不是固定大小，直观从我们发现在移动端1px所表示的长度较小，所以导致文字显示不清楚。...
# nodejs中的子进程，深入解析child_process模块和cluster模块 ------   node遵循的是单线程单进程的模式，node的单线程是指js的引擎只有一个实例，且在nodejs的主线程中执行，同时node以事件驱动的方式处理IO等异步操作。node的单线程模式，只维持一个主线程，大大减少了线程间切换的开销。   但是node的单线程使得在主线程不能进行CPU密集型操作，否则会阻塞主线程。对于CPU密集型操作，在node中通过child_process可以创建独立的子进程，父子进程通过IPC通信，子进程可以是外部应用也可以是node子程序，子进程执行后可以将结果返回给父进程。   此外，node的单线程，以单一进程运行，因此无法利用多核CPU以及其他资源，为了调度多核CPU等资源，node还提供了cluster模块，利用多核CPU的资源，使得可以通过一串node子进程去处理负载任务，同时保证一定的负载均衡型。本文从node的单线程单进程的理解触发，介绍了child_process模块和cluster模块，本文的结构安排如下： ------ > * node中的单线程和单进程 > * node中的child_process模块实现多进程 > * node中的cluster模块 > * 总结 ------ ## 一、node中的单线程和单进程   首先要理解的概念是，node的单线程和单进程的模式。node的单线程于其他语言的多线程模式相比，减小了线程间切换的开销，以及在写node代码的时候不用考虑锁以及线程池的问题。node宣称的单线程模式，比其他语言更加适合IO密集型操作。那么一个经典的问题是： **_node是真的单线程的吗？_** 提到node，我们就可以立刻想到单线程、异步IO、事件驱动等字眼。首先要明确的是node真的是单线程的吗，如果是单线程的，那么异步IO，以及定时事件（setTimeout、setInterval等）又是在哪里被执行的。 严格来说，node并不是单线程的。node中存在着多种线程，包括： - js引擎执行的线程 - 定时器线程(setTimeout,...
# 在单页应用中，如何优雅的监听url的变化 ------   单页应用的原理从早起的根据url的hash变化，到根据H5的history的变化，实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听url的变化呢，本文将总结一下，如何在单页页面中优雅的监听url的变化。 > * 单页应用原理 > * 监听url中的hash变化 > * 监听通过history来改变url的事件 > * replaceState和pushState行为的监听 ------ ## 一、单页应用原理   单页应用的原理，在我们的上一篇文章中[React-Router源码阅读][1]已经讲的很详细，这里做一个简单介绍。单页应用使得页面可以在无刷新的条件下重新渲染，通过hash或者html5 Bom对象中的history可以做到改变url，但是不刷新页面。 ### (1)通过hash来实现单页路由   早期的前端路由是通过hash来实现的： **_  改变url的hash值是不会刷新页面的。_**   因此可以通过hash来实现前端路由，从而实现无刷新的效果。hash属性位于location对象中，在当前页面中，可以通过： window.location.hash='edit' 来实现改变当前url的hash值。执行上述的hash赋值后，页面的url发生改变。 赋值前：http://localhost:3000 赋值后：http://localhost:3000/#edit...
# 深入浅出package.json ------ npm是前端开发人员广泛使用的包管理工具，项目中通过package.json来管理项目中所依赖的npm包的配置。package.json就是一个json文件，除了能够描述项目的包依赖外，允许我们使用“语义化版本规则”指明你项目依赖包的版本，让你的构建更好地与其他开发者分享，便于重复使用。 本文主要从最近的实践出发，结合最新的npm和node的版本，介绍一下package.json中一些常见的配置以及如何写一个规范的package.json > * package.json > * package.json常用属性 > * package.json环境相关属性 > * package.json依赖相关属性 > * package.json三方属性 ------ ## 一、package.json ### 1. package.json简介 在nodejs项目中，package.json是管理其依赖的配置文件，通常我们在初始化一个nodejs项目的时候会通过： ```js npm...
# 快速高斯模糊算法的原理以及webgl工程实现 ------ 在日常生活中，高斯模糊很常见，相比与马赛克的方式，高斯模糊给人的感觉更加的自然。高斯模糊顾名思义，就是卷积(掩膜)的采样服从高斯分布，本文主要聊一聊，如何对一张图片进行高斯模糊，以及如何减少高斯模糊的算法计算量。此外，在前端对图片的渲染中，使用webgl可以充分利用GPU来进行计算和渲染，可以起到加速的效果，本文也会在快速高斯模糊算法的基础上，介绍用webgl如何实现快速高斯模糊。 > * 滤波和卷积(掩膜) > * 高斯模糊 > * 快速高斯模糊原理 ------ ## 一、滤波和卷积 首先介绍一下滤波和卷积，滤波是信号处理中的一个概念，对于信号，可以由很多不同频率的波组成，滤波的本质就是增强或者减弱某一个频率的波，信号经过滤波处理，得到的新的信号。 ***简单来说滤波就是：从信号中得到指定波长的波*** ### (1)图像的时域和频域 那么什么是图片或者说图像中的滤波呢，首先我们要明白滤波其实是一个频域的概念，频域顾名思义就是频率，那么什么是图像的频率呢？ - 时域 要了解图像的频域首先先介绍一下图像的时域。 一幅数字图像可定义为一个二维函数f(x,y)，其中x和y是空间（平面）坐标，而在任何一对空间坐标（x,y）出的幅值f称为图像在该点处的灰度或强度。 上述图片中我们肉眼看到的灰度或者说颜色，就是时域，也就是说我们平常说的某个像素的颜色，就是从时域观测到的。 - 频域 图像的频率是表征图像中灰度变化剧烈程度的指标，是灰度在平面空间上的梯度。如：大面积的沙漠在图像中是一片灰度变化缓慢的区域，对应的频率值很低；而对于地表属性变换剧烈的边缘区域在图像中是一片灰度变化剧烈的区域，对应的频率值较高。简单来说：***频域就是灰度或者颜色变换的趋势(梯度)***。 同样我们以上面那幅图为例，我们用rgb颜色画出图片每一个点的颜色。可以得到如下图：...
# js打包时间缩短90%，bundleless生产环境实践总结 ------ 最近尝试将bundleless的构建结果直接用到了线上生产环境，因为bundleless只会编译代码，不会打包，因此构建速度极快，同比bundle模式时间缩短了90%以上。得益于大部分浏览器都已经支持了http2和浏览器的es module,对于我们没有强兼容场景的中后台系统，将bundleless构建结果应用于线上是有可能的。本文主要介绍一下，本人在使用bundleless构建工具实践中遇到的问题。 > * 起源 > * 结合snowpack实践 > * snowpack的Streaming Imports > * 性能比较 > * 总结 > * 附录snowpack和vite的对比 ------ ## 一、起源 ### 1.1 从http2谈起...
# 深入聊一聊__esModule ------ 当ECMAScript module(简称es module) 的模块化语法import/export产生的时候，commonjs的require/module.exports已经在nodejs的环境中被广泛使用，特别是es module中的default语法，让es module和commonjs之间的转换变得复杂。本文结合自己在es module和commonjs两种模块化互相转换的实践，聊聊会遇到的问题以及如何解决。 > * es module中export default带来的问题 > * __esModule > * __esModule存在的问题 ------ ## 一、es module中export default带来的问题 es module模块间的互相引用不会有任何的问题，随着nodejs环境和浏览器环境都陆续开始支持es module, 一些主流的npm包的最新版本，都会提供es...
------ 主流浏览器陆续都已经开始支持es modules,此外一些Bundless的工具，比如snowpack、vite等。此外给予浏览器的ESM也可以实现一些前端微服务，本文主要介绍一下什么是浏览器中的ESM > * import & export > * import.map > * import.meta > * 浏览器中esm的兼容问题 ------ ## 一、import & export 首先我们来看主流浏览器对于ES modules的支持情况:  从上图可以看出来，主流的Edge, Chrome, Safari, and Firefox...