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

前端请求的那些事儿；初学者使用json+ajax作注册判断的时候容易犯的一个错误；浏览器事件循环机制与Vue nextTick的实现；8张图帮你一步步看清 async/await 和 promise 的执行顺序；从Webpack源码探究打包流程，萌新也能看懂～；骚年，Koa和Webpack了解一下？；记录一下写gulp遇到的ES6问题；GitHub 4 万 Star 项目作者的面试经历

前端请求的那些事儿
初学者使用json+ajax作注册判断的时候容易犯的一个错误
浏览器事件循环机制与Vue nextTick的实现先上一段简单的代码 console.log(‘aa’); setTimeout(() => { console.log(‘bb’)}, 0); Promise.resolve().then(() => console.log(‘cc’)); 复制代码执行结果总是如下： aa cc bb 复制代码为什么呢？为什么同样是异步，Promise.then 就是比 setTimeout 先执行呢。这就涉及到浏览器事件循环机制…
8张图帮你一步步看清 async/await 和 promise 的执行顺序11张图让你一步步看清 async/await 和 promise 的执行顺序为什么写这篇文章？测试一下自己有没有必要看需要具备的前置基础知识主要内容对于async await的理解画图一步步看清宏任务、微任务的执行过程为什…
从Webpack源码探究打包流程，萌新也能看懂～上一篇讲述了如何理解tapable这个钩子机制，因为这个是webpack程序的灵魂。虽然钩子机制很灵活，而然却变成了我们读懂webpack道路上的阻碍。每当webpack运行起来的时候，我的心态都是佛系心态，祈祷中间不要出问题，不然找问题都要找半天，还不如不打包。尤其是loader和plugin的运行机制，这两个是在什么时候触发的，作…
骚年，Koa和Webpack了解一下？前言日常开发中，我们用的都是使用Webpack这类构建工具进行模块化开发。或者使用基于create-react-app和vue-cli等脚手架进行开发。如果这个时候我们需要Node作为后端，React或者Vue作为前端，Webpack作为构建工具，那岂不是我们需要手动启动两个服务？所以这里选用Koa和Webpack作为例子，启动koa服务…
记录一下写gulp遇到的ES6问题早上复习一下gulp一些基本的写法，在写了一些简单的uglify,rename,concat,clean的处理之后，发现都还记得这些基本语法。然后无意间就想在demo中写下export function会变成怎样，结果发现gulp并不支持直接的es6语法，而且提示的错误也让人模棱两可。 events.js:182 throw er; // Unhandled ‘error’ event ^…
【斩获 BAT 等 7 家 Offer！GitHub 4 万 Star 项目作者的面试经历】开发者 CyC2018 在 GitHub 上有一个高达 40 k+ star 的项目 CS-Notes，该项目记录了关于计算机科学方方面面的学习笔记，同时，作者在项目中分享了他 2018 年的校招面试经验，该面经目前在原始发布网站上已经获得  全文
Vue 源码(一)：响应式原理本文只做简单介绍，结合代码食用更佳： github/vue-learn-source-code 效果预览：github pages Object.defineProperty defineProperty 让我们可以劫持某个属性的 getter 和 setter，举个例子： var person = { firstName: ‘meimei’, lastName: ‘han’ }; Object.defineProperty(perso…
深度讲解：web前端性能优化课程目标理解减少http请求数量和减少请求资源大小两个优化要点掌握压缩与合并的原理掌握通过在线网站和 fis3 两种实现压缩与合并的方法 ####浏览器的一个请求从发送到返回都经历了什么动态的加载静态的资源 1、dns是否可以通过缓存减少dns查询时间 2、网络请求的过程…
用 vue + d3 画一棵树 github pages vue 和 d3 的角色画图可分为两步：元素坐标计算数据绑定坐标计算只需要一些 api，本文使用 d3。数据绑定既可以借助 d3，也可以使用 vue。d3 通过操作 dom 实现，有点像 jQuery，d3 针对数据和 dom 的状态提出了三个概念：Update、Enter、Exit，感兴趣的可以看官网。本…
# Web Components 全揽Web Components技术可以把一组相关的HTML、JS代码和CSS风格打包成为一个自包含的组件，只要使用大家熟悉的标签即可引入此组件。Web Components技术包括：
为什么我会选择 React + Next.js，而不是 Vue 或 Angular？作者｜TimZaložnik译者｜谢丽本文的目的不是要对 React、Vue 和 Angular 三者进行比较，已经有许多人对这个话题进行了比较深入的探讨。每个人都有自己的偏好。与其他库和框架相比，我更喜欢使用 React 构建用户界面。在我解释了为什么之后，也许你也会切换到 React，如果你现在还没有用它的话。 …
使用 NestJS 开发 Node.js 应用 NestJS 最早在 2017.1 月立项，2017.5 发布第一个正式版本，它是一个基于 Express，使用 TypeScript 开发的后端框架。设计之初，主要用来解决开发 Node.js 应用时的架构问题，灵感来源于 Angular。在本文中，我将粗略介绍 NestJS 中的一些亮点。组件容器 NestJS 采用组件容器的方式，每个组件与其他组件…
jQuery属性操作之.val()函数
看我如何分析并渗透WebSocket和Socket.io Websocket简介 WebSocket是一种允许浏览器和服务器建立单个TCP连接然后进行全双工异步通信的技术。由于它允许实时更新，而浏览器也无需向后台发送数百个新的HTTP polling请求，所以对于web程序来说，WebSocket非常流行。这对于测试者来说是不好的，因为对WebSocket工具的支持不像HTTP那样普遍，有时候会更加复杂。 …
使用Golang的Gin框架和vue编写web应用背景: 之前使用Golang的Gin框架进行一些运维内部后端的API接口开发，对外提供提供 json 类型的数据响应，但是该种方式在浏览器访问数据时数据格式不友好(由于是API接口，一般需要使用postman之类的工具来验证接口返回数据)，后来尝试了使用Golang的 template 模板来结合html进行数据渲染，但也发现比较缺乏美感。之后决…
一、下面播报一则新闻 Chrome 70已经原生支持HTML5 <video> 播放时候Picture-in-Picture，也就是俗称的画中画技术，…
react-router 路由切换动画因为项目的需求，需要在路由切换的时候，加入一些比较 zb 的视觉效果，所以研究了一下。把这些学习的过程记录下来，以便以后回顾。同时也希望这些内容能够帮助一些跟我一样的菜鸟，让他们少走些坑。可能我对代码…
嘴对嘴教你使用Gulp 什么是Gulp? Gulp 是一个前端自动化工具，开发者可以使用它来处理常见任务：搭建web服务器文件保存时自动重载浏览器使用预处理器如Sass、LESS 优化资源，比如压缩CSS、JavaScript、压缩图片安装Gulp 安装Gulp之前你需要先安装Node.js 安装 gulp： $ npm install gulp -g …
实用webpack插件之DefinePlugin 通过阅读这篇文章，可以学习到如何使用DefinePlugin插件使得前端项目更加工程化，说清晰点就是如何使用这个插件，在编译阶段根据NODE_ENV自动切换配置文件，提升前端开发效率。 DefinePlugin的正确用法如何使用DefinePlugin添加配置文件，构建期间自动检测环境变化，也就是如何根据NODE_ENV引入配置文件？ …