20190411 前端开发日报

你猜一个 TCP 连接上面能发多少个 HTTP 请求;Vue项目封装icon;不是后端也应该知道的 web 服务、子服务、服务的部署;2019 年 Vue 生态圈调查:92% 的开发者将继续用 Vue;基于django channel 实现websocket的聊天室;前端练级攻略(第二部分);浅析JavaScript的事件循环机制;Webpack4+Babel7+ES6兼容IE8

  1. 你猜一个 TCP 连接上面能发多少个 HTTP 请求 一道经典的面试题是从 URL 在浏览器被被输入到页面展现的过程中发生了什么,大多数回答都是说请求响应之后 DOM 怎么被构建,被绘制出来。但是你有没有想过,收到的 HTML 如果包含几十个图片标签,这些图片是以什么方式、什么顺序、建立了多少连接、使用什么协议被下载下来的呢? 要搞懂这个问题,我们需要先解决下...
  2. vue项目封装icon 在项目中常遇到使用图标的地方,找了许多解决方式,最终还是选择了iconfont图标作为常用图标库。 但是在实际开发当中,使用iconfont提供的开发方式有诸多不便的地方。例如当需要新增一个图标是,需要更新在线链接,然后再将项目当中的链接替换。 接下来记录一次如何在vue中封装icon,更高效的使用icon。 本篇文章...
  3. 不是后端也应该知道的 web 服务、子服务、服务的部署 web 服务是什么 1. 定义 我们先来看一个很通俗的定义,来自于wiki。 A web service is a service offered by an electronic device to another electronic device, communicating with each other via the World Wide Web. Web service 指的是,一个平台通过 web 向其...
  4. 2019 年 Vue 生态圈调查:92% 的开发者将继续用 Vue 2018 年,Vue 在前端圈大火,它的性能也变得越来越稳定,很多初创公司和中小型企业终于意识到了 Vue 的强大威力和巨大价值,同时,Vue 也开始走向大型企业。 最近,国外一机构 Monterail 对 Vue 生态圈做了一个调查报告,该报告是在 2018 年 11 月和 12 月进行的,主要是软件开发者,更重要的是,本报告也获得尤雨溪本...
  5. 基于django channel 实现websocket的聊天室 websocket ​ 网易聊天室? ​ web微信? ​ 直播? 假如你工作以后,你的老板让你来开发一个内部的微信程序,你需要怎么办?我们先来分析一下里面的技术难点 消息的实时性? 实现群聊 现在有这样一个需求,老板给到你了,关乎你是否能转正?你要怎么做? 我们先说消息的实时性,按照我们目前的想法是...
  6. 前端练级攻略(第二部分)在第二部分,我们将重点学习 JavaScript 作为一种独立的语言,如何向界面添加交互性,JavaScript 设计和架构模式,以及如何构建网络应用程序。
  7. 浅析JavaScript的事件循环机制 众所周知,JavaScript的一大特点就是单线程,也就是会按顺序执行代码,同一时间只能做一件事。 为什么JavaScript会被设计成单线程? JavaScript的诞生,一开始是为了解决浏览器用户交互的问题,以及用来操作DOM,基于这个原因,JavaScript被设计成单线程,否则会带来复杂的同步问题。 为什么JavaScript需要异步? ...
  8. Webpack4+Babel7+ES6兼容IE8 前阵子重构了一个挺有意思的项目,是一个基于浏览器环境的数据采集sdk。公司各个产品的前端页面中都嵌入了这个sdk,用于采集用户的行为数据,上传到公司的大数据平台,为后续的运营决策分析提供数据支撑。 笔者接手这个项目的时候,前任开发者已经把功能都写差不多了。唯一需要做的就是做下模块化拆分和代码规范,以便...
  9. 基于promise /A+规范手写promise promise是一个类,是现在比较常用的一个异步解决方案,用来解决之前异步编程的回调地狱问题 常见的几种异步编程方法 回掉函数 事件监听 发布订阅 promise generator(一般不用) async、await(es8语法) promise和回调函数对比 promise版 let api = new Promise((resolve,reject)=&g...
  10. JS中的继承与原型链 在面向对象编程中,类之间的共享是通过继承实现的,而在JavaScript中万物皆对象,并没有类的概念(ES6中类仅仅是一个语法糖),对象之间的共享是通过一个叫做原型的东西实现的。 对于原型我们通过 ]、proto 以及 prototype 这三个概念理解其实现继承的思路。 ] 在 ECMAScript 标准中规定...
  11. 我怎样用Node.js自动完成工作的慢慢的花在这些任务上的时间会越来越多。我在 2016 年时在一家网络游戏公司工作时,类似的工作很多。当时我在为游戏构建可配置的模板,这项工作也许很有价值,但是由于要重新设置皮肤,我必须把大约70%的时间消...
  12. 使用webpack构建多页应用随着react, vue, angular 三大前端框架在前端领域地位的稳固,SPA应用正在被应用到越来越多的项目之中。然而在某些特殊的应用场景之中,则需要使用到传统的多页应用。在使用webpack进行项目工程化构建时,也需要...
  13. 关于 JavaScript 异步的奇妙进化史 人的一生,大概是从稚嫩到复杂,而最终是否归于佛系简单,因人修炼而异,JavaScript 语言亦是如此。 网页从静态到动态的变迁 几十年前的导航网站,清爽又简单,没有什么特别的功能,只是单纯的展示,现成的网页在服务器上静静躺着,高效毫无压力,让人很喜欢。 几十年后的今天,静态页面远不能满足用户的需求,网...
  14. 可快速简单使用的 React Toast 组件 README.md React Easy Toast 可快速简单使用的 React Toast 组件 $ yarn add react-easy-toast --save import React from "react"; import ReactDOM from "react-dom"; import * as toast from "../lib"; console.log(toast); cl...
  15. Javascript中函数作为对象的魅力Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象。那就意味着在javascript中函数可以有属性,可以有方法, 可以享有所有对象所拥有的特性。并且最重要的,她还可以直接被调用
  16. D3.js上手——折线图 折线图是数据统计中经常会用到的图表,用于二维数据的展示,本文将使用D3上手制作一个简单的折线图 确定数据 表格数据是一家店铺一年的销售量 月份 销售量(件) 1月 454 2月 628 3月 756 4月 632 ...
  17. 安心学习,重学前端之(js基础篇(1)) 感觉最近IT圈子有点嗨啊,996.icu大火,也是我们it从业者的心声,活着!=活着。其实无论是在公司,还是回家,技术都融入了我自己的生活吧,只是资本家的操作,不予评论,安心做技术。 话扯远了,言归正传,这个文档,是一个分享自己重新学习前端的笔记,这些本来是纸质版的笔记,现在贴出来,分享给大家,篇幅较长 ...
  18. 从 @babel/register 开始聊起 通常我们会用 babel 来将浏览器未兼容的新语法编译为酒语法,以便在旧浏览器或者环境下运行。 除了编译运行外,babel 还提供了 @babel/register 来即时编译运行(在 node 中使用,废话)。 如何使用 @babel/register 使用 @babel/register 的方式很简单,只需要将以下代码放在需要编译运行的代码引入前: require(...
  19. 【面试篇】寒冬求职季之你必须要懂的原生JS(上)互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力。
  20. Vue 路由知识点归纳总结最近做项目才发现,我确实对 vue-router 太不熟悉了,都只了解个简单用法就开始搞了,本来很简单的问题,都搞不清楚。现在重新看一遍文档,重新梳理一下。
  21. Vue源码学习之双向绑定 (注:此篇博客主要讨论Watcher,Dep,Observer的实现) 原理 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更...
  22. 合格前端系列第五弹- Virtual Dom && Diff(迁移) 这是一篇很长的文章!!!坚持看到最后有彩蛋哦!!! 文章开篇,我们先思考一个问题,大家都说 virtual dom 这, virtual dom 那的,那么 virtual dom 到底是啥? 首先,我们得明确一点,所谓的 virtual dom ,也就是虚拟节点。它通过 JS 的 Object 对象模拟 DOM 中的节点,然后再通过特定的 render 方法将其渲...
  23. 聊聊vue2.5的patch过程(diff算法) Vue2.0开始,引入了Virtual Dom,了解diff过程可以让我们更高效的使用框架,必要时可以进行手工优化,本文针对的是Vue2.5.7版本中的Virtual Dom进行分析,力求以图文并茂的方式来分析diff的过程。 其中patch过程中所用到的diff算法来源于 snabbdom PS: 如有不对之处,还望指正。 什么是VNode? 我们知道,浏览...
  24. Git 十四周年:你喜欢 Git 的哪一点? | Git 为软件开发所带来的巨大影响是其它工具难以企及的。 …

    Git 十四周年:你喜欢 Git 的哪一点
  25. web Audio实现pcm音频录制 前面利用web audio api播放了本地音乐,并且利用createOscillator生成音频并播放。既然如此,我们能否用api去实现简单的录音呢? 音频源 getUserMedia 录音的音频源当然是设备的话筒(音频输入设备),所以需要用到 navigator.mediaDevices.getUserMedia() 这个方法。 该方法有一个参数, const...
  26. #开源项目#【30 天 React 学习教程:30 Days of React】详见: 这是一个开源的 React 学习教程,旨在带你了解 React 基础知识。

    30 Days of React
  27. LeetCode 之 JavaScript 解答第142题 —— 环形链表 II(Linked List Cycle II) Time:2019/4/8 Title: Linked List Cycle II Difficulty: medium Author:小鹿 题目:Linked List Cycle II Given a linked list, return the node where the cycle begins. If there is no cycle, return null . To represent a cycle in the given linked list, we use an integer pos which represent...
  28. js面试之14种设计模式 (6)设计模式如果应用到项目中,可以实现代码的复用和解耦,提高代码质量。 本文主要介绍14种设计模式写UI组件,封装框架必备
  29. JavaScript函数的6个基本术语 Lambdas (λ) 在 JavaScript 作为arrow functions(箭头函数)被广为所知: // this is your regular named function in JavaScript function namedFunction (a, b) { return a + b; } // this is a lambda, i.e. an arrow function const lambda = (a, b) => a + b; 复制代码 术语lambda是一个正式的数学逻辑...
  30. Vue组件之间通信,父到子,子到父,非父子组件之间数据传递梳理1、子组件在props中创建一个属性,用以接收父组件传过来的值2、父组件中注册子组件3、在子组件标签中添加子组件props中创建的属性4、把需要传给子组件的值赋给该属性

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

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

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

发表评论

请登录后发表评论: