20191021 前端开发日报

精读《用 css grid 重新思考布局》;解密HTTP/2与HTTP/3 的新特性;深入浅出 Babel 下篇:既生 Plugin 何生 Macros;Webpack 快乐学习之旅(一);在JS中实践函数式编程【2】 — 基本概念;前端面试题全面整理-带解析 涵盖(css、js、浏览器、vue、react、移动web、前端性能、算法、node);vue+webpack 更换主题N种方案优劣分析;基于 WebSocket 搭建多人聊天室

  1. 精读《用 css grid 重新思考布局》Flex 与 Grid 相比就像功能键盘和触摸屏。触摸屏的控制力相比功能键盘来说就像是降维打击,因为功能键盘只能上下左右控制(x、y 轴),而触摸屏打破了布局障碍,直接从(z 轴)触达,这样 无论 UI 内部布局再复杂…
  2. 解密HTTP/2与HTTP/3 的新特性HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。
  3. 深入浅出 Babel 下篇:既生 Plugin 何生 Macros 接着上篇文章: 《深入浅出 Babel 上篇:架构和原理 + 实战 :fire:》 这篇文章干货不少于上篇文章,这篇我们深入讨论一下宏这个玩意—— 我想我们对宏并不默认,因为很多程序员第一门语言就是 C/C++ ; 一些 Lisp 方言也支持宏(如 Clojure 、 Scheme ), 听说它们的宏写起来很优雅;一些现代的编程语言对宏也有一定的支…
  4. Webpack 快乐学习之旅(一) 记录 webpack 安装和配置的过程,以及即将遇到的各种坑. 🙂 环境:win10, webpack@3.6.0 1. webpack 安装 1.1 安装过程 在安装 webpack 之前,需要先安装 Nodejs(这个过程会自动帮你安装好 npm)。路径的话默认是 C 盘,因为强迫症,我把它安装在了 D 盘。 安装好 Nodejs 后,在 cmd 命令行里…
  5. 在JS中实践函数式编程【2】 — 基本概念 咸鱼了很久,终于失踪人口回归。今天的函数式编程是函数式系列的第二弹。在了解真正如何实现函数式编程之前我们还是先了解一些专业词汇方便后续的理解。 文章如果有什么不对的地方欢迎在评论区批评指正。 函数 函数式编程,函数式编程,最基本的构成自然是函数。比起其他普通的函数,我们其实是更关注数学上的功能。 …
  6. 前端面试题全面整理-带解析 涵盖(css、js、浏览器、vue、react、移动web、前端性能、算法、node)上期整理了一些vue面试题,本期整理总结这些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一面基础面应该没什么问题,二面也能应付大半,奉上:
  7. vue+webpack 更换主题N种方案优劣分析 需求:由于业务需要,我们需要做多套皮肤 调研了下当前行业的实现方案,五花八门良莠不齐,在此总结下各种方案有优劣及复杂度,供大家快速定位到符合自己业务的方案,以vue 单页应用为业务场景 方式一:class切换方式 实现: 在每个需要更换的页面定义多个class,根据运行时标识动态的切换class名称实现加载不同的…
  8. 基于 WebSocket 搭建多人聊天室 在上一篇博文中我们了解什么是 websocket 以及我们为什么要使用 websocket?并且运用 SpringBoot 整合websocket 来实现了前后端信息互传,那今天我们就做一个多人聊天室来加深对 websocket 的了解。 在平常的生活中我们对群聊一点也不陌生,不管是扣扣还是微信,我们都可以随手拉一个群然后在里面火热畅聊,这个群聊便…
  9. React VS Vue:2020 年应该选哪个? 每日前端夜话0xD3 每日前端夜话,陪你聊前端。 每天晚上18:00准时推送。 正文共:1978 字 预计阅读时间:10 分钟 作者:Patricia Neil 翻译:疯狂的技术宅 来源:dmitripavlutin Javascript 框架以及 HTML 和 CSS 已成为每个现代软…
  10. 基于 requirejs、vue全家桶、ant design 实现的 antd-vue-pro(模仿版) 如果您对项目源码感兴趣,在阅读源码之前,我已经默认了你已经熟练的掌握了HTML/JAVASCRIPT/CSS3 中级编程知识,熟悉 Vue.js,并且对其异步组件加载原理有了深入的认识,对 Vue 组件 template 中使用 html 模板的注意事项(不能使用PascalCase(首字母大写命名),而需要使用 kebab-case 命名方式,以及自定义组件不能以…
  11. vue.js 多种打包场景的配置 一. 认识 vue.js 中的webpack 配置文件 vue.js 开发环境与正式打包是两个 webpack 配置文件处理的。 这两个配置文件,作为开发者大佬肯定不陌生, 但是对于刚刚入门vue.js 的朋友们,肯定有些疑惑, dev配置文件,则是开发时的配置文件, prod 是打包时的文件。 还有一个 webpack.base.conf.js 文件则是公用的…
  12. vue 2.x内部运行机制系列文章 最近一直在用vue.js作为前端技术栈,闲暇之余,也简单研究了下vue.js的源码和各位前端大牛的文章,为了加深自己对vue.js的理解和完成公司的硬性要求(内部分享),于是就有了这篇系列文章。同时也趁3.0正式版发布前做2.0的最后一波总结。 vue是什么 套用官网的话,vue是一套用于构建用户界面的渐进式框架。Vue 的核心库…
  13. JavaScript相等运算符的9条规则 Java的等号有 = , == , === 三个运算符虽然都读成“等于”,但概念是不一样的, = 指的是赋值,在这篇文章中我们不会进行更多的介绍; == 称为相等运算符,比较的是两个操作数值是否相等; === 称为严格相等运算符,比较的是两个操作数是否是“同一个值”。 针对相等运算符 == 和 === ,有两个对应的 != 和 !…
  14. VueJS函数式API提案(Composition API RFC)的翻译 Vue3要出来了,所以抓紧时间看看有什么新的东西。其中Composition API涉及到的篇幅很长,所以看过之后翻译出来供大家参考,不对的地方欢迎指正。 适用版本:2.x/3.x 相关issure 概述(Summary) 一套拓展式的,基于函数的API。用于编写灵活可配置的组件逻辑。 官方课程 , API cheat sheet 下载 。 …
  15. vue 2.x内部运行机制系列文章-template模板编译原理 template模板编译主要分为三个部分,分别是parse、optimize、genarate,最终生成render function.这部分在vue.js中不属于核心,这部分内容在精力有限的情况下仅作了解即可。 先来简要介绍下它的流程 首先通过parse生成抽象生成树 其次通过optimize来标记静态节点,作用是在之后dom diff时提高性能…
  16. vue-cli3.x 配置vux // 查看vue版本,版本是3.x 以上,说明vue版本是3.0版本以上的 vue –version 复制代码 新建一个vue项目 // 这里的demo是你项目的名称 vue create demo // 我选择的是默认安装,安装完成之后 // 安装完成之后,进入到项目中 cd demo // 项目跑起来(vue-cli3 默认启动项目的命令 npm run serve) npm r…
  17. Vue开发中怎么去处理多人协作开发(二) —- Vuex篇 在上篇文章中我们对于的Vue的路由做了模块化的管理,方便在项目开发中更好的管理好自己的路由,同时也减低耦合性和维护成本。如果你对于路由篇感兴趣的话可以阅读一下Vue路由篇,有什么不足的地方或有好的想法,欢迎在评论下方留言!废话不多说,我们开搞! 行动 安装 以vue-cli为例子,当我们搭好脚手架的时候…
  18. vue 2.x内部运行机制系列文章-内部运行机制总览 先上个图,这一篇目的主要是希望各位对vue内部运行机制有个全局的认识。之后再一一详细介绍其各自的原理。 OK,废话不多说,我们来简要介绍下各模块 初始化及mount 在执行 new Vue() 后,vue 会执行一个 init() 的方法,这里的初始化包括生命周期、事件、props、data、methods、computed、watc…
  19. webpack篇:关于webpack的优化实践 在上一篇文章中,我们从零搭建了一个react的基础项目,其核心是webpack的配置,但是我们的webpack只是进行了基础的配置,保证了打包成功和项目的运行。如果我们想要打包更快呢? 基于上一篇文章中的webpack,这一篇文章就教你如何优化webpack的配置。 PS:上一篇文章看这里:point_right: 从零搭建一个自己的react框…
  20. 看vue3源码可以学到什么 : 一 、README 尤神发布vue3源码已经有大半个月,不少好奇且习惯早起的鸟儿都已经clone好大神代码的汲取养分了。作为其中的一只,再此将膜拜中的过程及收获汇沉淀汇总,以期形成一个系列提升自己。 本文作为系列第一章,将介绍开源项目必须对准开首枪的内容 README . 内容 Vue3 Readme主要内容如下 circleci 。readme开…
  21. 如何实现一个通过js调用使用的消息提示组件(Vue) 在项目开发过程中可能我们习惯了使用各种现成的UI库,它可以帮助我们快速的完成项目开发,例如我们在项目中经常使用到的Toast、Message提示组件,我们通常只需要通过js来调用就可以使用了,和我们平常使用组件的方式(import导入、components注册)并不一样,那接下来我们就自己来实现一个通过js方法来使用的组件。我们最…
  22. 国内大厂前端技术体系解密 本文从阿里前端团队开始介绍,整体技术体系涵盖:基础设施、服务层、应用层、UI组件层、跨平台、工程化、智能化,可以看到许多比较前沿的探索,对于想要了解前端发展趋势的同学非常有帮助。
  23. 你为什么看不懂源码之Vue 3.0 囊中取物 距离上一篇过去很久了。你可以快速浏览历史文章: 你为什么看不懂源码之Vue 3.0【1】 你为什么看不懂源码之Vue 3.0 面面俱到【2】 之前在看 reactive 和 ref 时,总有两团黑雾笼罩着我们,一团是 track,一团是 trigger。 二者都来自同一个文件,effect.ts。 在 响应式数据 get 时,track(target, Operat…
  24. HTTP/3 的过去、现在和未来 想要更好地了解 HTTP/3 的前世今生,以及它接下来的规划,来自 Cloudflare 博客的这篇最新文章将为你指点迷津。
  25. 30 道 Vue 前端面试题,内含详细讲解,助你前端vue学习凸凸凸 前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织,建议读者按章节顺序进行阅读,当然大佬级别的请随意。希望读者读完本文,有一定的启发思考,也能对自己的 Vue 掌握程度有一定的认识…
  26. 分析 Vue 的观察者模式(中) 在上篇 分析-Vue-的观察者模式(上) 中,简单实现了“手动”版观察者模式,而在本篇中我们继续沿着该思路往下探索,看如何实现“自动”版的观察者。 原文地址: 我的博客 ,服务器正在努力搭建,先用 github.io 顶一下 完善的观察者 紧接着上文的思路,因为我们只是实现了 Dep 依赖(管家),却还没有对平台的观察…
  27. 前端代码质量:圈复杂度原理和实践 “写程序时时刻记着,这个将来要维护你写的程序的人是一个有严重暴力倾向,并且知道你住在哪里的精神变态者。”
  28. VueJs 最佳实践✓ 原文链接 开发者们,你们好。 经过网上的一段搜索以及查阅Vue.js的 文档 ,我写下了本文中关于Vue的最佳实践以及风格指南,从而可以更正确,更优雅的使用Vue.js。 下面的要点指出了其中一些功能/优化相关,其他是VueJs命名约定和元素排序。 更详细的信息可以在 链接 中找到。 在组件销毁之后使…
  29. Electron 从零到一搭建–编写基础框架(Electron + React + Mobx + Webpack4 + Typescript) 这篇文章,主要的是讲述如何搭建Electron项目,这里会用到 上篇文章 : Webpack4+node+typescript+hotReload 搭建的 框架 ,这里,大家可以先clone下来: git clone git@github.com:spcBackToLife/node-webpack4-ts-demo.git 复制代码 基础框架的搭建主要有以下部分内容,基本每部分都是单独的一篇文章: 基…
  30. 一款基于vue和golang gin框架的私活快速搭建模板由于国内没法安装到X包下面的东西 如果可以翻墙 上面的命令就可以让你安心使用swagger了如果没有翻墙的办法那就先装一下 gopm
  31. webpack的esm 关于webpack我心中有很多疑问。。。 本篇文章就简单看下webpack如何处理esm,尽力地了解下webpack的esm大致实现ass we can 本次分析的webpack版本为4.41.2 热身 了解tapable 用途类似EventEmitter (至于为啥要搞这个,不直接在EventEmitter基础上扩展sync,async,waterfall…,我猜测可能是为了调试方便) …
  32. 分析 Vue 的观察者模式(上) 最近又鼓起勇气鼓捣 vue 源码,然后不经意间瞅了瞅最早开始学习 vue 源码时跟着撸的一个 vue-observer 的实例,发现自己对于观察者模式还是有些不太明白。因此,在学习了《JavaScript 设计模式》的“观察者模式”一篇后,总算有了一点灵感。目前趁灵感还在,在此便记录下我的理解。 原文地址: 我的博客 ,服务器正在弄…
  33. WebRTC实现p2p视频通话简介 目的 帮助自己了解webrtc 实现端对端通信 {代码…} what is WebRTC {代码…} {代码…} WebRTC组成 getUserMedia负责获取用户本地的多媒体数据 RTCPeerConnection负责建立P2P连接以及传输多媒体数据。 RTC…
  34. 什么将会替代 JavaScript 呢? JavaScript 正在蓬勃发展。但由于 WebAssembly 的出现,它的衰落可能只是一个时间问题。 有些编程语言很受欢迎。而有些只是被开发人员被迫接受。对于许多程序员来说,JavaScript 就是后者中的一个例子,每个前端开发人员都需要学习和理解这种语言,但是却没有人喜欢它。 十年前,JavaScript 还没有统治世…
  35. vue-cli3.0 创建项目流程 vue-cli3.0 的包名称由 vue-cli 改成了 @vue/cli。 如果之前有全局安装了旧版本的 vue-cli (1.x 或 2.x),需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。这里我用的是yarn。卸载完后用下面的命令全局安装 yarn global add @vue/cli 复制代码 创建项目 vue create project-name 复制…

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

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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流