20181204 前端开发日报

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

  1. 浏览器事件循环机制与Vue nextTick的实现 先上一段简单的代码 console.log('aa'); setTimeout(() => { console.log('bb')}, 0); Promise.resolve().then(() => console.log('cc')); 复制代码 执行结果总是如下: aa cc bb 复制代码 为什么呢?为什么同样是异步,Promise.then 就是 比 setTimeout 先执行呢。 这就涉及到浏览器事件循环机制...
  2. 8张图帮你一步步看清 async/await 和 promise 的执行顺序11张图让你一步步看清 async/await 和 promise 的执行顺序 为什么写这篇文章? 测试一下自己有没有必要看 需要具备的前置基础知识 主要内容 对于async await的理解 画图一步步看清宏任务、微任务的执行过程 为什...
  3. 从Webpack源码探究打包流程,萌新也能看懂~ 上一篇讲述了如何理解tapable这个钩子机制,因为这个是webpack程序的灵魂。虽然钩子机制很灵活,而然却变成了我们读懂webpack道路上的阻碍。每当webpack运行起来的时候,我的心态都是佛系心态,祈祷中间不要出问题,不然找问题都要找半天,还不如不打包。尤其是loader和plugin的运行机制,这两个是在什么时候触发的,作...
  4. 骚年,Koa和Webpack了解一下? 前言 日常开发中,我们用的都是使用Webpack这类构建工具进行模块化开发。 或者使用基于create-react-app和vue-cli等脚手架进行开发。 如果这个时候我们需要Node作为后端,React或者Vue作为前端,Webpack作为构建工具,那岂不是我们需要手动启动两个服务? 所以这里选用Koa和Webpack作为例子,启动koa服务...
  5. 记录一下写gulp遇到的ES6问题 早上复习一下gulp一些基本的写法,在写了一些简单的uglify,rename,concat,clean的处理之后,发现都还记得这些基本语法。然后无意间就想在demo中写下export function会变成怎样,结果发现gulp并不支持直接的es6语法,而且提示的错误也让人模棱两可。 events.js:182 throw er; // Unhandled 'error' event ^...
  6. 【斩获 BAT 等 7 家 Offer!GitHub 4 万 Star 项目作者的面试经历 开发者 CyC2018 在 GitHub 上有一个高达 40 k+ star 的项目 CS-Notes,该项目记录了关于计算机科学方方面面的学习笔记,同时,作者在项目中分享了他 2018 年的校招面试经验,该面经目前在原始发布网站上已经获得 ​​​ 全文

    GitHub 4 万 Star 项目作者的面试经历
  7. Vue 源码(一):响应式原理 本文只做简单介绍,结合代码食用更佳: github/vue-learn-source-code 效果预览:github pages Object.defineProperty defineProperty 让我们可以劫持某个属性的 getter 和 setter,举个例子: var person = { firstName: 'meimei', lastName: 'han' }; Object.defineProperty(perso...
  8. 深度讲解:web前端性能优化 课程目标 理解 减少http请求数量 和 减少请求资源大小 两个优化要点 掌握压缩与合并的原理 掌握通过 在线网站 和 fis3 两种实现压缩与合并的方法 ####浏览器的一个请求从发送到返回都经历了什么 动态的加载静态的资源 1、dns是否可以通过缓存减少dns查询时间 2、 网络请求的过程...
  9. 用 vue + d3 画一棵树 github pages vue 和 d3 的角色 画图可分为两步: 元素坐标计算 数据绑定 坐标计算只需要一些 api,本文使用 d3。 数据绑定既可以借助 d3,也可以使用 vue。d3 通过操作 dom 实现,有点像 jQuery,d3 针对数据和 dom 的状态提出了三个概念:Update、Enter、Exit,感兴趣的可以看官网。本...
  10. # Web Components 全揽web Components技术可以把一组相关的HTMLJS代码和CSS风格打包成为一个自包含的组件,只要使用大家熟悉的标签即可引入此组件。Web Components技术包括:
  11. 为什么我会选择 React + Next.js,而不是 Vue 或 Angular? 作者|TimZaložnik译者|谢丽 本文的目的不是要对 React、Vue 和 Angular 三者进行比较,已经有许多人对这个话题进行了比较深入的探讨。 每个人都有自己的偏好。与其他库和框架相比,我更喜欢使用 React 构建用户界面。在我解释了为什么之后,也许你也会切换到 React,如果你现在还没有用它的话。 ...
  12. 使用 NestJS 开发 Node.js 应用 NestJS 最早在 2017.1 月立项,2017.5 发布第一个正式版本,它是一个基于 Express,使用 TypeScript 开发的后端框架。设计之初,主要用来解决开发 Node.js 应用时的架构问题,灵感来源于 Angular。在本文中,我将粗略介绍 NestJS 中的一些亮点。 组件容器 NestJS 采用组件容器的方式,每个组件与其他组件...
  13. 看我如何分析并渗透WebSocket和Socket.io Websocket简介 WebSocket是一种允许浏览器和服务器建立单个TCP连接然后进行全双工异步通信的技术。由于它允许实时更新,而浏览器也无需向后台发送数百个新的HTTP polling请求,所以对于web程序来说,WebSocket非常流行。这对于测试者来说是不好的,因为对WebSocket工具的支持不像HTTP那样普遍,有时候会更加复杂。 ...
  14. 使用Golang的Gin框架和vue编写web应用 背景: 之前使用Golang的Gin框架进行一些运维内部后端的API接口开发,对外提供提供 json 类型的数据响应,但是该种方式在浏览器访问数据时数据格式不友好(由于是API接口,一般需要使用postman之类的工具来验证接口返回数据),后来尝试了使用Golang的 template 模板来结合html进行数据渲染,但也发现比较缺乏美感。之后决...
  15. 一、下面播报一则新闻 Chrome 70已经原生支持HTML5 <video> 播放时候Picture-in-Picture,也就是俗称的画中画技术,...
  16. react-router 路由切换动画因为项目的需求,需要在路由切换的时候,加入一些比较 zb 的视觉效果,所以研究了一下。把这些学习的过程记录下来,以便以后回顾。同时也希望这些内容能够帮助一些跟我一样的菜鸟,让他们少走些坑。可能我对代码...
  17. 嘴对嘴教你使用Gulp 什么是Gulp? Gulp 是一个前端自动化工具,开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass、LESS 优化资源,比如压缩CSS、JavaScript、压缩图片 安装Gulp 安装Gulp之前你需要先安装Node.js 安装 gulp: $ npm install gulp -g ...
  18. 实用webpack插件之DefinePlugin 通过阅读这篇文章,可以学习到如何使用DefinePlugin插件使得前端项目更加工程化,说清晰点就是如何使用这个插件,在编译阶段根据NODE_ENV自动切换配置文件,提升前端开发效率。 DefinePlugin的正确用法 如何使用DefinePlugin添加配置文件,构建期间自动检测环境变化,也就是如何根据NODE_ENV引入配置文件? ...

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

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

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

发表评论

请登录后发表评论: