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

图片纯前端JS压缩的实现；介绍几个开发前端动画不得不学的动画库；看看这些被同事喷的JS代码风格你写过多少；javascript函数全解；一次性搞懂JavaScript正则表达式之引擎；JS箭头函数三连问：为何用、怎么用、何时用；JavaScript之你不知道的this；vue项目实践004~~~一篮子的实践技巧

图片纯前端JS压缩的实现本文删简自： www.zhangxinxu.com/wordpress/?… 一、功能体验先看demo：使用canvas在前端压缩图片并上传demo 如下截图：点击文件选择框，我们不妨选一张尺寸比较大的图片，例如下面这种2M多的钓鱼收获照：于是图片歘歘歘地传上去了：此时我们点击最终上传完毕的图片地址，…
介绍几个开发前端动画不得不学的动画库
看看这些被同事喷的JS代码风格你写过多少作者：殷荣桧@腾讯目录：一、变量相关二、函数相关三、尽量使用ES6，有可以能的话ES7中新语法现在写代码比以前好多了，代码的格式都有eslint,prettier,babel(写新版语法)这些来保证，然而，技术手段再高端都不能解决代码可读性（代码
javascript函数全解本文总结了js中函数相关的大部分用法，对函数用法不是特别清晰的同学可以了解一下。 1.0 简介同其他语言不同的是，js中的函数有2种含义。普通函数：同其他语言的函数一样，是用于封装语句块，执行多行语句的语法结构。构造函数：不要把它当作函数，把它当作class，内部可以使用this表示当前对象。 …
一次性搞懂JavaScript正则表达式之引擎本文是『horseshoe·Regex专题』系列文章之一，后续会有更多专题推出 GitHub地址： github.com/veedrin/hor… 博客地址(文章排版真的很漂亮)：veedrin.com 如果觉得对你有帮助，欢迎来GitHub点Star或者来我的博客亲口告诉我我们说正则表达式是语言无关的，是因为驱动正则表达式的…
JS箭头函数三连问：为何用、怎么用、何时用在现代JS中最让人期待的特性就是关于箭头函数，用=>来标识。箭头函数有两个主要的优点：其一是非常简明的语法，另外就是直观的作用域和this的绑定。因为这些优点，箭头函数比起其他形式的函数声明更加受欢迎。比如，受欢迎的airbnb eslint conf
JavaScript之你不知道的this 只有深谙了this，你才有可能用 JavaScript 创建类似谷歌地图这样大型的复杂应用一、这篇文章出现的背景 1. this在我们开发过程中的重要性(开发场景) — 通过一段代码简单了解this 提供了一种更优雅的方式来隐式”传递”一个对象引用, 让API设计更加简洁和清晰首先来看一段代码, 此处不使用this, 需要给identify(…
vue项目实践004~~~一篮子的实践技巧使用场景：主要是针对需要把对象的一些属性批量的赋值到另外一个对象上，然后如果你的属性很多可能要写很多赋值语句。（前提是属性名一般是相同的）说明：可能有人会问为什么不直接用这个对象，答案也很简单，如果可以直接用，当然直接用是最好的，我自己在写接口param的时候，就会注意这些，需要传参的部分封装到一…
设计模式什么的根本记不住啊 , 直接看各类原生JS继承吧!! 参考资料不要讲什么设计模式 , 看得老子脑壳昏 , 智商欠费 , 还是简单点 , 方案 , 继承 , 就完事了 // 首先我们得有个父类 // 这个父类也很简单 function Human(name) { this.name = name || ‘肥宅’ // 有参就取参 , 没参就叫肥宅 } Human.prototype.drink = function(drinks) { console.log(this…
React手稿之高阶组件Higher-Order Components HOC 不是React的标准API。 HOC 是一个函数。 HOC 返回一个Component。示例： {代码…} 使用场景代码复用类似React 0.15版本之前的mixin。多个组件同用一段代码，或者同样的方法时，…
Vue一个案例引发的递归组件的使用今天我们继续使用 Vue 的撸我们的实战项目，只有在实战中我们才会领悟更多，光纸上谈兵然并卵，继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》之后，今天来聊一聊我们如何在项目中使用递归组件。信息的分类展示列表这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类，如下如所示： …
在2018年里关于测试JavaScript的回顾这篇文章的目的是想要让你对于在2018中测试Javascript最重要的原因、时期和工具还有方法保持了解。这篇文章的内容参考了许多文章（链接列在要文底下），还包含了我们自己多年在Welldone Software Solutions里不同产品中的实现的不同测试方案的经验。阅读这篇文章的人，我们假设他们只知道在2018年的前端开发社区是怎…
Phantomjs截图里的中文乱码问题使用 Phantomjs 对网页进行截图，在本地运行都是好好的，但是一到服务器，首先遇到部署问题，然后是中文乱码问题，遇到中文字符就渲染成下划线 “_”。（其实不仅仅是中文，韩文什么的也是渲染不出来）。这个问题应该不难，应该是因为服务器没有安装中文字体导致的。但难题是 alpine linux 的中文字体不太好找。网上…
用JavaScript也能玩机器学习：30行JS代码搭建一个神经网络
如何优雅地写JS串行异步逻辑随着现代浏览器的不断发展，相信大家渐渐对ES6中的Promise已经有很多的使用了，其中对Promise.all估计也用的很多。Promise.all就是并行执行多个任务，然后在所有任务成功后触发then里面的内容，或者任意一个任务失败后触发catch里面的内
常规业务开发中是否需要引入moment.js? moment.js作为一个全球通用库,需要做兼容性((moment.min.js 52Kb, moment-with-locales.min.js 327Kb).在无国际化的日常业务开发中,Date的应用场景主要在日期(时间)控件的格式化展示,处理(比较,区间计算). 通过下面几个自定义的小函数,能否解决这些日常需求呢? 日期/时间格式化展示在日期选择器(datePicker)…
一份超级详细的Vue-cli3.0使用教程[赶紧来试试]在vue-cli 2.X的时候，也写过一篇类似的文章，在八月份的时候vue-cli已经更新到了3.X，新版本的脚手架，功能灰常强大，试用过后非常喜欢，写篇教程来帮助各位踩一下坑。
Vue 全家桶实现一个移动端酷狗音乐Vue 已经用了不少时间，最近抽空把以前的未完成的酷狗音乐做完了，过来分享下，也可以直接点这里预览，注意切换成手机模式。
vue.js的项目实战组件库是做UI和前端日常需求中经常用到的，把一个按钮，导航，列表之类的元素封装起来，方便日常使用，调用方法只需直接写上<qui-button></qui-button>或者<qui-nav></qui-nav>这样的代…
React 重要的一次重构：认识异步渲染架构 Fiber熟悉 react 的朋友都知道，在 react 中有个核心的算法，叫 diff 算法。web 界面由 dom 树组成，不同的 dom 树会渲染出不同的界面。react 使用 virtual dom 来表示 dom 树，而 diff 算法就是用于比较 virtual dom …
Laravel核心代码学习–HTTP内核 Http Kernel Http Kernel是Laravel中用来串联框架的各个核心组件来网络请求的，简单的说只要是通过public/index.php来启动框架的都会用到Http Kernel，而另外的类似通过artisan命令、计划任务、队列启动框架进行
react入门笔记PWA progressive web application(registerServiceWorker)
前端特效【第04期】|果汁混合效果-下在上一期的【前端特效】☜里，我们已经把果汁混合的效果里面的圆形菜单做好了，如果你错过了上篇文章今天我们要讨论的是杯子里面的液体生成问题
css文本换行总结到文本过长的问题，元素的宽度不足以容那文本的内容，文本超出元素显示，遇到这种情况，一般有两种处理方式，一种是超出省略不显示，很暴力，很直接，还有一种就是换行显示，下面我将会介绍几种css种常用的换行方…
【小程序tab 列表完美解决方案】小程序使用swiper组件解决切换问题，然后就是每个swiper-item里面加一个scroll-view组件，这样子就不需要每次切换都要计算历史滚动位置了。效果非常流畅，JS只需要几个常规的函数就解决了，不需要hack…详情→
【英】NativeScript 5.0 发布了
【20181116 前端开发日报】你应该知道的 JavaScript Array.map() 的 5 种用途；jQuery的没落和技术发展的一般规律；Node.js 指南（关于Node.js）；前端错误监控与上报；JQuery7：事件委托；vue项目…详情→
用 JavaScript 实现简单拼图游戏本篇主要讲解，如何利用原生的 JavaScript 来实现一个简单的拼图小游戏。线上体验地址：拼图一、游戏的基础逻辑想用一门语言来开发游戏，必须先了解如何使用这门语言来实现一些基础逻辑，比如图像的绘制、交互的处理、定时器等。 1、图形绘制图形绘制是一切
zanePerfor前端性能监控平台高可用之Mongodb集群分片架构 HI!，你好，我是zane，zanePerfor是一款最近我开发的一个前端性能监控平台，现在支持web浏览器端和微信小程序段。我定义为一款完整，高性能，高可用的前端性能监控系统，这是未来会达到的目的，现今的架构也基本支持了高可用，高性能的部署。实际上还不够，在
es6中的promise解读什么是promise？简单的说它是一个异步流程的控制手段。是一个代表了异步操作最终完成或者失败的对象。 promise的优点 promise解决了回调地狱的问题 promise可以支持多个并发的请求 promise的错误传播机制可以统一的处理错误信息