20191130 前端开发周报-前端开发博客

2020年大前端发展趋势；《蚂蚁前端研发最佳实践》文字稿；2019年底前的web前端面试题初级-web标准应付HR大多面试问题；2020 年，入职前端开发的必考点；在前端 Word 还能这样玩；我们一起学习 CSS image-set()；Node.js v13.2.0 开始支持ES modules了；JavaScript 中， 5 种增加代码可读性的最佳实践

2020年大前端发展趋势迅速发展的前端开发，在每⼀年，都为开发者带来了新的关键词。2019 年已步⼊尾声，2020 年前端发展的关键词⼜将有哪些呢？发展的方向又会是什么呢？参考2019年大前端的发展，不出意外，前端依旧会围绕⼩程序、超…
《蚂蚁前端研发最佳实践》文字稿以下是我在 2019.11.15 成都全栈大会分享的文字稿，介绍了蚂蚁前端研发的最佳实践，其中我提取了三个比较重要的点，每个点都是我们实践和深入思考后的结果，希望能对大家有所启发，欢迎探讨。招人：如果你如果对这套技术栈感兴趣，希望来一起打磨优化 umi 和 bigfish，我们招人，P6-P9 不限，发邮件到 sorrycc#gmai…
2019年底前的web前端面试题初级-web标准应付HR大多面试问题作者 | Jeskson来源 | 达达前端小酒馆问：你知道在css中，html的标签元素分多少中不同的类型吗？答：大体可分三种：1，块状元素，2，内联元素，3，内联块状元素块级元素：就是每个块级元素都是从新的一行开始…
2020 年，入职前端开发的必考点 2019年还剩不到40天，刚结束金九银十”面试潮“的大四小伙伴，你们的战况如何呀？圣诞、元旦、春节，假期一晃眼就结束，等到明年三月份又要开始新一轮找工作面试。不做好准备，到时候又得白给。最近好多小伙伴反馈，说之前去面试前端开发，发现不管大公司还是小公司，都特别喜欢问跟ES6有关的问题，比…
在前端 Word 还能这样玩前阵子听到公司运营的小姐姐们在抱怨，说在富文本编辑器中发布包含图片的 Word 文档时，图片和文本内容不能一起复制，每次她们都得分开处理，对于包含较多图片的 Word 时，她们处理起来很抓狂。目前她们所使用后…
我们一起学习 CSS image-set() 哈哈哈……
Node.js v13.2.0 开始支持ES modules了Node.js 前不久发布了v13.2.0，宣布开始支持ES modules。在此之前，想要在node中使用ES modules，需要添加–experimental-module。v13.2.0版本后，可以直接使用ES modules了。
JavaScript 中， 5 种增加代码可读性的最佳实践作者：Milos Protic 译者：前端小智来源：blog.risingstack 最近几天，公众号无套路抽奖现金 200，参与方式如下：存而不论是一种对舆论场合的改善？(每月一次抽大鱼) 好消息：阿里云服务器2019Hi拼团优惠活动正在火热进行中，新老用户均可参与，2核1G云服务器仅需 79元，1核2G香港服务器仅需 719元/3年 …
使用gulp快速开发静态页如今我们开发web网页的方式主要有几种，使用 vue-cli、create-react-app、webpack、不借助构建工具等实现单页或多页网站。“工欲善其事，必先利其器”，前三种方式无疑能满足我们开发网页的绝大部分需求，但在某些情况下，比如前后端不分离(jsp、php、tpl等嵌套后端语言的方式)，以及单纯地开发一些静态页(活动页、帮助手…
最棒的前端编译原理揭秘背景整个前端领域在这几年迅速发展，前端框架也在不断变化，各团队选择的解决方案都不太一致，此外像小程序这种跨端场景和以往的研发方式也不太一样。在日常开发中往往会因为投放平台的不一样需要进行重新编码。前段时间我们需要在淘宝页面上投放闲鱼组件，淘宝前端研发DSL主要是React(Rax)，而闲鱼前端之前研发DSL主…
三年前端，面试思考（微博滴滴offer）在换工作的时候，要认真思考自己下一步的目标与未来的一个职业规划，明白自己想要什么，搞清楚自己的核心诉求，然后有方向的去投递简历，这样才能事半功倍，拿到一份心仪的offer。
Vue 之keep-alive的使用，实现页面缓存有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到 keep-alive 组件。官网释义： <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive&g…
2019 TWeb 腾讯前端技术大会精彩回顾如题。
package.json 详解Node 项目在项目根目录中名为 package.json 的文件中跟踪依赖关系和元数据。这是你项目的核心。它包含名称、描述和版本之类的信息，以及运行、开发以及有选择地将项目发布到 NPM 所需的信息。
纯 JS 实现放大缩小拖拽采坑之旅最近团队需要做一个智能客服悬浮窗功能，需要支持拖动、放大缩小等功能，因为这个是全局插件，为了兼容性考虑全部使用原生 JS 实现，不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法，在这里和…
5行代码带你实现一个js的打字效果有次看电影:clapper:，看到屏幕上一个个的文字蹦出来，感觉像是有人在打字一样，觉得挺有意思，于是这里也用js实现了一个。项目体验地址：打字效果体验项目源码地址：源码地址效果预览最简单的打字效果只要五行代码，这里直接贴出来： const dom = document.querySelector(‘.cont…
超性感的React Hooks（一）：为何她独具魅力过去大半年里，我将React Hooks应用到了许多大型项目，其中5个全新重构，其他项目由于时间关系少量使用。
9102 年，蚂蚁金服前端是怎么写图表的?相信很多开发者都有过被图表搞得很抓狂瞬间：业务压力大，想快速上个图表，折腾半天配出来却丑的不能看；Demo 里明明看着很美，换成真实数据立刻变成买家秀了….. 很长一段时间里，这些问题也在困扰着蚂蚁的前…
webpack入门笔记 mkdir webpack-demo cd webpack-demo npm init // package.json { +"private":true// 代表该文件不会被发布到npm仓库上去 -"main":"index.js"，//因为只是自己使用，所以不需要向外暴露入口文件 } 复制代码 npm install webpack webpack-cli -D 在项目内安装we…
es6总结数组的结构 var [a,b,c] = [1,2,3];console.log(a);console.log(b);console.log(c);
vue源码阅读二：虚拟 DOM 是如何生成的？（上）我们看源码，我觉得最好带着问题去看源码，这样我们会专注于一个点去看源码，不会被源码的一些其他功能，把我们带离最初想去的地方。本章主要的目的是，弄明白 vue 是如何生成虚拟 DOM 的。从入口开始我们从入口文件一步一步慢慢的分析。先看入口文件。入口文件： web/entry-runtime-with-compiler.js …
Web性能优化之——浏览器缓存在前端开发中，一个网站的性能最直观体现就是网页打开的速度，而提高网页反应速度的一个方法就是使用缓存。 Web 缓存常用来保存一些常见的资源文件，当 Web 请求抵达资源时，如果本地有“已缓存的”文件，就可以直接从本地读取而不用从原始服务器中提取这个文档。通过设置 Web 缓存，可以达到几点优化：减少冗余…
手动搭建一个webpack项目 npm install webpack webpack-cli webpack-dev-server –g 依赖安装： npm install webpack webpack-cli webpack-dev-server –save-dev 三、创建 Js模块创建，模块化开发－模块接收暴露这里需要知道的是：(es5和es6写法上的不同) eg: a.Js 暴露模块 module.exports=obj; || export default …
总结几个webpack打包优化的方法项目越做越大，依赖包越来越多，打包文件太大单页面应用首页白屏时间长，用户体验差我们的目的减小打包后的文件大小首页按需引入文件优化 webpack 打包时间优化方式 1、按需加载 1.1 路由组件按需加载 const router = [ { path: ‘/index’, component: resolve => require.ensure…
优雅地用Vue生成动态表单开需求会了，产品说这次需求的表单比较多，目前有18个，后期的表单可能会有增加、修改。我作为这次的前端开发，看到这样的需求，心里知道要这样搞不得把自己累死，首先表单居多，还会有变更，以后维护起来也让人心力憔悴。于是我提议做动态表单，做一个表单的配置系统，在系统里配置表单类型、表单得字段、以及对表单…
前端基础整理-MVVM相关Model、View、Controllermvc有如下两种形式，不管哪种都是单向通信的，实际项目一般会采用灵活的方式，如backbone.js，相当于两种形式的结合MVC实现了功能的分层，但是当你有变化的时候你需要同时维护三个对象和…
HTML5 与 CSS3 基础完全自学教程（八）本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！导读：本小节主要讲解了 CSS 选择器中的第三种分类 —— 组合选择器。通过本小节的学习，可以很好地掌握组合选择器的用法，也可以对之前已经学习的 CSS 选择器的用法做个回顾和总结。组合选择器…
通过 GASP 让 Vue 实现动态效果原文地址: https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a 原文作者: Daily Fire 翻译作者: hanxiansen 中文标题：通过GASP让vue实现动态效果单页应用及支持它们的前端框架提供了一个很好的机会，可以为程序设计提供令人惊叹的交互层，本文，我们将了解 vue.js 及如何集成 GASP 动画库来添…
为什么在JavaScript中['1', '7', '11'].map(parseInt)返回[1, NaN, 3] 本文摘自：《Why .map(parseInt) returns in Javascript》译者：战五渣 JavaScript真的很奇怪，不相信我？那我们尝试用 map 和 parseInt 将字符串数组转换成整数数组。在chrome上启动控制台（win为F12键，mac为cammand+option+i），复制粘贴下面的代码，然后回车运行。 …
Vue中使用provide/inject实现页面reload的方法在实际的Web开发项目中，经常会遇到在列表删除一条数据或者新增数据之后需要重新刷新当前页面的需求，以获得最新的列表数据。通常可以使用window.reload()或者router.go(0)刷新整个URL让当前页面重新加载来实现，但是会有闪烁，体验不好。在Vue中，可以使用provide / inject 组合来实现刷新这个功能，原理就是用v-if销毁…
基于 HTML5 WebGL 构建智能城市 3D 场景随着城市规模的扩大，传统的方式很难彻底地展示城市的全貌，但随着 3D 技术的应用，出现了 3D 城市群的方式以动态，交互式地把城市全貌呈现出来。配合智能城市系统，通过 Web 可视化的方式，使得城市管理者可以更…
webpack构建流程及梳理 webpack的核心功能是通过抽离出很多插件来实现的，因此系统内功能的划分粒度很细，这样做到了完美解偶同时又分工明确，代码容易维护。可以说插件就是webpack的基石，这些基石又影响着流程的走向。这些钩子是通过Tapable串起来的，可以类比Vue框架的生命周期，webpack也有自己的生命周期，在周期里边会顺序地触发一些钩子…
webpack核心模块解析 webpack的运行分很多阶段，每个阶段都有一个钩子，我们可以在钩子上注册我们自定义的插件。注册后，我们自定义的插件会在钩子运行阶段执行。 webpack的钩子 webpack.docschina.org/api/compile… （二）webpack中的插件定位插件目的在于解决 loader 无法实现的其他事。插件是 webpack 的支柱功能。…
在前端 IPA & APK 还能这样玩近期公司为了方便管理内部多个不同版本的测试包，打算在公司内部搭建一个类似蒲公英/fir.im 的安装包管理平台。经过本人的一番搜索在 Github 上发现了 fabu.love 这个项目，基于该项目搭建的应用发布平台，可支持安装包管理、检查更新，灰度发布等功能。此外该项目采用前后端分离的开发方式进行开发，前端技术栈采用 Vue…
前端跨域问题解决方式出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓…
JavaScript内存空间图解栈, 计算机专业的同学可能都有些了解. 讲究的是一个先进后出. 今天我们简单的来过一下. 可以想象为只有一个口子的一条路, 这条路. 每次呢只进去一个人. 后面的人进来的, 只有等后面的人出去了, 先进去的才可以出来. 所以就是先进后出堆数据结构堆数据结构是一种树状结构。它的存取数据的方式与书…
在 HTML5 上开发音视频应用的五种思路问题背景：无论是实时视频监控还是直播点播等应用场景，最起码的一个操作就是播放视频。其中最基本的思路就是利用OS的API在PC开发桌面应用、在移动端开发Native App，目前这种技术已经成熟，大厂小厂都是这么做的，但是缺点也很明显：开发比较费时费力，需要IOS开发一遍再去Android开发一遍。特别对于一些非…
来聊聊前端的异步出现的原因 JavaScript语言的执行环境是"单线程" 所谓"单线程"，就是指一次只能只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。单线程这种模式好处是实现起来比较简单，执行环境单一。坏处是只要有一个任务耗时很长，后面的任务…
Web 站点接口优化实践渣渣飞渣渣飞，长年在票圈深夜放毒，是网易游戏高级运维工程师，对代码性能及系统原理饶有兴趣，三人行，必有我师。现负责监控相关业务开发。背景一款受广大猪场程序GG喜欢的工具产品，在上周发现设置页面的加载特别特别地慢，简直令人发指。 …
五个大型项目实践总结，解密React Hooks最佳实践我也不知道应该说点撒。就是一个目录，后续应该还有10多篇的样子，主要是实战，更新了会把目录补上。超性感的React Hooks（一）：为何她独具魅力超性感的React Hooks（二）：再谈闭包超性感的React Hooks（三…
简单使用vue-cli 上一篇我们简单的看了看vue的基本用法，就是三步，首先就是用<script>标签引入vue的依赖，然后就是写html标签，在标签中用vue指令绑定一些属性，最后就是new Vue(xxx)实例，在这个实例中有很多的实例属性可以给html标签中那些绑定的属性赋值、或者是绑定事件函数；这一篇我们来说说vue-cli这样的一个脚手…
推荐几款 Angular 工具，轻松实现高性能目标本文主要分享一系列新型工具与实践，旨在帮助大家快速构建 Angular 应用并监控其性能表现。在各章节中，我们将具体探讨如何将这些工具与实践整合至项目当中，同时配合对应链接。本文的重点在于缩短初始加载时间，并利用代码分割与预加载机制加快页面导航速度。我们将关注以下几大主题：代码分割预加载策略…
《React 函数式组件性能优化指南》本文只介绍函数式组件特有的性能优化方式，类组件和函数式组件都有的不介绍，比如 key 的使用。另外本文不详细的介绍 API 的使用，后面也许会写，其实想用好 hooks 还是蛮难的。（by 桃翁）
通过事例重温一下常见的 JS 中 15 种数组操作(备忘清单)好消息：阿里云服务器2019Hi拼团优惠活动正在火热进行中，新老用户均可参与，2核1G云服务器仅需79元，1核2G香港服务器仅需719元/3年，更多服务器配置及价格请关注：Hi拼团，或点此了解“云上爆款2折特惠活动”。同…
Angular8 引入百度 Echarts，进行图表分析 Angular8 引入百度Echarts，进行图表分析原文地址：传送门最近突发奇想，想自己做一个理财分析记录的网页，主要给自己记账，然后想到了把每天，每周的消费用图标分析出来，于是就需要用到百度的echarts图标插件，talk is cheep， show me the code。 1. npm 安装ngx-echarts及相关的依赖 npm install echarts…
Vue.directive 实现元素scroll逻辑复用继上篇Vue 滚动触底 mixins,将对于文档滚动触底的逻辑迁移到某个dom上，将会用到 Vue.directive 来实现代码逻辑复用。元素滚动如何实现滚动元素实现滚动的条件有两个: 有父子两个元素子元素的高度 > 父元素的高度, 并且父元素设置 overflow:scroll / auto; scrollHeight …
JavaScript 关于setTimeout与setInterval的小研究
万字长文，20-50K前端工程师部分面试题集锦 – 附答案现在20-50K的招聘，我们先看看是什么要求？蚂蚁金服招聘要求：虾皮招聘：腾讯：明源云：毫无疑问，这些公司都是招聘的大前端技术栈的职位，之前文章提到过2020年大前端最理想的技术栈，其实真的弄得很明白…
JavaScript函数_执行环境（十八）目录： 1.什么是执行环境 2.浅谈作用域链一、什么是执行环境执行环境定义了变量或者函数有权访问的其他数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象。环境中定义的所有变量和函数都保存在这个对象中。虽然我们在编写代码的时候无法访问这个对象，但解析器在处理数据时会在后台用到它…
Node.js 中实践基于 Redis 的分布式锁实现在一些分布式环境下、多线程并发编程中，如果对同一资源进行读写操作，避免不了的一个就是资源竞争问题，通过引入分布式锁这一概念，可以解决数据一致性问题。作者简介：五月君，Nodejs Developer，慕课网认证作者，热爱技术、喜欢分享的 90 后青年，欢迎关注 Nodejs技术栈和 Github 开源项目 www.nodejs.red 认…
一文读懂JavaScript的并发模型和事件循环机制在浏览器实现中，每个单页都是一个独立进程，其中包含了JS引擎、GUI界面渲染、事件触发、定时触发器、异步HTTP请求等多个线程。
进阶的ajax——ajax实现临时文件下载通过a标签 <a target="_blank" href="//www.xxx.com/download/file.txt" download="file">下载</a> 复制代码通过form表单 <form action=’/download’ method=’post’> <input type="text" name="name" value="file"/> …
【今日头条页面秒开，前端技术有何黑科技？】相信大家肯定读到过很多加载速度和转化率之间的关系的文章，在商业化领域，广告落地页的加载速度会很大程度上影响最终的转化率，在性能优化到一定瓶颈之后，不得不借助一些额外的能力做进一步的优化，我们最终的目标是达到落地页的“…全文
Webpack插件机制之Tapable-源码解析
总结Springboot和Vue前后端分离的跨域问题
SpringBoot2.0整合WebSocket，实现后端数据实时推送之前公司的某个系统为了实现推送技术，所用的技术都是Ajax轮询，这种方式浏览器需要不断的向服务器发出请求，显然这样会浪费很多的带宽等资源，所以研究了下WebSocket，本文将详细介绍下。一、什么是WebSocket？ WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议，能更好的节省服务器资源和带宽…
webpack编译流程浅析 webpack 只支持JS模块，所有其他类型的模块，比如图片，css等，都需要通过对应的loader转成JS模块。所以在webpack中无论任何类型的资源，本质上都被当成JS模块处理。 Webpack 源码是一个插件的架构，他的很多功能都是通过诸多的内置插件实现的。从配置文件读取 entry 开始，到最后输出 bundle.js 的过程，就是主线 …
深入js基础：从内存机制、解析机制到执行机制（长文预警）最近有些懒, 加上公司项目较多, 没有来得及更。这次选题比较纠结, 本来想继续围绕webpack, 但无奈在私下和一些同学聊天时, 无意中发现大部分同学对Js运行机制和内存机制并不是很了解。在做了一些分享后, 于是决心梳理下Js的底层基础和原理，所以有了这篇文章, 主要面向初中级前端同学。这篇文章能学到什么？堆，…
JavaScript中的浅拷贝和深拷贝我第一次接触浅拷贝和深拷贝的概念是在学 C 和 C++ 的时候,虽然现在已经差不多忘得干干净净了,但我记得一点的是它们和内存是有关系的。之后再看到这个概念在面试中提到，我天真的以为，浅拷贝就是这样子的： var a = { name: ‘老曹’ }； var b = a; 复制代码后来大致搞懂后，才知道我是多么的无知… 在讲…
Spring Boot 系列教程 Web 篇之开启 GZIP 数据压缩本篇可以归纳在性能调优篇，虽然内容非常简单，但效果可能出乎预料的好；分享一个真实案例，我们的服务部署在海外，国内访问时访问服务时，响应有点夸张；某些返回数据比较大的接口，耗时在 600ms+上，然而我们的服务 rt 却是在 20ms 以下，绝大部分的开销都花在了网络传输上针对这样的场景，除了买…