20200201 前端开发日报

重拳出击:打造 Vue3.0 + Typescript + TSX 开(乞)发(丐)模式;高质量前端快照方案:来自页面的 “自拍”;vuex为什么不建议在action中修改state;JS 优雅指南.1;异步编程(三):reactor 模式;前端两种路由实现和使用场景;JS 简单实现utf8编码,base64编码;如何在Vue中使用lottie加载SVG动画

  1. 重拳出击:打造 Vue3.0 + Typescript + TSX 开(乞)发(丐)模式 2019年底,you大的 vue3.0 正式 release 了一个 alpha 版本。全新的 api,更强大的速度和 typescript 的支持,让人充满期待;同时,它结合了 hooks 的一系列优点,使其生态更容易从 React 等别的框架进行迁移。作为 React 和 Vue 双重粉丝,鼓掌就完事了!本文受 使用Vue 3.0做JSX(TSX)风格的组件开发 启发,由于原作大...
  2. 高质量前端快照方案:来自页面的 “自拍” 编者按:本文转载自云音乐前端技术团队,作者网易云音乐前端工程师朱佳斌。 1. 背景 将网页保存为图片(以下简称为快照),是用户记录和分享页面信息的有效手段,在各种兴趣测试和营销推广等形式的活动页面中尤为常见。 快照环节通常处于页面交互流程的末端,汇总了用户最终的参...
  3. vuex为什么不建议在action中修改state 在最近的一次需求开发过程中,有再次使用到Vuex,在状态更新这一方面,我始终遵循着官方的“叮嘱”,谨记“一定不要在action中修改state,而是要在mutation中修改”;于是我不禁产生了一个疑问:Vuex为什么要给出这个限制,它是基于什么原因呢?带着这个疑问我查看Vuex的源码,下面请大家跟着我的脚步,来一起揭开这个问题的...
  4. JS 优雅指南.1 原文发布与我的博客 lambdas.dev 。 摸鱼时更新。 好的代码不仅是在性能、体积、内存,更要 code for human 。 我们知道代码被人阅读的难度远胜于引擎,要写出好的代码需要脱离自己的视角,以他人的眼光审视,重新理解上下文含义, 此时代码的架构、拆分、组合、技巧则给予人阅读的幸福感,我们致力于构建优秀的...
  5. 异步编程(三):reactor 模式 书接上回,我们一起体验了promise模式,也了解到了其解决什么场景下的问题。 本篇文章的目的之一即回答好两个问题: reactor模式解决什么场景下的问题 reactor解决问题的场景与promise模式有哪些不同,有哪些重叠 另外在概念层面,本篇文章希望能够解释清楚reactor领域一些常见的概念 在...
  6. 前端两种路由实现和使用场景 在学习vue-router时,了解到前端路由的两种模式,本文就前端路由,及其两种模式的原理和使用场景,做一个整理总结。 前端路由概述 什么是路由 路由这个概念最先是后端出现的,简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。 前端路...
  7. JS 简单实现utf8编码,base64编码 文章用JS简单的实现utf8编码和base64编码。 概要: Unicode简单了解 utf8编码 base64 编码 总结 Unicode,ASCII,GB2312编码集合等,类似于字典,字符的编码,类似于字典中的字在哪一页哪一行。当不同系统用同一本字典查同一个编码得到的字符会一致。 如下图: 1. Unicode简单了解 wi...
  8. 如何在Vue中使用lottie加载SVG动画 背景 最近刚搞完官网,是时候分享一波我在码官网过程中遇到的一些小困难。当然,我会分享一些比较重点的内容。现在网页上比较复杂的动画基本都采用 SVG,像 Ant Design 全家桶的官网,首页的 Banner 基本采用 SVG 动画(太过复杂的 SVG 会消耗 CPU 性能,你电脑的散热器可能就会嗡嗡响,特别是 AntV 官网的 Banner 动...
  9. 一个可以学习js的打字游戏体验地址:[链接]托管到 github上的,国内速度会有点慢代码开源地址: [链接]React + TS 开发每天练习5分钟,记忆js内置对象常用的方法
  10. JS变量存储与深拷贝和浅拷贝string、number、null、undefined、boolean、symbol(ES6新增) 变量值存放在栈内存中,可直接访问和修改变量的值基本数据类型不存在拷贝,好比如说你无法修改数值1的值
  11. cdn.bootcss.com的幺蛾子疫情时期,我相信大家都在家里面睡懒觉,我也不例外。但是早上老板就开始call我了说系统怎么登陆不上了。。尿都没来得及撒就开始开电脑看问题。入眼一看:
  12. 简述Promise Promise是异步编程的一种新的解决方案,比以往通过回调函数和事件来解决异步操作更加强大。 什么是回调函数? 可以理解为,当完成一些事情后,再去做的另一些事情,这需要传入一个函数作为参数去执行 什么是事件? 事件其实就是发生了一个事情,然后相应的去触发某个函数。当然事件也是一个异步操作,...
  13. 在React中引入Vue3的reactivity分包来实现最强大的状态管理 React的状态管理是一个缤纷繁杂的大世界,光我知道的就不下数十种,其中有最出名immutable阵营的 redux ,有mutable阵营的 mobx , react-easy-state ,在hooks诞生后还有极简主义的 unstated-next ,有蚂蚁金服的大佬出品的 hox 、 hoox 。 其实社区诞生这么多种状态管理框架,也说明状态管理库之间都有一些让人不满...
  14. Angular ControlValueAccessor - 自定义表单控件介绍与实战 本文是学习 Angular ControlValueAccessor 过程中的笔记摘要,全文结构如下: 表单与控件介绍 - 通过日常在 Angular 中使用表单以及自定义控件的场景引出 ControlValueAccessor ControlValueAccessor API 介绍 - 介绍 ControlValueAccessor API 的细节 自定义表单控件实现 - 通过一个计数器例子实战来叙述...
  15. 前端工程化之webpack核心功能 在前端工程化对世界中,掌握webpack配置基本是我们每个前端工程师需要掌握的,在vue/react/angular发展初期,他们但脚手架还不够完善,许多但配置都需要开发者自己来,但随着脚手架工具但完善,项目但整体架构已无需开发人员考虑太多,所以现在许多新入行的前端开发者会觉得前端开发毫无难度,这种也没错,如果你仅仅满...
  16. 一文搞懂Node.js异步编程|奥力给 Node 保持了 JavaScript 在浏览器中单线程的特点。在 Node 中, JavaScript 与其余线程是无法共享任何状态的。 单线程 最大的好处是不用像多线程那样处处在意状态同步的问题,不存在死锁,也没有线程上下文交换所带来的性能上的开销。 单线程也有其自身的弱点,这些弱点是学习 Node 的过程中必须要面对的。积极的面...
  17. vue-cli设置css不生效 我们有的项目使用的是老的vue-cli脚手架生成的,今天想写点东西,发现.vue文件里面 style 里面写的样式都不生效了,很自然就想到是不是loader的问题。 在这种项目的webpack.base.config.js一般设置loader的 rules: : []), { test: /.vue$...
  18. 为何要对生产环境的 Node.js 使用反向代理? 原文: medium.com/intrinsic/w… 早在 2012 年,PHP 和 Ruby on Rails 仍是统治渲染 web 应用的服务器端技术。但是,一个大胆的竞争者在社区中搅起风暴。这项在当年的一篇博文中宣称通过了百万级并发连接测试的技术并非其他,正是 Node.js,其流行程度从那时至今也在稳定增长。 不像当时的大多数同类技...
  19. Webpack 从哪儿去到哪儿去 指定一个或多个入口(源码目录文件) entry ,将各个模块打包封装为一个或多个代码块 chunk ,并生成文件一个或多个 bundle 。 entry 确定入口模块的位置,定义 chunk name,默认为 main 。其形式可以是: 字符串、对象、数组或函数 ,字符串和数组其 chunk name 无法改变,只能是默认值。 字符串入口 modul...

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

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

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