20200120 前端开发周报

小蝌蚪传记：60行代码实现nodejs线上模块热部署；带你了解 vue-next（Vue 3.0）之 炉火纯青；前端性能优化之重排、重绘与合成；记录优化 Vue 应用的首次加载速度；前端面试基础篇，凛冬将至道友快来一起闭关修炼；webpack原理解析（二）实现一个简单的Loader；核心版vue-router, 仅仅只需80行代码；Vue 3 真香

1. 小蝌蚪传记：60行代码实现nodejs线上模块热部署 晚十二点，床上 富婆：这是给你的500元，辛苦了 小蝌蚪：不辛苦，主人 富婆：我老公要回来了，你走吧 小蝌蚪：是，主人 说完小蝌蚪从三楼别墅跳了下去 。。。 小蝌蚪是一名程序员，也是一个技师 白天敲代码，晚上捏脚 由于常年敲代码，所以指法高超 时常把客户按到上天日龙 。。。 富婆年轻、有钱，但是缺爱…
2. 带你了解 vue-next（Vue 3.0）之 炉火纯青 看完上两章 初入茅庐 小试牛刀 之后，大家应该对 vue-next（Vue 3.0） 的 API 使用已经了如指掌了。好奇的同学一定对 vue-next 响应式的原理充满好奇，本章就带你解密！ 前言 最新 vue-next 的源码发布了，虽然是 pre-alpha 版本，但这时候其实是阅读源码的比较好的时机。在 vue 中，比较重要的东西当然要数它的响…
3. 前端性能优化之重排、重绘与合成 在项目的交互评审中，前端同学常常会对一些交互效果质疑，提出这样做不好那样做不好。这是因为这些效果通常会产生一系列的浏览器重绘和重排，需要付出非常昂贵的性能代价。 本文期待可以部分解释以下两个问题。 什么是浏览器的重绘和重排呢？ 二者发生时都引发哪些渲染流程？ reflow 重绘(也称回流)，…
4. 记录优化 Vue 应用的首次加载速度 Halo 的管理端使用的是 Vue 来构建的，随之收到不少反馈后台加载过于缓慢，其主要原因就是打包好的 Vue 应用的静态资源又多又大，可能同时就几十个请求，这对于一些小水管的服务器来说简直是致命的打击。 解决办法 使用公共 cdn，我们只需要把打包好的静态资源丢在公共 cdn 上引用就好了。那么如何优雅的上传…
5. 前端面试基础篇，凛冬将至道友快来一起闭关修炼 借用神剧《权游》的名句：“凛冬将至！”，互联网寒冬已然来临，这一年以来keep/滴滴/京东/腾讯/华为等大厂裁员事件不断爆出！惊醒着头发慢慢脱落、变少的我们，是时候闭关修炼了！ 本文为前端面试基础篇，将以 面试题 && 答案【参考 (๑¯∀¯๑)】的形式，闭关修炼，希望你查漏补缺，完善你的知识体系！ …
6. webpack原理解析（二）实现一个简单的Loader webpack中 loader 是一个非常重要的概念，loader 可以简单的理解成一个文件处理器，webpack使用 loader 来处理各类文件，比如 .scss 转成成 css 文件, 小图片转换成base64图片。 本质上讲， loader 只是导出为函数的 JavaScript 模块，webpack打包的时候，会调用这个函数，把上一个loader产生的结果或资源文件(r…
7. 核心版vue-router, 仅仅只需80行代码 vue-router作为vue全局桶的一个核心类库, 其实现方式, 有着很多巧妙之处, 你是否真正了解呢? 使用一个vue-router的正确姿态. 最简单的是通过cli安装一个vue-router插件, 会自动的修改我们项目的代码, 正确的使用vue-router. 一条命令搞定. vue add router 复制代码 正确的姿态. 新建一个路由配置文件. import…
8. Vue 3 真香 到目前，vue 3 gayhub 官选 除了服务端渲染外，大部分工作已经完成了，vue-loader也有了初版,意味着可以去尝鲜了。 目标 做个todoMVC vue3.0 基本功能 新增 编辑 删除 修改状态 展示 (all，active(非active), compeleted(非compeleted)) Gayhub 地址 github.com/Ch…
9. Vue响应式原理解析（附超详细源码注释和原理解析） 上一篇我们深入分析了数据驱动视图渲染( juejin.im/post/5e06b4… )的原理以及源码解析，感兴趣的可以去瞅一眼，那么这一次我们接着套路，讲一下数据是如何驱动视图更新的，也就是Vue的响应式原理，let go! 案例 <div id="app" @click="changeName"> {{ name }} </div> var app =…
10. 搭建一个vue-cli的移动端H5开发模板vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板，其中已经搭建好基本的开发框架，可帮助您实现快速开发。 技术栈：vue + vux + axios + less
11. 5 个奇怪的只会在 JS 里才发生的趣事 原文链接： xtrp.io/blog/2019/1… JavaScript 是一门棘手的语言，就其代码的解析和运行方式，容易让人感觉困惑。这是一门面向对象的语言，但很多年来语言标准里没有类。它最初是为浏览器创造的，但现在也可以在服务器上运行，还可以操作文件系统。 多年以来，我碰到了一些特殊且有趣的代码。下面展示的这些例子仅…
12. 从0实现一个前端微服务（上） 什么是前端微服务，网上大把的介绍，我就不啰嗦了，简单来说，就是把各个子项目整合到一起。 《前端架构：从入门到微前端》 这本书中介绍，微前端架构一般可以由以下几种方式进行： 使用 HTTP 服务器的路由来重定向多个应用（也就是链接跳转） 在不同的框架之上设计通讯、加载机制，诸如 Mooa 和 Single-SPA …
13. 【小小前端】浅谈浅拷贝与深拷贝 最近做项目遇到一个问题，后台没有做查看列表详情的接口，于是乎只能从已获取的数据里面查找展示。但是问题来了，在一次编辑的时候，把手机号清空之后，就关了dialog，并没有修改数据。按照正常思维，此时列表中的数据应该不变的，但是邪门的事情出现了，刚刚编辑的那行数据的手机号不见了！！天啦，怎么回事，我也没有…
14. 用Node.js编写内存效率高的应用程序软件应用程序在计算机的主存储器中运行，我们称之为随机存取存储器(RAM)。JavaScript，尤其是 NodeJS （服务端 JS）允许我们为终端用户编写从小型到大型的软件项目。处理程序的内存总是一个棘手的问题，因为糟糕…
15. JavaScript的强语言之路—另类的JSON序列化与反序列化 JSON（JavaScript Object Notation）是一种轻量级，完全独立于语言的数据交换格式。目前被广泛应用在前后端的数据交互中。在JavaScript中的应用随处可见，灵活性、扩展性、可读性也是最强的！对应的 JSON.parse 与 JSON.stringify 就可以看做是对象的序列化和反序列化，将对象与字符串之间相互转换。 序列化与反序列…
16. Promise（1）—3分钟掌握最基本的Promise原理 学习是一个漫长的过程，需要循序渐进，要想深入的理解一门技术，需要沉下心来慢慢研究。要做到通过现象看本质，学Promise的同时也会用到高阶函数和发布订阅，只有掌握了那些通用的技术，才能够更有效的学习下去，更好的看到本质。慢慢的你会发现通过深入学习一个Promise，收获的却不只是Promise。 一、什么是Promise P…
17. JavaScript 初学者容易犯的几个错误，你中招没？ JavaScript 是对初学者比较友好的一门编程语言，基本上花个半小时看下语法就能写出能运行的代码。JavaScript 是动态脚本语言，对数据类型没有太多的限制，写起来非常灵活。但正因为如此，初学者如果不深入了解语言本身，往往会犯一些错误，从而导致一些很难发现的 bug。 抛开 JavaScript 语言设计层面的问题不说，毕竟…
18. 前端异常捕获和定位 于前端而言，不管是开发还是生产阶段，异常的捕获和定位都是至关重要的。 开发阶段，通过详细的报错信息，我们可以快速定位并解决问题。在生产，通过异常监控，根据异常埋点信息，我们可以第一时间知道异常信息，不至于造成严重后果。 window.onerror 全局监听异常来捕获 借鉴下 MDN 的说明，当 JavaS…
19. 「面试重点」聊一聊JS中call、apply、bind里的小心思 面试的重点难点的坑来啦！~/(ㄒoㄒ)/~~不出意外，this在ES5中是比较头疼和让初学者恐惧的一块，尽管在 ES6 中可能会极大避免 this 产生的错误，但是为了前端初学者能够在使用上能够将call,apply,bind等容易混淆的this指向问题，最好还是了解一下call、apply、bind 三者的区别，以及它们在底层中是如何来实现的~ call、a…
20. 看完这几道 JavaScript 面试题，让你与考官对答如流（中）点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
21. React开发日记-React Hook/Mobx 数据状态管理对比 前提 在之前项目中，我们一般是用mobx做数据状态管理，本文尝试使用新的方式–react hook，实现状态管理，比较新旧方式的异同。 本文后面的所有内容的上下文都是在react项目中 欢迎指正，欢迎提出需要补充的地方。 复制代码 Mobx 先对mobx进行简单介绍，如下图可见， 从左往右顺序查看 1有且仅有action可以用于修…
22. vuex 知识点梳理 vuex的应用场景，大家可能或多或少知道，用来管理一些全局数据，或者多个页面都会使用到的数据，比如，我们项目中常见的用户信息，通常使用vuex来管理。 这里，我们思考一个问题，如何没有vuex，还有哪些方式可以实现一些公共数据的管理？ 把公共数据存储到根实例中，其他页面都可以通过 this.$root 来获取根实…
23. 使用 webpack 构建 chrome 扩展的热更新问题 前不久我写了一个 chrome 扩展，作为一个前端弄潮儿，我肯定是想用上各种前端界最 fashion 的开发工具。于是乎，折腾到最后是使用了 webpack + TypeScript + react 这么一套技术栈。在 github 上研究了几个模板项目之后，我感觉大多数都太初级了，功能太简单，而且有一个功能我始终没发现有哪个项目解决了，也就是当修改…
24. 响应式编程入门指南：通俗易懂 RxJS 全文篇幅较长，建议选取一段独立的时间来阅读此文。 RxJS 是 Reactive Extensions for JavaScript 的缩写，起源于 Reactive Extensions，是一个基于可观测数据流 Stream 结合观察者模式和迭代器模式的一种异步编程的应用库。RxJS 是 Reactive Extensions 在 JavaScript 上的实现。 按照正常的节奏，听到 RxJ…
25. 前端利用canvas给图片添加水印前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图…
26. 你可能不是那么了解的 CSS BackgroundBackground，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，背景嘛。MDN 中对其的定义如下：
27. 带你了解 vue-next（Vue 3.0）之 初入茅庐 这几天，陆续学习了解了关于 vue-next（Vue 3.0） 的一些新特性，尤其是新的 Composition API 的用法。这套新的API中最重要、最核心的部分，恐怕就是实现响应式功能的这一块了。而且，这套响应式API不仅可以在 vue-next 环境下使用，也可以独立使用。 笔者在阅读源码看到， vue-next 已全部由 TypeScript 构建，看来…
28. Promise(1)：Promise/A+规范 与Promise最主要的交互方法是通过将函数传入它的then方法从而获取得Promise最终的值或Promise最终最拒绝（reject）的原因 术语 promise是一个包含了兼容promise规范then方法的对象或函数， thenable 是一个包含了then方法的对象或函数。 value 是任何Javascript值。 (包括 undefined, thenable, promise等). …
29. VSCode – 一键生成.vue模版 @ VSCode – 一键生成.vue模版 create by db on 2020-1-16 14:25:40 Recently revised in 2020-1-17 14:18:17 Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！ GitHub 地址 前言 VSCode作为一个轻量且强大的代码编辑器，它支持Windows，OSX和Linux。…
30. 看完这几道 JavaScript 面试题，让你与考官对答如流（下）点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
31. 如何全方位优化你的超大型 React 应用？ React为了大型应用而生，Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力，Taro则赋予了它一次编写，生成多种平台小程序和React-native应用的能力，这里特意说下 Taro，它是国产，文档写得比较不错，而且它的升级速度比较快，有issue我看也会及时解决，他们的维护人员还是非常敬业的！ …
32. Vue多页面优化踩坑记录 最近优化之前的项目，从单页面拆分成了多页面，这里记录下整个踩坑过程。 拆分成多个页面 1.将原项目的单页面替换为多页面 这里我添加了 index.html 和 user.html 两个页面。 2.配置vue.config.js // vue.config.js const titles = require(‘./title.js’) const glob = require(‘glob’) cons…
33. 堡垒机 WebSSH 进阶之实时监控和强制下线 这个功能我可以不用，但你不能没有 前几篇文章实现了对物理机、虚拟机以及Kubernetes中Pod的WebSSH操作，可以方便的在web端对系统进行管理，同时也支持对所有操作进行全程录像，以方便后续的查看与审计 这一篇文章接着实现一个看起来很炫酷，但实际上你可能不会经常使用，又必须要存在的功能：实…
34. 2020年了，你真的了解js对象的属性吗 JavaScript对象的属性，看起来是一个很简单的问题，但是往细了想有很多细节需要注意。比如，可枚举属性与不可枚举属性的区别是什么，当我们打印一个对象的时候，打印的是对象本身的属性，还是包含继承的属性？我们去遍历一个对象的时候，多种方法之间又有什么区别？在这里我们做一个全面的分析和总结。 属性的设置 在…
35. 都2020了，还不懂js运算符优先级？ function F() { this.a = 1 this.f = function() { this.a = 3 } } F.f = function() { this.a = 2 } var r = new F.f() 复制代码 A. {a: 2} B. {a: 1, f: ƒ} C. {a: 3} 答案 答案： A 先执行F.f, 再执行new …() 2. str等于什么 var str = "Hello"…
36. JavaScript️可视化：事件循环 本系列包括6篇文章 JavaScript️可视化：事件循环 JavaScript️可视化：变量提升 JavaScript️可视化：作用域链 JavaScript️可视化：js引擎 JavaScript️可视化：原型继承 JavaScript️可视化：生成器和迭代器 哦，事件循环。这是每个JavaScript开发人员都必须以一种或另一种方式处理…
37. JavaScript四舍五入及精度丢失问题在JS中使用数值计算时，经常会遇到未知的结果。问题：用toFixed保留小数时，四舍五入规则不固定：常见的解决思路：将小数放大为整数，进行四舍五入后，再缩小为小数。
38. JS 中的同步与异步 虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 (点击绿色图标,可收听音频) 撰文 | 川川 VX-ID:suibichuanji 点击文…
39. 基于 Flask 和 Vue 的词云生成应用 这是一个前端用 Vue，后端用 Python 的 Web 框架 Flask 开发的词云生成应用，代码已上传到 flask-vue-word-cloud 。写这个小项目的起因是最近团队年终述职，有一些大佬的 PPT 上用了词云来展示自己团队一年的工作成果。还有大佬说不要守着自己的一亩三分地，在技术上拓宽视野可以帮助我们更好的成长。正好之前接触过 Pyt…
40. 你应该知道的前端面试题（万字总结） 自己整理出来的一些前端工程师必备的面试题，面试中出场率很高，相信小伙伴在找工作或者跳槽中能够顺利找到自己想要的工作。 Html 1、DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义？ DOCTYPE的作用是告诉浏览器使用哪种版本的HTML规范来渲染文档。当DOCTYPE不存在或者形式不正确时会导…
41. 前端业务实践中的异步问题 异步任务相比同步任务的复杂之处，主要在于返回结果的时机不可控，由此带来超时控制、顺序控制、竞态、最大并发等一系列问题。 单个的异步和简单的并发一般在语言层面就获得了支持，就前端而言，Promise 和 Async 是如此普及，以至于有些新人可能连 callback 都不认识了，建议看看《深入浅出nodejs》中关于异步的章节，…
42. 重学前端之JavaScript(二)JavaScript的语句一、定义  条件语句: 当条件满足时,执行一段语句二、JavaScript中的条件语句  1) if…else if … else: 当指定条件为真,if语句会执行一段语句,如果不满足再考虑else if的条件,若是还不满足,则执行 else里的语句
43. JS 常用继承实现方式 看《JavaScript 设计模式》，关于里面提到的JS继承实现的方式，分为三种，且书中都给出了相关实现。这里也不再做讲解，只求记录一下，因为自己总是有时候会忘记这些东西。 类式继承，extend 原型式继承，clone 掺元类继承，augment 类式继承的实现，这里面很有必要引人注意的是，superclass.prototype.constr…
44. VUE：如何把slot从父组件传到子组件 有A、B、C三个component，分别包含不同的slot: const A = { template: `<div><slot name="a">Default A Content</slot></div>` } const B = { template: `<div><slot name="b">Default B Content</slot></div>` } const C = { template: …
45. 一个白学家眼里的 WebAssembly 在知乎 如何看待 WebAssembly 这门技术？ 这个问题里，可以看出大家普遍对浏览器、WASM 和 JS 之间的三角关系有不少误解。因此这里作为一个开 (bai) 发 (xue) 者 (jia)，我就来尝试纠正些常见的问题吧。 WASM == 汇编级性能？ 这显然不对，WASM 里的 Assembly 并不意味着真正的汇编码，而只是种新约定的字节码，…
46. 捕获 React 异常韩国某著名男子天团之前在我们平台上架了一张重磅数字专辑，本来是一件喜大普奔的好事，结果上架后投诉蜂拥而至。部分用户反馈页面打开就崩溃，紧急排查后发现真凶就是下面这段代码。
47. 全网最详bpmn.js教材-properties-panel篇(上) 前言  Q: bpmn.js是什么? ️ ” bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.  Q: 我为什么要写该系列的教材? ️ ” 因为公司业务的需要因而要在项目中使用到 bpmn.js ,但是由于 bpmn.js 的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很…
48. webpack 4 源码主流程分析（十四）：webpack 优化 原文首发于blog.flqin.com。如有错误，请联系笔者。分析码字不易，转载请表明出处，谢谢！ 前面一至十一章，介绍了在 development 的模式下，整个完整了构建主流程。在了解构建流程的基础上，本章整理一些与 webpack 优化相关的知识点。 production 模式 我们参考 production 模式里，里面已经做了大部分的优…
49. 远程iPhone Exploitation Part 3：从内存破坏到JavaScript再获取代码执行 此时，ASLR已被破坏，因为已知共享缓存的基地址，并且可以使用堆喷射将受控数据放置在已知地址。剩下的就是再利用一次漏洞来执行代码。 在介绍了一些ObjC内部相关的结构之后，将介绍没有PAC的设备利用方法。它涉及到创建代码指针，因此它不再与启用PAC时一起使用。将介绍针对PAC和非PAC设备的另一种利用方发。最后，我…
50. Vue 3.0实践：使用Vue 3.0做JSX(TSX)风格的组件开发 前言 我日常工作都是使用React来做开发，但是我对React一直不是很满意，特别是在推出React Hooks以后。 不可否认React Hooks极大地方便了开发者，但是它又有非常多反直觉的地方，让我难以接受。所以在很长一段时间，我都在尝试寻找React的替代品，我尝试过不少别的前端框架，但都有各种各样的问题或限制。 在看到…
51. Webpack之Javascript的编译 如果单纯的babel-loader发现并没有将es6转为es5，这个时候还需要babel-preset； Presets是存储Javascript不同标准的插件，通过使用正确的Presets,告诉babel按照哪个规范编译； 常见规范 es2015 es2016 es2017 env（通常采用） babel-preset-stage babel-preset-env 可以根据配置的目标浏览器或者运行环境来自动将…
52. 基于 RBAC 的 Web 应用权限管理的思考 写在最前 仅针对单一应用, 如果需要多应用的统一权限管理, 可能还需要加上「应用」这个层级的范围 以类似「白名单」的形式来计算权限, 保持的是一种累加的方式, 没有考虑权限互斥的情况, 也没有加入「黑名单」的设置 如果不需要特别针对某一个用户授权, 可以在角色绑定时, 只使用组id …
53. 带你了解 vue-next（Vue 3.0）之 小试牛刀 看完上一章 初入茅庐 之后，相信大家已经对 vue-next（Vue 3.0） 有所了解了。本章带你掌握 vue-next 函数式的API，了解这些的话，无论是对于源码的阅读，还是当正式版发布时开始学习，应该都会有起到一定的辅助作用。 基本例子 直接拷贝下面代码，去运行看效果吧。推荐使用高版本的chrome浏览器，记得打开F12调试…
54. 宝塔面板安装NodeJS Api 程序并配置https教程先参考作者大西瓜的 : https://www.bilibili.com/video/av67066415?t=91 大致了解流程 ;再参考作者竹映平昔的 : https://www.bwmelon.com/archives/27/ 跟着一起做 ;
55. 美团点评技术年货：900+ 页电子书，覆盖前端、后台、大数据、算法…… 新年将至，年味渐浓。美团点评技术年货如期而至。从2013年12月4日发布第一篇文章，一直到今天，美团技术团队官方博客已经走过了6个春秋。截止目前，我们共发布376篇技术文章，微信公众号（meituantech）的关注者也超过20万。由衷地感谢大家一直以来对我们的鼓励和陪伴！2020年春节到来之际，我们精选美团技术博客几十篇…
56. TypeScript从零实现基于Proxy的响应式库，带你彻底搞懂Vue3的响应式原理 笔者最近在浏览React状态管理库的时候，发现了一些响应式的状态管理库如 hodux , react-easy-state ，内部有一个基于proxy实现响应式的基础仓库 observer-util ，它的代码实现和Vue3中的响应式原理非常相似，这篇文章就从这个仓库入手，一步一步带你剖析响应式的实现。 本文的代码是我参考 observer-util 用ts的…
57. Promise(2)：手动实现Promise Promise对象初始状态为 Pending，在被 resolve 或 reject 时，状态变为 Fulfilled 或 Rejected resolve接收成功的数据，reject接收失败或错误的数据 Promise对象必须有一个 then 方法，且只接受两个可函数参数 onFulfilled、onRejected const REJECTED = ‘rejected’; const RESOLVED = ‘resolved’; const PENDING…
58. JavaScript 中的 NaN另外还有 2 个特殊的数字值：Infinity（比其他任何数字都大的数字）和 NaN（表示“Not A Number”概念）：
59. Nuxt.js的那些事儿（一） 在这段时间中了解到VueSSR框架( Nuxt.js )，自己体验了一下，还挺不错的，自己找了一个(知乎招聘)官网模仿了一下，在下面的内容，我将记录自己基于express+nuxt.js+less+axios怎么去开发，因为是自己的练手项目，不足的地方还是很多，希望大家多多包涵，多多提建议改进，我已经将项目源码放置在 github☞ 开始 搭建…
60. 如何高效使用 Git Git 工作流 只要项目是多人参与的，那么就需要使用正确的 Git 工作流程。 下面介绍一个简单有效的工作流程。 场景 假设有一个项目，要开发下一代的 Facebook，你就是这个项目的技术 leader，你的团队有3个开发人员： Alice：1年开发经验 Bob：1年开…

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

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

小蝌蚪传记：60行代码实现nodejs线上模块热部署；带你了解 vue-next（Vue 3.0）之 炉火纯青；前端性能优化之重排、重绘与合成；记录优化 Vue 应用的首次加载速度；前端面试基础篇，凛冬将至道友快来一起闭关修炼；webpack原理解析（二）实现一个简单的Loader；核心版vue-router, 仅仅只需80行代码；Vue 3 真香

1. 小蝌蚪传记：60行代码实现nodejs线上模块热部署 晚十二点，床上 富婆：这是给你的500元，辛苦了 小蝌蚪：不辛苦，主人 富婆：我老公要回来了，你走吧 小蝌蚪：是，主人 说完小蝌蚪从三楼别墅跳了下去 。。。 小蝌蚪是一名程序员，也是一个技师 白天敲代码，晚上捏脚 由于常年敲代码，所以指法高超 时常把客户按到上天日龙 。。。 富婆年轻、有钱，但是缺爱…
2. 带你了解 vue-next（Vue 3.0）之 炉火纯青 看完上两章 初入茅庐 小试牛刀 之后，大家应该对 vue-next（Vue 3.0） 的 API 使用已经了如指掌了。好奇的同学一定对 vue-next 响应式的原理充满好奇，本章就带你解密！ 前言 最新 vue-next 的源码发布了，虽然是 pre-alpha 版本，但这时候其实是阅读源码的比较好的时机。在 vue 中，比较重要的东西当然要数它的响…
3. 前端性能优化之重排、重绘与合成 在项目的交互评审中，前端同学常常会对一些交互效果质疑，提出这样做不好那样做不好。这是因为这些效果通常会产生一系列的浏览器重绘和重排，需要付出非常昂贵的性能代价。 本文期待可以部分解释以下两个问题。 什么是浏览器的重绘和重排呢？ 二者发生时都引发哪些渲染流程？ reflow 重绘(也称回流)，…
4. 记录优化 Vue 应用的首次加载速度 Halo 的管理端使用的是 Vue 来构建的，随之收到不少反馈后台加载过于缓慢，其主要原因就是打包好的 Vue 应用的静态资源又多又大，可能同时就几十个请求，这对于一些小水管的服务器来说简直是致命的打击。 解决办法 使用公共 cdn，我们只需要把打包好的静态资源丢在公共 cdn 上引用就好了。那么如何优雅的上传…
5. 前端面试基础篇，凛冬将至道友快来一起闭关修炼 借用神剧《权游》的名句：“凛冬将至！”，互联网寒冬已然来临，这一年以来keep/滴滴/京东/腾讯/华为等大厂裁员事件不断爆出！惊醒着头发慢慢脱落、变少的我们，是时候闭关修炼了！ 本文为前端面试基础篇，将以 面试题 && 答案【参考 (๑¯∀¯๑)】的形式，闭关修炼，希望你查漏补缺，完善你的知识体系！ …
6. webpack原理解析（二）实现一个简单的Loader webpack中 loader 是一个非常重要的概念，loader 可以简单的理解成一个文件处理器，webpack使用 loader 来处理各类文件，比如 .scss 转成成 css 文件, 小图片转换成base64图片。 本质上讲， loader 只是导出为函数的 JavaScript 模块，webpack打包的时候，会调用这个函数，把上一个loader产生的结果或资源文件(r…
7. 核心版vue-router, 仅仅只需80行代码 vue-router作为vue全局桶的一个核心类库, 其实现方式, 有着很多巧妙之处, 你是否真正了解呢? 使用一个vue-router的正确姿态. 最简单的是通过cli安装一个vue-router插件, 会自动的修改我们项目的代码, 正确的使用vue-router. 一条命令搞定. vue add router 复制代码 正确的姿态. 新建一个路由配置文件. import…
8. Vue 3 真香 到目前，vue 3 gayhub 官选 除了服务端渲染外，大部分工作已经完成了，vue-loader也有了初版,意味着可以去尝鲜了。 目标 做个todoMVC vue3.0 基本功能 新增 编辑 删除 修改状态 展示 (all，active(非active), compeleted(非compeleted)) Gayhub 地址 github.com/Ch…
9. Vue响应式原理解析（附超详细源码注释和原理解析） 上一篇我们深入分析了数据驱动视图渲染( juejin.im/post/5e06b4… )的原理以及源码解析，感兴趣的可以去瞅一眼，那么这一次我们接着套路，讲一下数据是如何驱动视图更新的，也就是Vue的响应式原理，let go! 案例 <div id="app" @click="changeName"> {{ name }} </div> var app =…
10. 搭建一个vue-cli的移动端H5开发模板vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板，其中已经搭建好基本的开发框架，可帮助您实现快速开发。 技术栈：vue + vux + axios + less
11. 5 个奇怪的只会在 JS 里才发生的趣事 原文链接： xtrp.io/blog/2019/1… JavaScript 是一门棘手的语言，就其代码的解析和运行方式，容易让人感觉困惑。这是一门面向对象的语言，但很多年来语言标准里没有类。它最初是为浏览器创造的，但现在也可以在服务器上运行，还可以操作文件系统。 多年以来，我碰到了一些特殊且有趣的代码。下面展示的这些例子仅…
12. 从0实现一个前端微服务（上） 什么是前端微服务，网上大把的介绍，我就不啰嗦了，简单来说，就是把各个子项目整合到一起。 《前端架构：从入门到微前端》 这本书中介绍，微前端架构一般可以由以下几种方式进行： 使用 HTTP 服务器的路由来重定向多个应用（也就是链接跳转） 在不同的框架之上设计通讯、加载机制，诸如 Mooa 和 Single-SPA …
13. 【小小前端】浅谈浅拷贝与深拷贝 最近做项目遇到一个问题，后台没有做查看列表详情的接口，于是乎只能从已获取的数据里面查找展示。但是问题来了，在一次编辑的时候，把手机号清空之后，就关了dialog，并没有修改数据。按照正常思维，此时列表中的数据应该不变的，但是邪门的事情出现了，刚刚编辑的那行数据的手机号不见了！！天啦，怎么回事，我也没有…
14. 用Node.js编写内存效率高的应用程序软件应用程序在计算机的主存储器中运行，我们称之为随机存取存储器(RAM)。JavaScript，尤其是 NodeJS （服务端 JS）允许我们为终端用户编写从小型到大型的软件项目。处理程序的内存总是一个棘手的问题，因为糟糕…
15. JavaScript的强语言之路—另类的JSON序列化与反序列化 JSON（JavaScript Object Notation）是一种轻量级，完全独立于语言的数据交换格式。目前被广泛应用在前后端的数据交互中。在JavaScript中的应用随处可见，灵活性、扩展性、可读性也是最强的！对应的 JSON.parse 与 JSON.stringify 就可以看做是对象的序列化和反序列化，将对象与字符串之间相互转换。 序列化与反序列…
16. Promise（1）—3分钟掌握最基本的Promise原理 学习是一个漫长的过程，需要循序渐进，要想深入的理解一门技术，需要沉下心来慢慢研究。要做到通过现象看本质，学Promise的同时也会用到高阶函数和发布订阅，只有掌握了那些通用的技术，才能够更有效的学习下去，更好的看到本质。慢慢的你会发现通过深入学习一个Promise，收获的却不只是Promise。 一、什么是Promise P…
17. JavaScript 初学者容易犯的几个错误，你中招没？ JavaScript 是对初学者比较友好的一门编程语言，基本上花个半小时看下语法就能写出能运行的代码。JavaScript 是动态脚本语言，对数据类型没有太多的限制，写起来非常灵活。但正因为如此，初学者如果不深入了解语言本身，往往会犯一些错误，从而导致一些很难发现的 bug。 抛开 JavaScript 语言设计层面的问题不说，毕竟…
18. 前端异常捕获和定位 于前端而言，不管是开发还是生产阶段，异常的捕获和定位都是至关重要的。 开发阶段，通过详细的报错信息，我们可以快速定位并解决问题。在生产，通过异常监控，根据异常埋点信息，我们可以第一时间知道异常信息，不至于造成严重后果。 window.onerror 全局监听异常来捕获 借鉴下 MDN 的说明，当 JavaS…
19. 「面试重点」聊一聊JS中call、apply、bind里的小心思 面试的重点难点的坑来啦！~/(ㄒoㄒ)/~~不出意外，this在ES5中是比较头疼和让初学者恐惧的一块，尽管在 ES6 中可能会极大避免 this 产生的错误，但是为了前端初学者能够在使用上能够将call,apply,bind等容易混淆的this指向问题，最好还是了解一下call、apply、bind 三者的区别，以及它们在底层中是如何来实现的~ call、a…
20. 看完这几道 JavaScript 面试题，让你与考官对答如流（中）点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
21. React开发日记-React Hook/Mobx 数据状态管理对比 前提 在之前项目中，我们一般是用mobx做数据状态管理，本文尝试使用新的方式–react hook，实现状态管理，比较新旧方式的异同。 本文后面的所有内容的上下文都是在react项目中 欢迎指正，欢迎提出需要补充的地方。 复制代码 Mobx 先对mobx进行简单介绍，如下图可见， 从左往右顺序查看 1有且仅有action可以用于修…
22. vuex 知识点梳理 vuex的应用场景，大家可能或多或少知道，用来管理一些全局数据，或者多个页面都会使用到的数据，比如，我们项目中常见的用户信息，通常使用vuex来管理。 这里，我们思考一个问题，如何没有vuex，还有哪些方式可以实现一些公共数据的管理？ 把公共数据存储到根实例中，其他页面都可以通过 this.$root 来获取根实…
23. 使用 webpack 构建 chrome 扩展的热更新问题 前不久我写了一个 chrome 扩展，作为一个前端弄潮儿，我肯定是想用上各种前端界最 fashion 的开发工具。于是乎，折腾到最后是使用了 webpack + TypeScript + react 这么一套技术栈。在 github 上研究了几个模板项目之后，我感觉大多数都太初级了，功能太简单，而且有一个功能我始终没发现有哪个项目解决了，也就是当修改…
24. 响应式编程入门指南：通俗易懂 RxJS 全文篇幅较长，建议选取一段独立的时间来阅读此文。 RxJS 是 Reactive Extensions for JavaScript 的缩写，起源于 Reactive Extensions，是一个基于可观测数据流 Stream 结合观察者模式和迭代器模式的一种异步编程的应用库。RxJS 是 Reactive Extensions 在 JavaScript 上的实现。 按照正常的节奏，听到 RxJ…
25. 前端利用canvas给图片添加水印前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图…
26. 你可能不是那么了解的 CSS BackgroundBackground，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，背景嘛。MDN 中对其的定义如下：
27. 带你了解 vue-next（Vue 3.0）之 初入茅庐 这几天，陆续学习了解了关于 vue-next（Vue 3.0） 的一些新特性，尤其是新的 Composition API 的用法。这套新的API中最重要、最核心的部分，恐怕就是实现响应式功能的这一块了。而且，这套响应式API不仅可以在 vue-next 环境下使用，也可以独立使用。 笔者在阅读源码看到， vue-next 已全部由 TypeScript 构建，看来…
28. Promise(1)：Promise/A+规范 与Promise最主要的交互方法是通过将函数传入它的then方法从而获取得Promise最终的值或Promise最终最拒绝（reject）的原因 术语 promise是一个包含了兼容promise规范then方法的对象或函数， thenable 是一个包含了then方法的对象或函数。 value 是任何Javascript值。 (包括 undefined, thenable, promise等). …
29. VSCode – 一键生成.vue模版 @ VSCode – 一键生成.vue模版 create by db on 2020-1-16 14:25:40 Recently revised in 2020-1-17 14:18:17 Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！ GitHub 地址 前言 VSCode作为一个轻量且强大的代码编辑器，它支持Windows，OSX和Linux。…
30. 看完这几道 JavaScript 面试题，让你与考官对答如流（下）点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
31. 如何全方位优化你的超大型 React 应用？ React为了大型应用而生，Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力，Taro则赋予了它一次编写，生成多种平台小程序和React-native应用的能力，这里特意说下 Taro，它是国产，文档写得比较不错，而且它的升级速度比较快，有issue我看也会及时解决，他们的维护人员还是非常敬业的！ …
32. Vue多页面优化踩坑记录 最近优化之前的项目，从单页面拆分成了多页面，这里记录下整个踩坑过程。 拆分成多个页面 1.将原项目的单页面替换为多页面 这里我添加了 index.html 和 user.html 两个页面。 2.配置vue.config.js // vue.config.js const titles = require(‘./title.js’) const glob = require(‘glob’) cons…
33. 堡垒机 WebSSH 进阶之实时监控和强制下线 这个功能我可以不用，但你不能没有 前几篇文章实现了对物理机、虚拟机以及Kubernetes中Pod的WebSSH操作，可以方便的在web端对系统进行管理，同时也支持对所有操作进行全程录像，以方便后续的查看与审计 这一篇文章接着实现一个看起来很炫酷，但实际上你可能不会经常使用，又必须要存在的功能：实…
34. 2020年了，你真的了解js对象的属性吗 JavaScript对象的属性，看起来是一个很简单的问题，但是往细了想有很多细节需要注意。比如，可枚举属性与不可枚举属性的区别是什么，当我们打印一个对象的时候，打印的是对象本身的属性，还是包含继承的属性？我们去遍历一个对象的时候，多种方法之间又有什么区别？在这里我们做一个全面的分析和总结。 属性的设置 在…
35. 都2020了，还不懂js运算符优先级？ function F() { this.a = 1 this.f = function() { this.a = 3 } } F.f = function() { this.a = 2 } var r = new F.f() 复制代码 A. {a: 2} B. {a: 1, f: ƒ} C. {a: 3} 答案 答案： A 先执行F.f, 再执行new …() 2. str等于什么 var str = "Hello"…
36. JavaScript️可视化：事件循环 本系列包括6篇文章 JavaScript️可视化：事件循环 JavaScript️可视化：变量提升 JavaScript️可视化：作用域链 JavaScript️可视化：js引擎 JavaScript️可视化：原型继承 JavaScript️可视化：生成器和迭代器 哦，事件循环。这是每个JavaScript开发人员都必须以一种或另一种方式处理…
37. JavaScript四舍五入及精度丢失问题在JS中使用数值计算时，经常会遇到未知的结果。问题：用toFixed保留小数时，四舍五入规则不固定：常见的解决思路：将小数放大为整数，进行四舍五入后，再缩小为小数。
38. JS 中的同步与异步 虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 (点击绿色图标,可收听音频) 撰文 | 川川 VX-ID:suibichuanji 点击文…
39. 基于 Flask 和 Vue 的词云生成应用 这是一个前端用 Vue，后端用 Python 的 Web 框架 Flask 开发的词云生成应用，代码已上传到 flask-vue-word-cloud 。写这个小项目的起因是最近团队年终述职，有一些大佬的 PPT 上用了词云来展示自己团队一年的工作成果。还有大佬说不要守着自己的一亩三分地，在技术上拓宽视野可以帮助我们更好的成长。正好之前接触过 Pyt…
40. 你应该知道的前端面试题（万字总结） 自己整理出来的一些前端工程师必备的面试题，面试中出场率很高，相信小伙伴在找工作或者跳槽中能够顺利找到自己想要的工作。 Html 1、DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义？ DOCTYPE的作用是告诉浏览器使用哪种版本的HTML规范来渲染文档。当DOCTYPE不存在或者形式不正确时会导…
41. 前端业务实践中的异步问题 异步任务相比同步任务的复杂之处，主要在于返回结果的时机不可控，由此带来超时控制、顺序控制、竞态、最大并发等一系列问题。 单个的异步和简单的并发一般在语言层面就获得了支持，就前端而言，Promise 和 Async 是如此普及，以至于有些新人可能连 callback 都不认识了，建议看看《深入浅出nodejs》中关于异步的章节，…
42. 重学前端之JavaScript(二)JavaScript的语句一、定义  条件语句: 当条件满足时,执行一段语句二、JavaScript中的条件语句  1) if…else if … else: 当指定条件为真,if语句会执行一段语句,如果不满足再考虑else if的条件,若是还不满足,则执行 else里的语句
43. JS 常用继承实现方式 看《JavaScript 设计模式》，关于里面提到的JS继承实现的方式，分为三种，且书中都给出了相关实现。这里也不再做讲解，只求记录一下，因为自己总是有时候会忘记这些东西。 类式继承，extend 原型式继承，clone 掺元类继承，augment 类式继承的实现，这里面很有必要引人注意的是，superclass.prototype.constr…
44. VUE：如何把slot从父组件传到子组件 有A、B、C三个component，分别包含不同的slot: const A = { template: `<div><slot name="a">Default A Content</slot></div>` } const B = { template: `<div><slot name="b">Default B Content</slot></div>` } const C = { template: …
45. 一个白学家眼里的 WebAssembly 在知乎 如何看待 WebAssembly 这门技术？ 这个问题里，可以看出大家普遍对浏览器、WASM 和 JS 之间的三角关系有不少误解。因此这里作为一个开 (bai) 发 (xue) 者 (jia)，我就来尝试纠正些常见的问题吧。 WASM == 汇编级性能？ 这显然不对，WASM 里的 Assembly 并不意味着真正的汇编码，而只是种新约定的字节码，…
46. 捕获 React 异常韩国某著名男子天团之前在我们平台上架了一张重磅数字专辑，本来是一件喜大普奔的好事，结果上架后投诉蜂拥而至。部分用户反馈页面打开就崩溃，紧急排查后发现真凶就是下面这段代码。
47. 全网最详bpmn.js教材-properties-panel篇(上) 前言  Q: bpmn.js是什么? ️ ” bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.  Q: 我为什么要写该系列的教材? ️ ” 因为公司业务的需要因而要在项目中使用到 bpmn.js ,但是由于 bpmn.js 的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很…
48. webpack 4 源码主流程分析（十四）：webpack 优化 原文首发于blog.flqin.com。如有错误，请联系笔者。分析码字不易，转载请表明出处，谢谢！ 前面一至十一章，介绍了在 development 的模式下，整个完整了构建主流程。在了解构建流程的基础上，本章整理一些与 webpack 优化相关的知识点。 production 模式 我们参考 production 模式里，里面已经做了大部分的优…
49. 远程iPhone Exploitation Part 3：从内存破坏到JavaScript再获取代码执行 此时，ASLR已被破坏，因为已知共享缓存的基地址，并且可以使用堆喷射将受控数据放置在已知地址。剩下的就是再利用一次漏洞来执行代码。 在介绍了一些ObjC内部相关的结构之后，将介绍没有PAC的设备利用方法。它涉及到创建代码指针，因此它不再与启用PAC时一起使用。将介绍针对PAC和非PAC设备的另一种利用方发。最后，我…
50. Vue 3.0实践：使用Vue 3.0做JSX(TSX)风格的组件开发 前言 我日常工作都是使用React来做开发，但是我对React一直不是很满意，特别是在推出React Hooks以后。 不可否认React Hooks极大地方便了开发者，但是它又有非常多反直觉的地方，让我难以接受。所以在很长一段时间，我都在尝试寻找React的替代品，我尝试过不少别的前端框架，但都有各种各样的问题或限制。 在看到…
51. Webpack之Javascript的编译 如果单纯的babel-loader发现并没有将es6转为es5，这个时候还需要babel-preset； Presets是存储Javascript不同标准的插件，通过使用正确的Presets,告诉babel按照哪个规范编译； 常见规范 es2015 es2016 es2017 env（通常采用） babel-preset-stage babel-preset-env 可以根据配置的目标浏览器或者运行环境来自动将…
52. 基于 RBAC 的 Web 应用权限管理的思考 写在最前 仅针对单一应用, 如果需要多应用的统一权限管理, 可能还需要加上「应用」这个层级的范围 以类似「白名单」的形式来计算权限, 保持的是一种累加的方式, 没有考虑权限互斥的情况, 也没有加入「黑名单」的设置 如果不需要特别针对某一个用户授权, 可以在角色绑定时, 只使用组id …
53. 带你了解 vue-next（Vue 3.0）之 小试牛刀 看完上一章 初入茅庐 之后，相信大家已经对 vue-next（Vue 3.0） 有所了解了。本章带你掌握 vue-next 函数式的API，了解这些的话，无论是对于源码的阅读，还是当正式版发布时开始学习，应该都会有起到一定的辅助作用。 基本例子 直接拷贝下面代码，去运行看效果吧。推荐使用高版本的chrome浏览器，记得打开F12调试…
54. 宝塔面板安装NodeJS Api 程序并配置https教程先参考作者大西瓜的 : https://www.bilibili.com/video/av67066415?t=91 大致了解流程 ;再参考作者竹映平昔的 : https://www.bwmelon.com/archives/27/ 跟着一起做 ;
55. 美团点评技术年货：900+ 页电子书，覆盖前端、后台、大数据、算法…… 新年将至，年味渐浓。美团点评技术年货如期而至。从2013年12月4日发布第一篇文章，一直到今天，美团技术团队官方博客已经走过了6个春秋。截止目前，我们共发布376篇技术文章，微信公众号（meituantech）的关注者也超过20万。由衷地感谢大家一直以来对我们的鼓励和陪伴！2020年春节到来之际，我们精选美团技术博客几十篇…
56. TypeScript从零实现基于Proxy的响应式库，带你彻底搞懂Vue3的响应式原理 笔者最近在浏览React状态管理库的时候，发现了一些响应式的状态管理库如 hodux , react-easy-state ，内部有一个基于proxy实现响应式的基础仓库 observer-util ，它的代码实现和Vue3中的响应式原理非常相似，这篇文章就从这个仓库入手，一步一步带你剖析响应式的实现。 本文的代码是我参考 observer-util 用ts的…
57. Promise(2)：手动实现Promise Promise对象初始状态为 Pending，在被 resolve 或 reject 时，状态变为 Fulfilled 或 Rejected resolve接收成功的数据，reject接收失败或错误的数据 Promise对象必须有一个 then 方法，且只接受两个可函数参数 onFulfilled、onRejected const REJECTED = ‘rejected’; const RESOLVED = ‘resolved’; const PENDING…
58. JavaScript 中的 NaN另外还有 2 个特殊的数字值：Infinity（比其他任何数字都大的数字）和 NaN（表示“Not A Number”概念）：
59. Nuxt.js的那些事儿（一） 在这段时间中了解到VueSSR框架( Nuxt.js )，自己体验了一下，还挺不错的，自己找了一个(知乎招聘)官网模仿了一下，在下面的内容，我将记录自己基于express+nuxt.js+less+axios怎么去开发，因为是自己的练手项目，不足的地方还是很多，希望大家多多包涵，多多提建议改进，我已经将项目源码放置在 github☞ 开始 搭建…
60. 如何高效使用 Git Git 工作流 只要项目是多人参与的，那么就需要使用正确的 Git 工作流程。 下面介绍一个简单有效的工作流程。 场景 假设有一个项目，要开发下一代的 Facebook，你就是这个项目的技术 leader，你的团队有3个开发人员： Alice：1年开发经验 Bob：1年开…

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

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

小蝌蚪传记：60行代码实现nodejs线上模块热部署；带你了解 vue-next（Vue 3.0）之 炉火纯青；前端性能优化之重排、重绘与合成；记录优化 Vue 应用的首次加载速度；前端面试基础篇，凛冬将至道友快来一起闭关修炼；webpack原理解析（二）实现一个简单的Loader；核心版vue-router, 仅仅只需80行代码；Vue 3 真香

1. 小蝌蚪传记：60行代码实现nodejs线上模块热部署 晚十二点，床上 富婆：这是给你的500元，辛苦了 小蝌蚪：不辛苦，主人 富婆：我老公要回来了，你走吧 小蝌蚪：是，主人 说完小蝌蚪从三楼别墅跳了下去 。。。 小蝌蚪是一名程序员，也是一个技师 白天敲代码，晚上捏脚 由于常年敲代码，所以指法高超 时常把客户按到上天日龙 。。。 富婆年轻、有钱，但是缺爱…
2. 带你了解 vue-next（Vue 3.0）之 炉火纯青 看完上两章 初入茅庐 小试牛刀 之后，大家应该对 vue-next（Vue 3.0） 的 API 使用已经了如指掌了。好奇的同学一定对 vue-next 响应式的原理充满好奇，本章就带你解密！ 前言 最新 vue-next 的源码发布了，虽然是 pre-alpha 版本，但这时候其实是阅读源码的比较好的时机。在 vue 中，比较重要的东西当然要数它的响…
3. 前端性能优化之重排、重绘与合成 在项目的交互评审中，前端同学常常会对一些交互效果质疑，提出这样做不好那样做不好。这是因为这些效果通常会产生一系列的浏览器重绘和重排，需要付出非常昂贵的性能代价。 本文期待可以部分解释以下两个问题。 什么是浏览器的重绘和重排呢？ 二者发生时都引发哪些渲染流程？ reflow 重绘(也称回流)，…
4. 记录优化 Vue 应用的首次加载速度 Halo 的管理端使用的是 Vue 来构建的，随之收到不少反馈后台加载过于缓慢，其主要原因就是打包好的 Vue 应用的静态资源又多又大，可能同时就几十个请求，这对于一些小水管的服务器来说简直是致命的打击。 解决办法 使用公共 cdn，我们只需要把打包好的静态资源丢在公共 cdn 上引用就好了。那么如何优雅的上传…
5. 前端面试基础篇，凛冬将至道友快来一起闭关修炼 借用神剧《权游》的名句：“凛冬将至！”，互联网寒冬已然来临，这一年以来keep/滴滴/京东/腾讯/华为等大厂裁员事件不断爆出！惊醒着头发慢慢脱落、变少的我们，是时候闭关修炼了！ 本文为前端面试基础篇，将以 面试题 && 答案【参考 (๑¯∀¯๑)】的形式，闭关修炼，希望你查漏补缺，完善你的知识体系！ …
6. webpack原理解析（二）实现一个简单的Loader webpack中 loader 是一个非常重要的概念，loader 可以简单的理解成一个文件处理器，webpack使用 loader 来处理各类文件，比如 .scss 转成成 css 文件, 小图片转换成base64图片。 本质上讲， loader 只是导出为函数的 JavaScript 模块，webpack打包的时候，会调用这个函数，把上一个loader产生的结果或资源文件(r…
7. 核心版vue-router, 仅仅只需80行代码 vue-router作为vue全局桶的一个核心类库, 其实现方式, 有着很多巧妙之处, 你是否真正了解呢? 使用一个vue-router的正确姿态. 最简单的是通过cli安装一个vue-router插件, 会自动的修改我们项目的代码, 正确的使用vue-router. 一条命令搞定. vue add router 复制代码 正确的姿态. 新建一个路由配置文件. import…
8. Vue 3 真香 到目前，vue 3 gayhub 官选 除了服务端渲染外，大部分工作已经完成了，vue-loader也有了初版,意味着可以去尝鲜了。 目标 做个todoMVC vue3.0 基本功能 新增 编辑 删除 修改状态 展示 (all，active(非active), compeleted(非compeleted)) Gayhub 地址 github.com/Ch…
9. Vue响应式原理解析（附超详细源码注释和原理解析） 上一篇我们深入分析了数据驱动视图渲染( juejin.im/post/5e06b4… )的原理以及源码解析，感兴趣的可以去瞅一眼，那么这一次我们接着套路，讲一下数据是如何驱动视图更新的，也就是Vue的响应式原理，let go! 案例 <div id="app" @click="changeName"> {{ name }} </div> var app =…
10. 搭建一个vue-cli的移动端H5开发模板vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板，其中已经搭建好基本的开发框架，可帮助您实现快速开发。 技术栈：vue + vux + axios + less
11. 5 个奇怪的只会在 JS 里才发生的趣事 原文链接： xtrp.io/blog/2019/1… JavaScript 是一门棘手的语言，就其代码的解析和运行方式，容易让人感觉困惑。这是一门面向对象的语言，但很多年来语言标准里没有类。它最初是为浏览器创造的，但现在也可以在服务器上运行，还可以操作文件系统。 多年以来，我碰到了一些特殊且有趣的代码。下面展示的这些例子仅…
12. 从0实现一个前端微服务（上） 什么是前端微服务，网上大把的介绍，我就不啰嗦了，简单来说，就是把各个子项目整合到一起。 《前端架构：从入门到微前端》 这本书中介绍，微前端架构一般可以由以下几种方式进行： 使用 HTTP 服务器的路由来重定向多个应用（也就是链接跳转） 在不同的框架之上设计通讯、加载机制，诸如 Mooa 和 Single-SPA …
13. 【小小前端】浅谈浅拷贝与深拷贝 最近做项目遇到一个问题，后台没有做查看列表详情的接口，于是乎只能从已获取的数据里面查找展示。但是问题来了，在一次编辑的时候，把手机号清空之后，就关了dialog，并没有修改数据。按照正常思维，此时列表中的数据应该不变的，但是邪门的事情出现了，刚刚编辑的那行数据的手机号不见了！！天啦，怎么回事，我也没有…
14. 用Node.js编写内存效率高的应用程序软件应用程序在计算机的主存储器中运行，我们称之为随机存取存储器(RAM)。JavaScript，尤其是 NodeJS （服务端 JS）允许我们为终端用户编写从小型到大型的软件项目。处理程序的内存总是一个棘手的问题，因为糟糕…
15. JavaScript的强语言之路—另类的JSON序列化与反序列化 JSON（JavaScript Object Notation）是一种轻量级，完全独立于语言的数据交换格式。目前被广泛应用在前后端的数据交互中。在JavaScript中的应用随处可见，灵活性、扩展性、可读性也是最强的！对应的 JSON.parse 与 JSON.stringify 就可以看做是对象的序列化和反序列化，将对象与字符串之间相互转换。 序列化与反序列…
16. Promise（1）—3分钟掌握最基本的Promise原理 学习是一个漫长的过程，需要循序渐进，要想深入的理解一门技术，需要沉下心来慢慢研究。要做到通过现象看本质，学Promise的同时也会用到高阶函数和发布订阅，只有掌握了那些通用的技术，才能够更有效的学习下去，更好的看到本质。慢慢的你会发现通过深入学习一个Promise，收获的却不只是Promise。 一、什么是Promise P…
17. JavaScript 初学者容易犯的几个错误，你中招没？ JavaScript 是对初学者比较友好的一门编程语言，基本上花个半小时看下语法就能写出能运行的代码。JavaScript 是动态脚本语言，对数据类型没有太多的限制，写起来非常灵活。但正因为如此，初学者如果不深入了解语言本身，往往会犯一些错误，从而导致一些很难发现的 bug。 抛开 JavaScript 语言设计层面的问题不说，毕竟…
18. 前端异常捕获和定位 于前端而言，不管是开发还是生产阶段，异常的捕获和定位都是至关重要的。 开发阶段，通过详细的报错信息，我们可以快速定位并解决问题。在生产，通过异常监控，根据异常埋点信息，我们可以第一时间知道异常信息，不至于造成严重后果。 window.onerror 全局监听异常来捕获 借鉴下 MDN 的说明，当 JavaS…
19. 「面试重点」聊一聊JS中call、apply、bind里的小心思 面试的重点难点的坑来啦！~/(ㄒoㄒ)/~~不出意外，this在ES5中是比较头疼和让初学者恐惧的一块，尽管在 ES6 中可能会极大避免 this 产生的错误，但是为了前端初学者能够在使用上能够将call,apply,bind等容易混淆的this指向问题，最好还是了解一下call、apply、bind 三者的区别，以及它们在底层中是如何来实现的~ call、a…
20. 看完这几道 JavaScript 面试题，让你与考官对答如流（中）点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
21. React开发日记-React Hook/Mobx 数据状态管理对比 前提 在之前项目中，我们一般是用mobx做数据状态管理，本文尝试使用新的方式–react hook，实现状态管理，比较新旧方式的异同。 本文后面的所有内容的上下文都是在react项目中 欢迎指正，欢迎提出需要补充的地方。 复制代码 Mobx 先对mobx进行简单介绍，如下图可见， 从左往右顺序查看 1有且仅有action可以用于修…
22. vuex 知识点梳理 vuex的应用场景，大家可能或多或少知道，用来管理一些全局数据，或者多个页面都会使用到的数据，比如，我们项目中常见的用户信息，通常使用vuex来管理。 这里，我们思考一个问题，如何没有vuex，还有哪些方式可以实现一些公共数据的管理？ 把公共数据存储到根实例中，其他页面都可以通过 this.$root 来获取根实…
23. 使用 webpack 构建 chrome 扩展的热更新问题 前不久我写了一个 chrome 扩展，作为一个前端弄潮儿，我肯定是想用上各种前端界最 fashion 的开发工具。于是乎，折腾到最后是使用了 webpack + TypeScript + react 这么一套技术栈。在 github 上研究了几个模板项目之后，我感觉大多数都太初级了，功能太简单，而且有一个功能我始终没发现有哪个项目解决了，也就是当修改…
24. 响应式编程入门指南：通俗易懂 RxJS 全文篇幅较长，建议选取一段独立的时间来阅读此文。 RxJS 是 Reactive Extensions for JavaScript 的缩写，起源于 Reactive Extensions，是一个基于可观测数据流 Stream 结合观察者模式和迭代器模式的一种异步编程的应用库。RxJS 是 Reactive Extensions 在 JavaScript 上的实现。 按照正常的节奏，听到 RxJ…
25. 前端利用canvas给图片添加水印前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图…
26. 你可能不是那么了解的 CSS BackgroundBackground，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，背景嘛。MDN 中对其的定义如下：
27. 带你了解 vue-next（Vue 3.0）之 初入茅庐 这几天，陆续学习了解了关于 vue-next（Vue 3.0） 的一些新特性，尤其是新的 Composition API 的用法。这套新的API中最重要、最核心的部分，恐怕就是实现响应式功能的这一块了。而且，这套响应式API不仅可以在 vue-next 环境下使用，也可以独立使用。 笔者在阅读源码看到， vue-next 已全部由 TypeScript 构建，看来…
28. Promise(1)：Promise/A+规范 与Promise最主要的交互方法是通过将函数传入它的then方法从而获取得Promise最终的值或Promise最终最拒绝（reject）的原因 术语 promise是一个包含了兼容promise规范then方法的对象或函数， thenable 是一个包含了then方法的对象或函数。 value 是任何Javascript值。 (包括 undefined, thenable, promise等). …
29. VSCode – 一键生成.vue模版 @ VSCode – 一键生成.vue模版 create by db on 2020-1-16 14:25:40 Recently revised in 2020-1-17 14:18:17 Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！ GitHub 地址 前言 VSCode作为一个轻量且强大的代码编辑器，它支持Windows，OSX和Linux。…
30. 看完这几道 JavaScript 面试题，让你与考官对答如流（下）点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
31. 如何全方位优化你的超大型 React 应用？ React为了大型应用而生，Electron和React-native赋予了它构建移动端跨平台App和桌面应用的能力，Taro则赋予了它一次编写，生成多种平台小程序和React-native应用的能力，这里特意说下 Taro，它是国产，文档写得比较不错，而且它的升级速度比较快，有issue我看也会及时解决，他们的维护人员还是非常敬业的！ …
32. Vue多页面优化踩坑记录 最近优化之前的项目，从单页面拆分成了多页面，这里记录下整个踩坑过程。 拆分成多个页面 1.将原项目的单页面替换为多页面 这里我添加了 index.html 和 user.html 两个页面。 2.配置vue.config.js // vue.config.js const titles = require(‘./title.js’) const glob = require(‘glob’) cons…
33. 堡垒机 WebSSH 进阶之实时监控和强制下线 这个功能我可以不用，但你不能没有 前几篇文章实现了对物理机、虚拟机以及Kubernetes中Pod的WebSSH操作，可以方便的在web端对系统进行管理，同时也支持对所有操作进行全程录像，以方便后续的查看与审计 这一篇文章接着实现一个看起来很炫酷，但实际上你可能不会经常使用，又必须要存在的功能：实…
34. 2020年了，你真的了解js对象的属性吗 JavaScript对象的属性，看起来是一个很简单的问题，但是往细了想有很多细节需要注意。比如，可枚举属性与不可枚举属性的区别是什么，当我们打印一个对象的时候，打印的是对象本身的属性，还是包含继承的属性？我们去遍历一个对象的时候，多种方法之间又有什么区别？在这里我们做一个全面的分析和总结。 属性的设置 在…
35. 都2020了，还不懂js运算符优先级？ function F() { this.a = 1 this.f = function() { this.a = 3 } } F.f = function() { this.a = 2 } var r = new F.f() 复制代码 A. {a: 2} B. {a: 1, f: ƒ} C. {a: 3} 答案 答案： A 先执行F.f, 再执行new …() 2. str等于什么 var str = "Hello"…
36. JavaScript️可视化：事件循环 本系列包括6篇文章 JavaScript️可视化：事件循环 JavaScript️可视化：变量提升 JavaScript️可视化：作用域链 JavaScript️可视化：js引擎 JavaScript️可视化：原型继承 JavaScript️可视化：生成器和迭代器 哦，事件循环。这是每个JavaScript开发人员都必须以一种或另一种方式处理…
37. JavaScript四舍五入及精度丢失问题在JS中使用数值计算时，经常会遇到未知的结果。问题：用toFixed保留小数时，四舍五入规则不固定：常见的解决思路：将小数放大为整数，进行四舍五入后，再缩小为小数。
38. JS 中的同步与异步 虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 (点击绿色图标,可收听音频) 撰文 | 川川 VX-ID:suibichuanji 点击文…
39. 基于 Flask 和 Vue 的词云生成应用 这是一个前端用 Vue，后端用 Python 的 Web 框架 Flask 开发的词云生成应用，代码已上传到 flask-vue-word-cloud 。写这个小项目的起因是最近团队年终述职，有一些大佬的 PPT 上用了词云来展示自己团队一年的工作成果。还有大佬说不要守着自己的一亩三分地，在技术上拓宽视野可以帮助我们更好的成长。正好之前接触过 Pyt…
40. 你应该知道的前端面试题（万字总结） 自己整理出来的一些前端工程师必备的面试题，面试中出场率很高，相信小伙伴在找工作或者跳槽中能够顺利找到自己想要的工作。 Html 1、DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义？ DOCTYPE的作用是告诉浏览器使用哪种版本的HTML规范来渲染文档。当DOCTYPE不存在或者形式不正确时会导…
41. 前端业务实践中的异步问题 异步任务相比同步任务的复杂之处，主要在于返回结果的时机不可控，由此带来超时控制、顺序控制、竞态、最大并发等一系列问题。 单个的异步和简单的并发一般在语言层面就获得了支持，就前端而言，Promise 和 Async 是如此普及，以至于有些新人可能连 callback 都不认识了，建议看看《深入浅出nodejs》中关于异步的章节，…
42. 重学前端之JavaScript(二)JavaScript的语句一、定义  条件语句: 当条件满足时,执行一段语句二、JavaScript中的条件语句  1) if…else if … else: 当指定条件为真,if语句会执行一段语句,如果不满足再考虑else if的条件,若是还不满足,则执行 else里的语句
43. JS 常用继承实现方式 看《JavaScript 设计模式》，关于里面提到的JS继承实现的方式，分为三种，且书中都给出了相关实现。这里也不再做讲解，只求记录一下，因为自己总是有时候会忘记这些东西。 类式继承，extend 原型式继承，clone 掺元类继承，augment 类式继承的实现，这里面很有必要引人注意的是，superclass.prototype.constr…
44. VUE：如何把slot从父组件传到子组件 有A、B、C三个component，分别包含不同的slot: const A = { template: `<div><slot name="a">Default A Content</slot></div>` } const B = { template: `<div><slot name="b">Default B Content</slot></div>` } const C = { template: …
45. 一个白学家眼里的 WebAssembly 在知乎 如何看待 WebAssembly 这门技术？ 这个问题里，可以看出大家普遍对浏览器、WASM 和 JS 之间的三角关系有不少误解。因此这里作为一个开 (bai) 发 (xue) 者 (jia)，我就来尝试纠正些常见的问题吧。 WASM == 汇编级性能？ 这显然不对，WASM 里的 Assembly 并不意味着真正的汇编码，而只是种新约定的字节码，…
46. 捕获 React 异常韩国某著名男子天团之前在我们平台上架了一张重磅数字专辑，本来是一件喜大普奔的好事，结果上架后投诉蜂拥而至。部分用户反馈页面打开就崩溃，紧急排查后发现真凶就是下面这段代码。
47. 全网最详bpmn.js教材-properties-panel篇(上) 前言  Q: bpmn.js是什么? ️ ” bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.  Q: 我为什么要写该系列的教材? ️ ” 因为公司业务的需要因而要在项目中使用到 bpmn.js ,但是由于 bpmn.js 的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很…
48. webpack 4 源码主流程分析（十四）：webpack 优化 原文首发于blog.flqin.com。如有错误，请联系笔者。分析码字不易，转载请表明出处，谢谢！ 前面一至十一章，介绍了在 development 的模式下，整个完整了构建主流程。在了解构建流程的基础上，本章整理一些与 webpack 优化相关的知识点。 production 模式 我们参考 production 模式里，里面已经做了大部分的优…
49. 远程iPhone Exploitation Part 3：从内存破坏到JavaScript再获取代码执行 此时，ASLR已被破坏，因为已知共享缓存的基地址，并且可以使用堆喷射将受控数据放置在已知地址。剩下的就是再利用一次漏洞来执行代码。 在介绍了一些ObjC内部相关的结构之后，将介绍没有PAC的设备利用方法。它涉及到创建代码指针，因此它不再与启用PAC时一起使用。将介绍针对PAC和非PAC设备的另一种利用方发。最后，我…
50. Vue 3.0实践：使用Vue 3.0做JSX(TSX)风格的组件开发 前言 我日常工作都是使用React来做开发，但是我对React一直不是很满意，特别是在推出React Hooks以后。 不可否认React Hooks极大地方便了开发者，但是它又有非常多反直觉的地方，让我难以接受。所以在很长一段时间，我都在尝试寻找React的替代品，我尝试过不少别的前端框架，但都有各种各样的问题或限制。 在看到…
51. Webpack之Javascript的编译 如果单纯的babel-loader发现并没有将es6转为es5，这个时候还需要babel-preset； Presets是存储Javascript不同标准的插件，通过使用正确的Presets,告诉babel按照哪个规范编译； 常见规范 es2015 es2016 es2017 env（通常采用） babel-preset-stage babel-preset-env 可以根据配置的目标浏览器或者运行环境来自动将…
52. 基于 RBAC 的 Web 应用权限管理的思考 写在最前 仅针对单一应用, 如果需要多应用的统一权限管理, 可能还需要加上「应用」这个层级的范围 以类似「白名单」的形式来计算权限, 保持的是一种累加的方式, 没有考虑权限互斥的情况, 也没有加入「黑名单」的设置 如果不需要特别针对某一个用户授权, 可以在角色绑定时, 只使用组id …
53. 带你了解 vue-next（Vue 3.0）之 小试牛刀 看完上一章 初入茅庐 之后，相信大家已经对 vue-next（Vue 3.0） 有所了解了。本章带你掌握 vue-next 函数式的API，了解这些的话，无论是对于源码的阅读，还是当正式版发布时开始学习，应该都会有起到一定的辅助作用。 基本例子 直接拷贝下面代码，去运行看效果吧。推荐使用高版本的chrome浏览器，记得打开F12调试…
54. 宝塔面板安装NodeJS Api 程序并配置https教程先参考作者大西瓜的 : https://www.bilibili.com/video/av67066415?t=91 大致了解流程 ;再参考作者竹映平昔的 : https://www.bwmelon.com/archives/27/ 跟着一起做 ;
55. 美团点评技术年货：900+ 页电子书，覆盖前端、后台、大数据、算法…… 新年将至，年味渐浓。美团点评技术年货如期而至。从2013年12月4日发布第一篇文章，一直到今天，美团技术团队官方博客已经走过了6个春秋。截止目前，我们共发布376篇技术文章，微信公众号（meituantech）的关注者也超过20万。由衷地感谢大家一直以来对我们的鼓励和陪伴！2020年春节到来之际，我们精选美团技术博客几十篇…
56. TypeScript从零实现基于Proxy的响应式库，带你彻底搞懂Vue3的响应式原理 笔者最近在浏览React状态管理库的时候，发现了一些响应式的状态管理库如 hodux , react-easy-state ，内部有一个基于proxy实现响应式的基础仓库 observer-util ，它的代码实现和Vue3中的响应式原理非常相似，这篇文章就从这个仓库入手，一步一步带你剖析响应式的实现。 本文的代码是我参考 observer-util 用ts的…
57. Promise(2)：手动实现Promise Promise对象初始状态为 Pending，在被 resolve 或 reject 时，状态变为 Fulfilled 或 Rejected resolve接收成功的数据，reject接收失败或错误的数据 Promise对象必须有一个 then 方法，且只接受两个可函数参数 onFulfilled、onRejected const REJECTED = ‘rejected’; const RESOLVED = ‘resolved’; const PENDING…
58. JavaScript 中的 NaN另外还有 2 个特殊的数字值：Infinity（比其他任何数字都大的数字）和 NaN（表示“Not A Number”概念）：
59. Nuxt.js的那些事儿（一） 在这段时间中了解到VueSSR框架( Nuxt.js )，自己体验了一下，还挺不错的，自己找了一个(知乎招聘)官网模仿了一下，在下面的内容，我将记录自己基于express+nuxt.js+less+axios怎么去开发，因为是自己的练手项目，不足的地方还是很多，希望大家多多包涵，多多提建议改进，我已经将项目源码放置在 github☞ 开始 搭建…
60. 如何高效使用 Git Git 工作流 只要项目是多人参与的，那么就需要使用正确的 Git 工作流程。 下面介绍一个简单有效的工作流程。 场景 假设有一个项目，要开发下一代的 Facebook，你就是这个项目的技术 leader，你的团队有3个开发人员： Alice：1年开发经验 Bob：1年开…

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

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