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 规范中常见的几个暗坑,希望大家开发中有意识的规避它们,提升开发体验。

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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流