20190513 前端开发日报-前端开发博客

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

TypeScript：一种思维方式 TS 怎么影响了我的思考方式。
web图像优化(5) 避免使用有损编解码器重新压缩图像建议始终从原始图像压缩。重新压缩图像有后果。假设您使用了已经被压缩的质量为60的JPEG。如果您使用有损编码重新压缩此图像，则会变得更糟。每轮新一轮的压缩都会引入分代丢失 – 信息将会丢失，并且压缩伪像将开始建立
Web 技巧 (04) 大漠老师将围绕着 CSS 布局展开为你介绍各项技巧。
如何选取合适的前端动效方案？总结得挺全面的一份清单。
理解JavaScript的闭包闭包真言理解闭包情景一：函数作为返回值理解闭包情景二：函数作为参数传递到其他函数中理解闭包情景三：循环和闭包实际开发中闭包的应用闭包优缺点闭包真言 JavaScript中闭包无处不在，你只需要能够识别并拥抱它。当函数可以记住并访问所在的词法作用域，即使函数是在当前…
如何在 React Hooks 中请求数据 Hooks 大法……
如何让你的 CSS Grid 布局有良好的可访问性 CSS Grid 可能会有访问性不佳的问题，尤其是对于那些使用屏幕阅读器和仅使用键盘的用户。本篇教程将会帮助你避免此类问题。
《JS 无形装逼，最为致命》单行简洁的代码很难维护（有时甚至难以理解），但这并不能阻止广大攻城狮们脑洞，在编写简洁的代码后获得一定的满足感。（by megatron）
在vue2中使用echarts (Vue-ECharts插件）Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本，如果你正在使用官方的 Vue CLI 来创建项目，可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。请按如下方法修改配置：
D3.js与echart.js的应用场景 D3.js的全称是Data-Driven Documents，其实就是一个数据驱动的文档的js库，简而言之就是一个数据可视化的库。那什么是数据可视化呢？举个例子：给出一组数据如果我们想要看出这组数据的大小关系，单看数据显然不够直观。那么我们可以将它转换为一种简单易懂的图表的形式（如下图）这样…
JavaScript实现元素全排列排列 (Permutation / Arrangement) 概念 n 个不同元素中任意选取 m (m <= n) 个元素进行排列，所有排列情况的个数叫做排列数，其值等于： A = n! / (n – m)! ! 表示数学中的阶乘运算符，可以通过以下函数实现： function factorial(n) { if (n === 0 || n === 1) { return 1; …
10个有趣的javascript和css库（2019年最新）我们的使命是让您了解最新和最酷的Web开发趋势。这就是为什么我们每个月都会发布一些精选的资源，这些资源是我们偶然发现并认为值得您关注的。
个人对vue中生命周期的理解虽然现在网上有一大堆关于vue生命周期的文章，但我总觉得还是自己再来一遍理解更深，当然，我也看了很多关于vue生命周期的文章才写出我自己的理解，不妥之处，不吝赐教！官方图解首先，走流程，上官方图解，注意，是官方图解！生命钩子函数什么叫钩子函数？我认为，钩子就是随时可能或者有需要时…
升级优化Webpack4，使你的打包速度提升200%以上之前修改公司的运营系统，多年来积累下来的代码使得每次打包构建的时候时间异常漫长，非常难受，一气之下将项目的Webpack从2.x升级到了4.x，原来在Jenkins上一套需要6分钟的流程现在只需2分钟，顿时感到身心舒畅(￣▽￣)／并且我顺便把项目划分成多入口项目，实现增量更新，这样就不用每次都打包这么多文件啦！…
CSS scroll-snap 滚动事件停止及元素位置检测 “CSS Scroll Snap 是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何 JS 代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯 CSS 实现。”
Kindd：一个图形化 dd 命令前端 | 向 “Kindd” 问好，一个属于 dd 命令的图形化前端。它是自由开源的、用 Qt Quick 所写的工具。总的来说，这个工具对那些对命令行不适应的初学者是非常有用的。 …
用js简单提供增删改查接口本周写实验，需要提供简单的后台接口对数据库进行增删改查，以前写后台只用过php和java,因为比较容易，用js写的也比较快，所以这次想用js实现简单的增删改查接口。
ES6中Array.find()和findIndex()函数用法详解ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。他们的都是一个查找…
用JavaScript实现插入排序插入排序是一种非常简单的算法，最适合大部分已经被排好序的数据。在开始之前，通过可视化演示算法如何运作一个好主意。你可以参考前面的动画来了解插入排序的工作原理。
What's New in JavaScript 前几天 Google IO 上 V8 团队为我们分享了《What’s New in JavaScript》主题，分享的语速很慢推荐大家可以都去听听就当锻炼下听力了。看完之后我整理了一个文字版帮助大家快速了解分享内容，嘉宾主要是分享了以下几点： JS 解析快了 2 倍 async 执行快了 11 倍平均减少了 20% 的内存使用 class filed…
GitHub Package Registry 发布你依旧是那个我们所爱的 GitHub 2018 年 6 月微软宣布以 75 亿美元收购 GitHub。作为一名微软员工，在高兴之余，也会有一丝的担忧：收购之后，GitHub 的运营和发展会不会受到公司很大程度的影响？熟悉微软产品线的童鞋应该都知道 Azure DevOps，它的功能实在是和 GitHub 太像了，在收购之后，会不会有一些强行的整合？在那时，GitHub 还没有提供自己的 …
D3.js 线段生成器 (V3版本)
electron-vue利用webpack打包实现多页面的入口文件项目需要在electron的项目中新打开一个窗口，利用webpack作为静态资源打包器，发现在webpack中可以设置多页面的入口，今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验。 1、webpack的核心概念 Entry：入口，Webpack执行构建的第一步从Entry开始； Module：模块，在Webpack里一切皆模块，一…
浅谈js中的装饰器装饰器模式（Decorator Pattern）是一种结构型设计模式，旨在促进代码复用，可以用于修改现有的系统，希望在系统中为对象添加额外的功能，同时又不需要大量修改原有的代码。 JS中的装饰器是ES7中的一个新语法，可以对类、方法、属性进行修饰，从而进行一些相关功能定制, 它的写法与Java的注解 …
What’s New in JavaScript前几天 Google IO 上 V8 团队为我们分享了《What’s New in JavaScript》主题，分享的语速很慢推荐大家可以都去听听就当锻炼下听力了。看完之后我整理了一个文字版帮助大家快速了解分享内容，嘉宾主要是分享了以下…
30 天精通 RxJS (01)：认识 RxJS 原作者表示：一名來自台灣的小伙子，熱愛學習新技術，喜歡 JS 與 Functional Programming，熱衷於把困難的技術用簡單的語言闡述，歡迎來到我的文章。原文在网页中存取数据都是异步(Async)的，比如说我们想从后端拿到一组数据，要先发送一个请求，然后必须等到数据回來，再执行对这个数据的操作。这就是一个异步…