20190411 前端开发日报-前端开发博客

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

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