20200530 前端开发日报

如何使用JavaScript检测空闲的浏览器选项卡；超详细4小时开发一个SpringBoot+vue前后端分离博客项目；全方位360度无死角谈谈如何优化前端性能的总结；Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结；手写一个简易版的Promise；JavaScript重构技巧-让函数简单明了；JavaScript之状态模（vue中使用）；我来聊聊模型驱动的前端开发

1. 如何使用JavaScript检测空闲的浏览器选项卡

   在某些情况下，当用户与我们的最终产品或应用程序进行交互时，我们发现自己会执行许多密集的，占用大量CPU的任务。启动轮询器，建立WebSocket连接，甚至加载视频或图片等媒体，都有可能成为性能障碍，尤其是当这些任务在不需要的情况下消耗资源的时候。在用户没有主动与界面交互的同时，从不必要的工作负载或网络请求中…

2. 超详细4小时开发一个SpringBoot+vue前后端分离博客项目

   作者：吕一明 项目代码： https://github.com/MarkerHub/… 项目视频： https://www.bilibili.com/vide… 转载请保留此引用，感谢！ 前后端分离项目 文章总体分为2大部分，Java后端接口和vue前端页面，比较长，因为不想分开发布，真正想你4小时学会，哈哈。 先看效果： 不多说，开始…

3. 全方位360度无死角谈谈如何优化前端性能的总结

   原文转载自「刘悦的技术博客」 v3u.cn/a_id_86 前端是庞杂的，包括 HTML、 CSS、 Javascript、Image 、Video等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好…

4. Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

   原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

5. 手写一个简易版的Promise

   Promise 是异步编程的一种解决方案，ES6新增的一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。 Promise 有以下两个特点： （1） Promise 的状态不受外界影响。 Promise 翻译过来是承诺的意思，这个承诺会在未来有…

6. JavaScript重构技巧-让函数简单明了

   点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。

7. JavaScript之状态模（vue中使用）

   今天来聊一聊状态模式在前端项目中的应用，咱们先来看一个例子：有一个开关控制一盏灯，开关切换只有两种状态，开与关，并且触发灯泡的开关。咱们先看一下不用状态模式的例子，一般使用vue开发的代码如下： ok，现在可以看到，我们已经编写了一个强壮的状态机，这个状态机的逻辑既简单又缜密，没有任何的bug…

8. 我来聊聊模型驱动的前端开发

   如果把「客户端」想成是楼，把「数据」想成是水——「Model」就是这幢楼的蓄水池，提供充足的水源；「ViewModel」是将蓄水池里的水进行净化等加工的地方，然后输送给挨家挨户；「View」部分的每个 UI 组件就是「挨…

9. 如何判断JS中的假值

   JavaScript 中的假值有 false、null、0、""、undefined和 NaN。如何判断一个值是不是其中之一呢？比如有这么一个需求：去掉数组中的所有“假值” function bouncer(arr) { } bouncer( ); // -> 复制代码 要怎么样实现这个方法才能完…

10. 三年前端寒冬入大厂，收获蚂蚁、字节 Offer 面经分享

    最近因为一些原因想要换份工作，通过猎头帮我投递了几家公司，收到了蚂蚁、字节和拼多多的面试邀约，先来说下面试的结果 蚂蚁：收到 offer，定级 P6+ 字节：收到 offer，定级 2-1 拼多多：1 面之后未继续流程 拼多多 先来说说拼多多，本来投的是 C 端，结…

11. 一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧

    前言 文中代码对应的详细注释和具体使用方法都放在我的 github 上，源代码在底部连接 1.判断对象的数据类型 使用 Object.prototype.toString 配合闭包，通过传入不同的判断类型来返回不同的判断函数，一行代码，简洁优雅灵活（注意传入 type 参数时首字母大写） 不推荐将这个函数用来检测可能会产生包…

12. 必知必会之Promise

    Promise Promise Promise 基本 API 属性 Promise.length length 属性，其值总是为 1 (构造器参数的数目). Promise.prototype 表示 Promise 构造器的原型. 类方法 Promise.resolve(value) 返回一个状态由给定 value 决定的 Promise 对象。…

13. 你不知道的JS系列——全面解析this

    任何足够先进的技术都和魔法无异。this关键字是JavaScript中最复杂的机制之一,搞懂它很重要。 一、this是什么？ this是JavaScript中的关键字，在常见的面向对象语言中都有this的身影，相较下JavaScript中的this比较特殊，特殊在它会在执行期间动态改变指向。this一般定义在函数中，如果按英文解释，很容易产生误…

14. 记Rollup.js前端自动化构建

    Rollup+Ts构建前端应用 最近接手一个新的需求，纯html模版开发，对于已经习惯前端工程化开发的我来说，再回到 html+css+js 的时代，着实有点苦难，于是利用 Rollup+Ts+Scss 来进行开发。 项目搭建 # 项目初始化 npm init # 安装需要的依赖 yarn add rollup typescript rollup-plugin-postcss rollup-plug…

15. 离开后端说前端加密都是空谈

    最近有朋友在使劲研究如何不使用 HTTPS 的情况下保护用户密码安全。暂且不说研究过程，但结论是要保障安全必须后端参与，使用非对称加密算法 —— 如此一来，不如直接用 HTTPS 更简单便捷有保障。使用免费 SSL 证书…

16. CKEditor5 Vue 入门使用教程

    CKEditor是一款非常全面的富文本编辑器，也出来很多年了，各方面支持得都比较好（对vue、react、angular都做了相应的封装），今天主要给大家总结下自己在使用过程中的经验。本文主要总结的是 CKEditor5 在vue中的用法，包括classic、inline、ballon和document editor等。 相关连接 首页地址： ckeditor.com/ …

17. JavaScript导出excel文件，并修改文件样式

    因为最近需要实现前端导出 excel 文件，并且对导出文件的样式进行一些修改，比如颜色、字体、合并单元格等，所以我找到了 xlsx-style 这个项目，它可以对导出的 excel 文件进行一些样式上的修改，这个项目是 Shee…

18. 卖好车前端月刊文章第四期

    2020年05月28日 阅读 64 卖好车前端月刊文章第四期 卖好车前端月刊文章第四期来了，本月刊旨在提升自己的同时，将技术知识分享到社区。欢迎关注 卖好车月刊 Mac 前端开发环境从零配置 （ @剑豪 ） 该文章特别适合刚开始接触mac的前端开发，里面介绍的内容都是经过…

19. HTTP 规范中的那些暗坑

    虽然有诸多的优点，但是在协议定义时因为诸多的博弈和限制，还是隐藏了不少暗坑，让人一不小心就会陷入其中。本文总结了 HTTP 规范中常见的几个暗坑，希望大家开发中有意识的规避它们，提升开发体验。

更多内容请关注公众号【前端开发博客】每日更新