HUANG QING BLOG

天行健，君子以自强不息。地势坤，君子以厚德载物。

Workbox

PWA

由于直接写原生的sw.js，比较繁琐和复杂，所以一些工具就出现了，而workbox是其中的佼佼者，由google团队推出 基本配置 首先，需要在项目的sw.js文件中，引入workbox的官方js，这里用了我们自己的静态资源： importScripts( "../workbox.js" ); 其中importScripts是webworker中加载js的方式。 引入...

Posted by huangqing on August 31, 2020

PWA

什么是PWA PWA是Progressive Web App的英文缩写， 翻译过来就是渐进式增强WEB应用， 是Google 在2016年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。 可靠——即时加载，即使在不确定的网络条件下也不会受到影响。 当用户从主屏幕启动时，service work可...

Posted by huangqing on August 31, 2020

如何挑选数据可视化框架及平台

数据可视化分成两种大的类型： 可视化库，比如 D3、Echarts 等，这些是面向开发者的，开发者可以基于这些库开发可视化应用。 可视化平台，比如 Grafana、Superset 等，这些面向分析师和一般使用者，直接拿来分析数据，无需开发。 如何快速了解一个项目？ 于开源库的选择，除了功能是否能满足，更重要的是要看这个项目本身的发展情况，我最喜欢的方法是看 GitHub 的 con...

Posted by huangqing on August 25, 2020

Git

规范 Git commit

规范建设 commit message格式 <type>(<scope>): <subject> type(必须) 用于说明git commit的类别，只允许使用下面的标识。 feat：新功能（feature）。 fix/to：修复bug，可以是QA发现的BUG，也可以是研发自己发现的BUG。 f...

Posted by huangqing on August 21, 2020

JavaScript 中常见排序算法

十大经典算法

Posted by huangqing on August 14, 2020

2018 现代前端开发路线图

CSS预处理器 Sass、Less、Stylus PostCSS CSS组织 随着你的应用不断膨胀，CSS也开始变得混乱难以维系。有多种手段可以对你的CSS进行组织，让它更好地应对伸缩性，比如OOCSS、SMACSS、SUITCSS、Atomic以及BEM。你应该了解它们之间的不同，但是我更偏好BEM。 BEM代表块（Block），元素（Element），修饰符（Mo...

Posted by huangqing on July 28, 2020

前端二进制

文件下载 图片浏览 Blob FileReader

实现下载文件的函数 function loadFile(fileName, content){ var aLink = document.createElement('a'); // 使用 Blob 构造函数将文件内容编译为指定格式的二进制 var blob = new Blob([content], { type: 'text/plain' ...

Posted by huangqing on July 20, 2020

JavaScript 调试技巧

debugger; ：只要把它写到代码里，Chrome 运行的时候就会自动自动停在那。 把 objects 输出成表格: console.table 试遍所有的尺寸: Chrome 浏览器提， 进入检查面板点击 ‘切换设备模式’ 按钮，这样你就可以调整视窗的大小了 $_是一个特殊变量，它的值始终等于控制台中上一次操...

Posted by huangqing on July 20, 2020

实现微前端

框架 客户端框架 下列框架实现了这种（或类似的）模式： Piral Open Components qiankun Luigi Frint.js 服务端框架 下列框架实现这种（或类似的）模式： Mosaic PuzzleJs ...

Posted by huangqing on July 14, 2020

Vue - Virtual Dom

模板转换成视图的过程 Vue.js通过编译将template 模板转换成渲染函数(render ) ，执行渲染函数就可以得到一个虚拟节点树 在对 Model 进行操作的时候，会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。这个过程主要是将新旧虚拟节点进行差异对比，然后根据对比结果进行DOM操作来...

Posted by huangqing on July 8, 2020

ABOUT ME

Goals determine what you going to be!

✉️ hqdaoyidao@163.com

FRIENDS