序言

事件过得好快，日子一晃就过去好多个月了，今年也快过了一半了
今年注定是坎坷的一年，反复的疫情、经济下行、互联网大厂的裁员也给今年带来了不少阴霾。

话风突转 –>

居家办公已成为常态，但是我们依然要积极阳光正能量，不断深耕前端领域，站在巨人的肩上眺望。
本次一次性更新三篇文章，来总结一些最近的收获

Read More

序言

今年最大的好消息就是我结婚了，人生的高光时刻，回忆满满呀
今年互联网也发生了很多事情，互联网教育变天，大厂年底纷纷裁员…..

年终总结?? 不了还是分享下年终旅行吧

确实波及到了我们这个小家庭-_-! 国家重锤教育行业，还好我年初跑到快，结果就在年底的时候我媳妇被裁员了
所以趁早我媳妇的空窗期，在元旦的时候直接请婚假出去旅行游玩一波。
这是临时起意去旅行，再加上是现在冬天没有什么好玩的地方，初步考虑想去哈尔滨，结果我媳妇说太冷直接就pass了

冬天不去最冷的地方就去最暖和的地方吧，go go go… 三亚就这么走起

Read More

最近一直在开发node相关的项目，做了一段时间了，项目已经让大家正常使用上了，但是日志系统一直没有接入，所以经过查阅与平衡复杂度，决定使用koa-log4进行日志的管理。关于 log4js 的介绍在这里就不多叙述了，想了解请点击  log4js详细介绍

说到数据持久化，最普遍的无非就两种方式:

• 文件存储(导出.log文件)
• 数据库存储(基础的增加功能)

本文将以log4js为主线，以文件存储形式 并且与运维配合 通过logstash上传ELK到Kibana查询的方式实现的。

持久化至文件

log4js 输入日志到文件有两种形式:

• file 输出到文件, 指定单一文件名称, 例如: default.log
• dateFile 输出到文件，文件可以按日期模式滚动，例如: 2021-12-03.log

直接上代码:

Read More

UNPKG和边缘脚本这两个技术都是利用cdn对文件进行转发，他们也有着不同，这也只是我浅显的理解，这这段时间的开发中进行了取舍，最终使用边缘脚本EdgeScript 进行了项目的开发，
下面分享下我的开发经历:

使用背景

在我入职公司之前就一直存在着这样的问题：
使用npm发布的组件库升级后，如何让产线自动引用最新的库？
这里采用的方式是组件库大发版，产线的项目也需要重新打包部署一遍，这样才能使用最新的功能。
在项目比较少的时候是可行的，但是随着项目的增多，就会带来特别多毫无意义的部署。所以通过调研，先后找到了unpkg 和 oss边缘脚本 这两个解决方案。

unpkg

unpkg 是什么

Read More

一、优化构建速度

1. 缩小文件的搜索范围
   • resolve字段告诉webpack怎么去搜索文件
   • module.noParse字段告诉Webpack不必解析哪些文件，可以用来排除对非模块化库文件的解析
   • 配置loader时，通过test、exclude、include缩小搜索范围
2. 使用DllPlugin减少基础模块编译次数
3. 使用HappyPack(已弃用)，thread-loadaer 开启多进程Loader转换
4. 使用ParallelUglifyPlugin开启多进程压缩JS文件

二、优化输出质量-压缩文件体积

• 区分环境–减小生产环境代码体积
• 压缩代码-JS、ES、CSS
  • 压缩JS：Webpack内置UglifyJS插件、ParallelUglifyPlugin
  • 压缩ES6：第三方UglifyJS插件
  • 压缩CSS：css-loader?minimize、PurifyCSSPlugin
• 使用Tree Shaking剔除JS死代码

Read More

背景

经过几年的前端开发，感觉自己牛逼了，而失去了钻研的动力。最近我面了别人几场，发现大家对vue都有自己的理解，回答都很不错。所以我准备再深入了解下vue。有一点自己的特色

重新项目

所有vue页面都离不开main.js, 去实例化vue的。这里它做了什么呢。

1
2
3
4
5
6
7
8
9

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

new Vue -> init -> 注入router  -> 
$mount挂载到具体的节点上 -> compile 模板语法解析 -> render -> 
Vnode  getter setter -> 收集依赖 通知 -> 监听器 -> patch -> 更新Dom

Read More

都给我卷起来

本卷王来做秋季总结了。
随着前端的不断深入，加之人员鱼龙混杂。现在面试的问题也趋于原理和实现，更离谱的还会问你，阅读源码会有什么心得或者如何改进么。大家都是打工仔，何必这么相互为难么，指不定哪天你落我手上呢 #_#

说句实话，不是面试要问，又要几人愿意去阅读源码呢，阅读了用不到没几天就会忘记的。但是说实话阅读源码真香，确实能学到不少。愿天下前端是一家，不要相互厮杀。

还有今年面试有一个很大的共同点，都会问你一下 写过 loader 或者 plugins么，成了今年的流行语~~~

Read More

新增语法

双问号操作符 Nullish Coalescing

双问号操作符（??），也被称作空值合并运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。
这里简单看一下用法：

1
2

const foo = null ??  default string ;
console.log(foo); // "default string"

可能有人会问 ?? 和 || 有什么区别呢？

?? 的左侧只判断两种情况：null 和 undefined，而 || 的左侧只要是假值（包括 和 0）都会返回右侧的值。Show the Code 就完事儿了：

1
2
3

const number = 0;
console.log(number || 100); // 100
console.log(number ?? 100); // 0

Read More

什么是虚拟DOM

讲Diff算法前，我先给大家讲一讲什么是虚拟DOM吧。这有利于后面大家对Diff算法的理解加深。

这就是咱们平常说的新旧两个虚拟DOM，这个时候的新虚拟DOM是数据的最新状态，那么我们直接拿新虚拟DOM去渲染成真实DOM的话，效率真的会比直接操作真实DOM高吗？

虚拟DOM比真实DOM快这句话其实是错的，或者说是不严谨的。那正确的说法是什么呢？
虚拟DOM算法操作真实DOM，性能高于直接操作真实DOM。
虚拟DOM和虚拟DOM算法是两种概念。虚拟DOM算法 = 虚拟DOM + Diff算法

Read More

2019年React Hooks是React生态圈里边最火的新特性了。它改变了原始的React类的开发方式，改用了函数形式;它改变了复杂的状态操作形式，让程序员用起来更轻松;它改变了一个状态组件的复用性，让组件的复用性大大增加。如果你是React的粉丝者或者正在使用React开发项目，你可以用1个小时时间看一下这篇文章（视频），你一定会有所收获，并在工作种能熟练的使用React Hooks。目前的大部分Hooks知识点，文章都涉及到。我想想你学完并使用Hooks后，会颠覆你现在的React开发方式，并爱上它。

Read More