20190513 前端开发日报

TypeScript:一种思维方式;web图像优化(5);Web 技巧 (04);如何选取合适的前端动效方案?;理解JavaScript的闭包;如何在 React Hooks 中请求数据;如何让你的 CSS Grid 布局有良好的可访问性;JS 无形装逼,最为致命

  1. TypeScript:一种思维方式 TS 怎么影响了我的思考方式。
  2. web图像优化(5) 避免使用有损编解码器重新压缩图像 建议始终从原始图像压缩。 重新压缩图像有后果。 假设您使用了已经被压缩的质量为60的JPEG。如果您使用有损编码重新压缩此图像,则会变得更糟。 每轮新一轮的压缩都会引入分代丢失 - 信息将会丢失,并且压缩伪像将开始建立
  3. Web 技巧 (04) 大漠老师将围绕着 CSS 布局展开为你介绍各项技巧。
  4. 如何选取合适的前端动效方案? 总结得挺全面的一份清单。
  5. 理解JavaScript的闭包 闭包真言 理解闭包情景一:函数作为返回值 理解闭包情景二:函数作为参数传递到其他函数中 理解闭包情景三:循环和闭包 实际开发中闭包的应用 闭包优缺点 闭包真言 JavaScript中闭包无处不在,你只需要能够识别并拥抱它。 当函数可以记住并访问所在的词法作用域,即使函数是在当前...
  6. 如何让你的 CSS Grid 布局有良好的可访问性 CSS Grid 可能会有访问性不佳的问题,尤其是对于那些使用屏幕阅读器和仅使用键盘的用户。本篇教程将会帮助你避免此类问题。
  7. JS 无形装逼,最为致命》单行简洁的代码很难维护(有时甚至难以理解),但这并不能阻止广大攻城狮们脑洞,在编写简洁的代码后获得一定的满足感。 (by megatron)

    JS 无形装逼,最为致命
  8. 在vue2中使用echarts (Vue-ECharts插件)Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本,如果你正在使用官方的 Vue CLI 来创建项目,可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。请按如下方法修改配置:
  9. D3.js与echart.js的应用场景 D3.js的全称是Data-Driven Documents,其实就是一个数据驱动的文档的js库,简而言之就是一个数据可视化的库。那什么是数据可视化呢?举个例子: 给出一组数据 如果我们想要看出这组数据的大小关系,单看数据显然不够直观。那么我们可以将它转换为一种简单易懂的图表的形式(如下图)这样...
  10. JavaScript实现元素全排列 排列 (Permutation / Arrangement) 概念 n 个不同元素中任意选取 m (m <= n) 个元素进行排列,所有排列情况的个数叫做 排列数 ,其值等于: A = n! / (n - m)! ! 表示数学中的阶乘运算符,可以通过以下函数实现: function factorial(n) { if (n === 0 || n === 1) { return 1; ...
  11. 10个有趣的javascript和css库(2019年最新)我们的使命是让您了解最新和最酷的Web开发趋势。这就是为什么我们每个月都会发布一些精选的资源,这些资源是我们偶然发现并认为值得您关注的。
  12. 个人对vue中生命周期的理解 虽然现在网上有一大堆关于vue生命周期的文章,但我总觉得还是自己再来一遍理解更深,当然,我也看了很多关于vue生命周期的文章才写出我自己的理解,不妥之处,不吝赐教! 官方图解 首先,走流程,上官方图解,注意,是官方图解! 生命钩子函数 什么叫钩子函数?我认为,钩子就是随时可能或者有需要时...
  13. 升级优化Webpack4,使你的打包速度提升200%以上 之前修改公司的运营系统,多年来积累下来的代码使得每次打包构建的时候时间异常漫长,非常难受,一气之下将项目的Webpack从2.x升级到了4.x,原来在Jenkins上一套需要6分钟的流程现在只需2分钟,顿时感到身心舒畅( ̄▽ ̄)/ 并且我顺便把项目划分成多入口项目,实现增量更新,这样就不用每次都打包这么多文件啦!...
  14. CSS scroll-snap 滚动事件停止及元素位置检测 “CSS Scroll Snap 是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何 JS 代码的参与,浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯 CSS 实现。”
  15. Kindd:一个图形化 dd 命令前端 | 向 “Kindd” 问好,一个属于 dd 命令的图形化前端。它是自由开源的、用 Qt Quick 所写的工具。总的来说,这个工具对那些对命令行不适应的初学者是非常有用的。 …

    Kindd:一个图形化 dd 命令前端
  16. 用js简单提供增删改查接口本周写实验,需要提供简单的后台接口对数据库进行增删改查,以前写后台只用过php和java,因为比较容易,用js写的也比较快,所以这次想用js实现简单的增删改查接口。
  17. ES6中Array.find()和findIndex()函数用法详解ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。他们的都是一个查找...
  18. 用JavaScript实现插入排序插入排序是一种非常简单的算法,最适合大部分已经被排好序的数据。在开始之前,通过可视化演示算法如何运作一个好主意。你可以参考前面的动画来了解插入排序的工作原理。
  19. What's New in JavaScript 前几天 Google IO 上 V8 团队为我们分享了 《What's New in JavaScript》 主题,分享的语速很慢推荐大家可以都去听听就当锻炼下听力了。看完之后我整理了一个文字版帮助大家快速了解分享内容,嘉宾主要是分享了以下几点: JS 解析快了 2 倍 async 执行快了 11 倍 平均减少了 20% 的内存使用 class filed...
  20. GitHub Package Registry 发布你依旧是那个我们所爱的 GitHub 2018 年 6 月微软宣布以 75 亿美元收购 GitHub。作为一名微软员工,在高兴之余,也会有一丝的担忧:收购之后,GitHub 的运营和发展会不会受到公司很大程度的影响?熟悉微软产品线的童鞋应该都知道 Azure DevOps,它的功能实在是和 GitHub 太像了,在收购之后,会不会有一些强行的整合?在那时,GitHub 还没有提供自己的 ...
  21. electron-vue利用webpack打包实现多页面的入口文件 项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验。 1、webpack的核心概念 Entry:入口,Webpack执行构建的第一步从Entry开始; Module:模块,在Webpack里一切皆模块,一...
  22. 浅谈js中的装饰器 装饰器模式 (Decorator Pattern) 是一种结构型设计模式,旨在促进代码复用,可以用于修改现有的系统,希望在系统中为对象添加额外的功能,同时又不需要大量修改原有的代码。 JS中的装饰器是ES7中的一个新语法,可以对 类 、 方法 、 属性 进行修饰,从而进行一些相关功能定制, 它的写法与Java的注解 ...
  23. What's New in JavaScript前几天 Google IO 上 V8 团队为我们分享了《What's New in JavaScript》主题,分享的语速很慢推荐大家可以都去听听就当锻炼下听力了。看完之后我整理了一个文字版帮助大家快速了解分享内容,嘉宾主要是分享了以下...
  24. 30 天精通 RxJS (01):认识 RxJS 原作者表示:一名來自台灣的小伙子,熱愛學習新技術,喜歡 JS 與 Functional Programming,熱衷於把困難的技術用簡單的語言闡述,歡迎來到我的文章。 原文 在网页中存取数据都是异步(Async)的,比如说我们想从后端拿到一组数据,要先发送一个请求,然后必须等到数据回來,再执行对这个数据的操作。这就是一个异步...

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

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

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