20200326 前端开发日报

前端通信那些事儿;这个锅,运维来背?忘记续期 HTTPS 证书,网易邮箱大量用户无法使用;【面试题解析✨】Vue 的数据是如何渲染到页面的?;把 GitHub 放入口袋,“开箱” 官方客户端;以一个梳理Vue 更新流程;从 boundle.js 源码学习 Webpack;聊聊 WebSocket,还有 HTTP;渐进增强的 Promise

  1. 前端通信那些事儿 在近两年996模式下的近乎疯狂的迭代需求打磨平台的锻炼下,积累了一些前端通信方面的一些实践经验,在这里做一个汇总。一来对自己做一个总结,二来也是给小伙伴们提供一些吸收。 由于作者使用的是vue.js,所有主要对vue.js的组件通信做总结。而且是.vue单文件组件的形式。用react.js的小伙伴不要失望,文章中有很多通...
  2. 这个锅,运维来背?忘记续期 HTTPS 证书,网易邮箱大量用户无法使用 2020年3月20日晚间,许多苹果用户看到系统不断地弹窗无法验证服务器身份,包括ios、iPadOS以及 macOS系统全部如此。 在弹窗中苹果标注不能验证「appleimap.163.com」的身份,简单来说就是这个域名的 HTTPS 证书无法被信任。 至于不能被信任的原因倒是非常简单:由于网易邮箱忘记给服务器更换新证...
  3. 【面试题解析✨】Vue 的数据是如何渲染到页面的? 面试的时候,面试官经常会问 Vue 双向绑定的原理是什么? 我猜大部分人会跟我一样,不假思索的回答利用 Object.defineProperty 实现的。 其实这个回答很笼统,而且也没回答完整?Vue 中 Object.defineProperty 只是对数据做了劫持,具体的如何渲染到页面上,并没有考虑到。接下来从初始化开始,看看 Vue 都做了什么...
  4. 把 GitHub 放入口袋,“开箱” 官方客户端 GitHub 2019 开发者大会说要出的客户端,今天(2020.3.18)终于放出了下载。之前如果登记过的小伙伴应该也和我一样收到了下面样子的邮件: 好了,那么接下来我们就来“开箱”吧! 一、安装 邮件中给出了 iOS 和 Android 客户端的下载地址,但是国内的网络有些特殊,有些网站访问不了。有的安...
  5. 以一个梳理Vue 更新流程 Vue 如日中天,几乎每一个web 开发者都知道Vue 是通过 Object.defineProperty 对数据劫持以达到响应式处理,通过发布订阅模式进行事件处理,通过key 确保元素状态复用... 针对这些知识点,通过一个例子进行梳理。俗话说,“光练不说傻把式”,那么进行一次自我检阅。 (以下内容结合 vue v2.6.11 阅读) <div i...
  6. 从 boundle.js 源码学习 Webpack 作者/Youhe(前端时空) 文章已同步发表于 微信公众号「前端时空」 用逆向思维解决问题 一道典型的场景面试题。一共有140g盐,如何用一个天平和两个2g,7g的砝码分三次成90g、50g。这道题用常规思路想可能会很麻烦,但是如果用逆向思维就容易的多了。首先如果要凑成50g,最后一步一定是拿两份25g的盐,25g又...
  7. 聊聊 WebSocket,还有 HTTP还记得曾经风靡一时的 QQ 秀聊天室吗?那时,还在上初、高中的我们,QQ 是最常用的聊天交友工具;而 QQ 秀聊天室的出现打破了只能按条件查找好友的局限性,大家可以随意进入聊天室房间,进行在线聊天。怀念那个穿...
  8. 渐进增强的 Promise最近这段时间由于疫情的原因,在家实在闷得慌,所以看了下 js 的一些基础知识,从前不是很了解的 Promise 突然豁然开朗了不少,于是就赶紧趁热打铁写下来(这就是温故而知新的感觉吗,哈哈哈)。
  9. vueSsr快速采坑 因为最近写了一个小工具放在自己网站上,发现网速较慢的时候,空白显示时间比较长,虽然在初始的时候放置了 loading 效果,不过还是打算优化一下。 经过搜索发现用 ssr 同构来优化这一点比较好 可以解决 seo 的问题; 可以更快看到网页内容,优化首屏打开时间,因为无需通过加载 js 来渲染整个 dom 结构了 下...
  10. 最佳Vue的细节操作webapck配置文件 vue.config.js {代码...} index.html {代码...} 命令行命令vue inspect webapck的所有配置 vue inspect --rules 查看webapck中的rules规则模块 vue inspect --rule vue 查看单个模块中的规则 vue...
  11. 你还认为在Angular中进行变化检测一定要依靠NgZone(zone.js)吗? 这篇文章解释了Angular如何基于zone.js库来实现NgZone服务,以及它为何要这样做。读者通过本文可以了解到在没有zone.js时Angular框架如何运作以及它的自动变化检测何时会失效。 之前我读到的大部分文章都将Zone(zone.js)以及NgZone同Angular中的变化检测紧密联系在一起。虽说它们确实有关联,但是从技术角度来看,它们...
  12. JavaScript——类还有对象 JavaScript面向对象, 注意啦在这其实面向对象是一种编程的方式,它的思想是通用的,因此 我强烈的建议你去查看我在python,面向对象编程中做的笔记。 面向对象与面向过程 这里还是相对比较容易理解的,这是两种截然不同的编程方式。 面向过程 面向对象 优点 性能比面...
  13. Javascript协程与迭代器 协程概念最早起源于如何解决COBOL语言编译器OnePass编译的问题,其后即使在结构化编程思想一统天下的时代,GOTO的支持也是在取舍之间。 其本质就是控制流主动让出和恢复机制,让控制流更加流畅,而相对于抢占式的调度方式来说,往往还需要CPU底层支持,当然目前抢占式仍然是主流。 协程、线程区别和联系 ...
  14. [前端开发]Vue组件化的思想 组件化的思想 将一个页面中的处理逻辑放在一起,处理起来就会很复杂,不利于后续管理和扩展。 如果将页面拆分成一个个小的功能块,每个功能块实现自己的内容,之后对页面的管理和维护就变得很容易了。 注册组件的基本步骤 1.创建组件构造器 2.注册组件 3.使用组件 //创建组件构造器对象 const c...
  15. Nginx + PHP-FPM: “Primary script unknown” 问题排查 前几天在笔记本上开发PHP项目的时候,想调试接口,浏览器上却无情的出现了 “File not found” 的空白页面。 笔记本上的开发环境是早就配置好了的,而且一直都是正常在用的,当时又是急着调试,却出现这种情况,顿时脑瓜子嗡嗡的。 简单排查了一下访问url是否正确,hosts文件是否正常,nginx root路径是否正确,并没有找到...
  16. 剖析Vue实现原理 - 如何实现双向绑定mvvm 本文能帮你做什么? 1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现,本文相关代码主要摘自 vue源码 , 并进行了简化改造,相对较简陋,并未考虑到数组的处理、数据的循环依赖等,也难免存在一些问题,欢迎大家指正。不过这些并不会影响大家的阅...
  17. Promise-详解 从入门到放弃 ​ 复杂的概念先不讲,我们先简单粗暴地把 Promise 用一下,有个直观感受。那么第一个问题来了, Promise 是什么玩意呢?是一个类?对象?数组?函数? 别猜了,直接打印出来看看吧, console.dir(Promise) ,就这么简单粗暴。 ​ 这么一看就明白了, Promise 是一个构造函数,自己身上有 all 、 reject...
  18. [推荐] 前端科普(二):Node.js 换个角度看世界 【前端科普系列】往期精彩内容: 《前端科普系列(1):前端简史》主要介绍 web 前端发展的历史、大事件。 本文为系列文章(2),主要介绍 Node.js 的前世今生、核心科技以及背后的故事。 一、关于 Node.js 1.Node.js 是什么 No...
  19. [推荐] 转转商业前端错误监控系统 (Sentry) 策略升级 作者 | 袁小龙 背景 众所周知,目前前端的错误监控在实际工作中越来越重要,好处如下: 收集前端页面错误 辅助定位分析错误 先于用户发现错误 区别于传统的靠用户反馈机制开发人员被动接收排查问题的模式...
  20. 对比Webpack,使用Babel+Node实现一个100行的小型打包工具 Webpack很强大,作为前端开发人员我们必须熟练掌握。但它的原理其实并不难理解,甚至很简单。毕竟所有复杂的事物都是由简单的事物组合形成的。不光是Webpack,像Vue,React这样成熟的前端框架亦是如此。 读完本文,你会认识到: Webpack打包本质还是使用fs模块读写文件,加以组合。 Babel真的很强大,方便我...
  21. jQuery——有关于jQuery操作 属性,元素,还有尺寸位置等 1.有关于属性的操作 项目源码 所谓的属性操作就是操作一系列的元素的属性,value啦class啦 …….特别是有关于input的操作是非常重要的。 为了完成后续有关于框架的高级骚操作,我们现在先来学习一下,jQuery的常用属性操作的三种 prop(),attr(),data() (1)、元素固有的属性值prop() 所谓的固有的属性 ...
  22. 异步和 Promise Note-FrontEnd-29 有关异步和 Promise 的相关知识(JS 异步编程模型,这节内容特别硬核,你品,你细品),内容包括异步和同步的区别、回调、异步和回调的关系、举例判断同步和异步、异步任务有两个结果、怎么解决回调问题 - Promise、以 ajax 的封装为例来解释 Promise 的用法、jQuery.ajax 和 axios、总结。 一、异步和同步的区别 1. ...
  23. JS 中的‘this’是什么? 译者:江吉仪 原文地址: blog.brew.com.hk/what-is-thi… this是 JavaScript 最棘手的概念之一,简而言之, this 指向执行上下文。 全局上下文 当不在任何函数或者类(实际上只是函数)内是,this指向是全局执行上下文,当在浏览器时是 window 。 this; // window this.foo = "bar"; ...
  24. 总结javascript处理异步的方法 javascript语言的执行环境是 单线程 (single thread),就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。 这种模式的好处是实现起来比较简单,执行环境相对单纯;但是只要耗时比较多,假如有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序...
  25. JavaScript 之变量对象在上一篇《JavaScript 之内存空间》中,简单介绍了下 JavaScript 中的变量是如何存储的。本篇文章将总结一下变量和函数在运行时是如何查找并引用的。
  26. 如何理解vue中的v-bind? 如果你写过vue,对v-bind这个指令一定不陌生。 下面我将从源码层面去带大家剖析一下v-bind背后的原理。 会从以下几个方面去探索: v-bind关键源码分析 v-bind化的属性统一存储在哪里:attrsMap与attrsList 绑定属性获取函数 getBindingAttr 和 属性操作函数 getAndRemoveAttr v-bin...
  27. Vue + Node + WebRTC 构建一个高逼格的视频应用 ☝点击上方蓝字,关注我们! 本文经授权转载自公众号前端之巅。作者 | Adrián García Diéguez译者 | 王强编辑 | Yonie、张之栋现在市面上有很多提供聊天和视频会议功能的免费应用,只需轻点几下鼠标,我们就能与世界各地的小伙伴愉快地交流。那么,你是否有兴趣构建一个属于自己的视频应用呢?让我们一起...

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原文:20200326 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20200326.html)