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前端日报 订阅精彩文章

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