20200119 前端开发日报

VSCode – 一键生成.vue模版；5 个奇怪的只会在 JS 里才发生的趣事；JavaScript的强语言之路—另类的JSON序列化与反序列化；Promise（1）—3分钟掌握最基本的Promise原理；TypeScript从零实现基于Proxy的响应式库，带你彻底搞懂Vue3的响应式原理；JS 常用继承实现方式；JavaScript️可视化：事件循环；深入js——变量对象

1. 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。…
2. 5 个奇怪的只会在 JS 里才发生的趣事 原文链接： xtrp.io/blog/2019/1… JavaScript 是一门棘手的语言，就其代码的解析和运行方式，容易让人感觉困惑。这是一门面向对象的语言，但很多年来语言标准里没有类。它最初是为浏览器创造的，但现在也可以在服务器上运行，还可以操作文件系统。 多年以来，我碰到了一些特殊且有趣的代码。下面展示的这些例子仅…
3. JavaScript的强语言之路—另类的JSON序列化与反序列化 JSON（JavaScript Object Notation）是一种轻量级，完全独立于语言的数据交换格式。目前被广泛应用在前后端的数据交互中。在JavaScript中的应用随处可见，灵活性、扩展性、可读性也是最强的！对应的 JSON.parse 与 JSON.stringify 就可以看做是对象的序列化和反序列化，将对象与字符串之间相互转换。 序列化与反序列…
4. Promise（1）—3分钟掌握最基本的Promise原理 学习是一个漫长的过程，需要循序渐进，要想深入的理解一门技术，需要沉下心来慢慢研究。要做到通过现象看本质，学Promise的同时也会用到高阶函数和发布订阅，只有掌握了那些通用的技术，才能够更有效的学习下去，更好的看到本质。慢慢的你会发现通过深入学习一个Promise，收获的却不只是Promise。 一、什么是Promise P…
5. TypeScript从零实现基于Proxy的响应式库，带你彻底搞懂Vue3的响应式原理 笔者最近在浏览React状态管理库的时候，发现了一些响应式的状态管理库如 hodux , react-easy-state ，内部有一个基于proxy实现响应式的基础仓库 observer-util ，它的代码实现和Vue3中的响应式原理非常相似，这篇文章就从这个仓库入手，一步一步带你剖析响应式的实现。 本文的代码是我参考 observer-util 用ts的…
6. JS 常用继承实现方式 看《JavaScript 设计模式》，关于里面提到的JS继承实现的方式，分为三种，且书中都给出了相关实现。这里也不再做讲解，只求记录一下，因为自己总是有时候会忘记这些东西。 类式继承，extend 原型式继承，clone 掺元类继承，augment 类式继承的实现，这里面很有必要引人注意的是，superclass.prototype.constr…
7. JavaScript️可视化：事件循环 本系列包括6篇文章 JavaScript️可视化：事件循环 JavaScript️可视化：变量提升 JavaScript️可视化：作用域链 JavaScript️可视化：js引擎 JavaScript️可视化：原型继承 JavaScript️可视化：生成器和迭代器 哦，事件循环。这是每个JavaScript开发人员都必须以一种或另一种方式处理…
8. 深入js——变量对象 文章深入js——执行上下文栈主要讲了代码执行过程中，执行上下文栈的变化，从文本开始，主要研究下执行上下文内部。 与执行上下文相关的3个概念： 变量对象(Variable object，VO) 作用域链(Scope chain) this 本文首先研究下变量对象。 变量对象VO 变量对象是与执行上下文相关的数据作用域，存储了在…
9. 全面介绍JavaScript的Object构造函数 随着 JavaScript 的发展， JavaScript 的 Object 构造函数也增加了许多方法（自身方法和原型链方法。有必要全面了解一下。本文基本涵盖了下 Object 所有的属性和方法介绍。如果有遗漏，还请指出。 一些未列出的属性或方法是非标准的、不推荐使用的或者已经从 Web 标准中删除的，本文将不再进行介绍。 首先需要介…
10. 基于 Flask 和 Vue 的词云生成应用 这是一个前端用 Vue，后端用 Python 的 Web 框架 Flask 开发的词云生成应用，代码已上传到 flask-vue-word-cloud 。写这个小项目的起因是最近团队年终述职，有一些大佬的 PPT 上用了词云来展示自己团队一年的工作成果。还有大佬说不要守着自己的一亩三分地，在技术上拓宽视野可以帮助我们更好的成长。正好之前接触过 Pyt…
11. 使用TypeScript和InversifyJS在Node.js中实现SOLID和洋葱架构<上> 在本文中，我们将描述一种称为洋葱架构的架构。洋葱架构是一种遵循SOLID原则的软件应用体系结构。它广泛地使用了依赖注入原理，并且深刻受到了领域驱动设计（DDD）原理和一些函数式编程的影响。 先决条件 下一节描述了一些软件设计原则和设计模式，我们必须学习这些知识才能理解洋葱架构。 关注点分离（SoC）原则 小…
12. Husky中文文档(webpack、babel、antd都在用) Husky 能让你更简单地使用Git hooks。它能阻止不合格的git commit，git push操作。webpack、babel、create-react-app、antd都使用了husky。截止目前，它在github上star数有 17.3k ，最近更新日期是2020年1月14日。 网上基本还没有husky的中文文档。 鉴于此，Breword 翻译团队对其最新版本的文档进行了翻…
13. Webpack实战（五）：轻松读懂Webpack如何分离样式文件 在上一篇文章中我给大家分享了预处理器（loader）,里面讲到了style-loader 和css-loader,有关样式引入的问题，但是上面的样式文件只是引入到style标签里面，并不是我想要的样式文件独立分离。 如果想了解有关css-loader和style-loader可以参考以下地址： 通过js引入样式文件只是把样式添加到style标签内，而不是引入…
14. JavaScript 私有类字段和 TypeScript 私有修饰符 每日前端夜话 第273篇 翻译： 疯狂的技术宅 作者：Valentino Gagliardi 来源：valentinog 正文共：1229  字 预计阅读时间：6 分钟 在本文中，我们将对 JavaScript 私有类字段进行一些说明，并了解它们与 TypeScript 私有修饰符的区别。 JavaScript 私有类字段和隐私需求…
15. JavaScript️可视化：变量提升 本系列包括6篇文章 JavaScript️可视化：事件循环 JavaScript️可视化：变量提升 JavaScript️可视化：作用域链 JavaScript️可视化：js引擎 JavaScript️可视化：原型继承 JavaScript️可视化：生成器和迭代器 提升 是每个JS开发人员都听说过的那些术语之一，因为您在Google上搜索了…
16. 基于Node.JS和Electron编写的集成开发环境 VS Code，成为最受欢迎的IDE 在 Stack Overflow 的 2019 年开发者调查中，VS Code 成为了最受欢迎的开发工具，遥遥领先其他的开发工具。 VS Code的优点： 1. 开源且免费: https://github.com/microsoft/vscode 2. 因采用node.js和html5技术，所以插件开发非常方便，种类非常多。 3. 性能优秀，打开大文件不卡，内存占用率低，可比 Subl…
17. Vue.js 学习笔记（一）数据绑定与指示器 安装 @vue/cli ： $ npm install -g @vue/cli 安装 git ： sudo apt-get install git 创建项目： $ vue create todo –default 项目结构 $ tree todo -I node_modules todo ├── babel.config.js ├── package.json ├── package-lock.json ├── public │ ├── favicon.ico │ └── index.html ├── …
18. 关于 Angular NgZone 的一些介绍 1. 从 Angular 的变更检测说起 要不是代码里看到 NgZone，我都不知道什么时候会接触到这个概念。我们知道，当下三大 UI 框架都存在变更检测，以此实现自己 UI 层的更新。在 Angular 中，若是逻辑代码存在如下事件时，便会触发框架的变更检测： Events  – 一些事件，例如  click 、 change 、 i…
19. 如何使用JS把相对地址变成绝对地址？ byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9227 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 在实际项目开发的时候，可能会遇到这样的场景，知道一个相对地址，希望转换成绝对定位。例如： “/wordpress/?p=9227″ → “https://www.zhangx…
20. 一文读懂 HTTP/1、HTTP/2、HTTP/3 作者：charryhuang，腾讯 CSIG 前端开发工程师 从 1989 年万维网（www）诞生，HTTP（HyperText Transfer Protocol）经历了众多版本迭代，WebSocket 也在期间萌芽。1991 年 HTTP0.9 被发明。1996 年出现了 HTTP1.0。2015 年 HTTP2 正式发布。2020 年 HTTP3 或能正式使用。以下将会简单介绍。 …
21. 美团点评技术年货：900+ 页电子书，覆盖前端、后台、大数据、算法…… 新年将至，年味渐浓。美团点评技术年货如期而至。从2013年12月4日发布第一篇文章，一直到今天，美团技术团队官方博客已经走过了6个春秋。截止目前，我们共发布376篇技术文章，微信公众号（meituantech）的关注者也超过20万。由衷地感谢大家一直以来对我们的鼓励和陪伴！2020年春节到来之际，我们精选美团技术博客几十篇…
22. 实施：GitHub + MarkDown 文档系统的工作环境部署及工作流程说明 前段时间有幸参与了开源社区的活动，并且借由 Apache Pulsar 项目实践了 GitHub + MarkDown 的文档开发。在与开源社区的童鞋进行交流的过程中了解到，对于非技术专业的TCer，即便对于社区贡献具有热情，但往往会被看似复杂的工具和流程“劝退”。那么在这里，我会基于个人的实践与体验，分享一下自认为“最简”的操作说明。 …
23. 一次 Flutter WebView 性能优化 本文记录了基于 WebView 的 Flutter 可视化库：echarts_flutter 的一次优化加载性能的过程。 对于任何基于 WebView 的组件，html 的加载都是关乎性能的一个重要环节。 echarts_flutter 的基本原理是用 WebView 渲染本地的 echarts 图表，因此也不例外。 echarts_flutter 的 WebView 加载主要涉及以下几个部…

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

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