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

[开源] SpriteJS — 一款简单的跨终端 canvas 绘图框架；web-audio-api可视化音乐播放器，实现暂停切换歌曲功能，粉色系专场~；深入理解javascript系列(十二):函数与函数式编程(1)；【Html5实战】7小时开发出手机支付宝界面；Vue 造轮子：从前端小工到高级前端；【CSS模块化之路2】webpack中的Local Scope；用D3.js 十分钟实现字符跳动效果；巧妙的CSS

[开源] SpriteJS — 一款简单的跨终端 canvas 绘图框架SpriteJS 是一款由360奇舞团开源的跨终端 canvas 绘图框架，可以基于 canvas 快速绘制结构化 UI、动画和交互效果，并发布到任何拥有canvas环境的平台上（比如浏览器、小程序和node）。
web-audio-api可视化音乐播放器，实现暂停切换歌曲功能，粉色系专场~ 基础知识 <audio> 标签是HTML5的新标签，通过添加 src 属性实现音乐播放。 AudioContext 是音频播放环境，原理与canvas的绘制环境类似，都是需要创建环境上下文，通过上下文的调用相关的创建音频节点，控制音频流播放暂停操作等操作，这一些操作都需要发生在这个环境之中。 try{ var audioCtx = …
深入理解javascript系列(十二):函数与函数式编程(1) 函数是Javascript的基础语法之一，当然，也是最重要的，是我们必须要掌握好的知识点之一。前几个所记录的执行上下文、作用域、变量对象、闭包、this等知识点，其实都是在围绕函数在展开（知道这一点，个人觉得非常重要）。之前的笔记可以说都是在进一步认识函数，而这次开始，则是认识函数之后，来使用函数了。 …
【Html5实战】7小时开发出手机支付宝界面
Vue 造轮子：从前端小工到高级前端
【CSS模块化之路2】webpack中的Local Scope CSS是一门几十分钟就能入门，但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是，本身不具备真正的模块化能力。 1. 面临的问题你可能会说，CSS有 @import 功能。然而，我们都知道，这里的 @import 仅仅是表示引入相应的CSS文件，但其模块化核心问题并未解决…
用D3.js 十分钟实现字符跳动效果本文基于 D3.js 作者 Mike Bostock 的例子原文分为三部分, 在这里笔者将其整合为了一篇方便阅读. 该效果基于 D3.js , 主要使用到了 d3-selection . 如果对d3-selection的基本使用逻辑不太清楚可以参见这篇文章. 效果图 Step1 首先代码会随机生成一个字符串, 该字符以绿色进入画面. Step2 接下来, …
巧妙的CSS 一个界面设计优秀的网站总是更能吸引用户的目光。界面设计优秀与否还是主要看UI设计师的能力，但是要想还原设计师给出UI，那么你的CSS编写能力就至关重要。 CSS和JS一样，也在不断的发展中，随着各个浏览器对CSS3的逐渐支持，CSS能发挥的作用越来越来大。熟练
【20180620 前端开发日报】JavaScript 的 this 原理；使用ESLint ＆ Prettier美化Vue代码；yaf 整合 Swoole 开发 Web 应用；Java开发技术大杂烩(三）之电商项目优化、rabbitmq、Git、OSI、VIM、Intellj IDEA、HTTP、JS、Java；精读《React 八种…详情→
JavaScript 一团乱，这是好事译者按： JavaScript从简单变复杂了，作者从另一个角度看待这个问题。原文: JavaScript’s a mess – and that’s a good thing 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。 JavaScript从不移除旧的特性，新版本总是向后兼…
全局配置ESLint之React 本文由我们团队的杨俊宁组内分享后总结。一、前言 ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint
Vue.js 还是 React？你会选择哪一个？为什么？原文地址：Vue.js or React ? Which you would chose and why? 原文作者：evilpingwin 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：allenlongbaob
Angular自动取消订阅原文链接：https://netbasal.com/automagically-unsubscribe-in-angular-4487e9853a88 创建时间：2018-06-18 修改时间：2018-06-18 参与人员：@Zaynex 如你所知，当你在
移动端使用 rem 单位时 css sprites 定位问题现在开发移动端 wap 页面，相信大家都会使用强大的 rem 单位去适配各种机型和屏幕；为了减少网络请求数量，提高网页访问性能，一般都会把多个小 icon 合并成一张 sprite 图，然后根据 background-position 进行定位；但是由于计算机
深入理解javascript系列(十六):深入高阶函数由于这两天，广州-东莞-惠州三日游，所以更新速度有所放慢… 前面我们说过，简单点理解高阶函数，则凡是接收一个函数作为参数的函数，就是高阶函数… 大神说，高阶函数是一个高度封装的过程，理解它需要一点想象力。所以本次就借助几个例子，来理解高阶函数的封装。 1. 数组map方法封装的思考过程我们…
笔记：配合 Vue.js 配置 Webpack（一）Vue.js，Webpack 和 Webapck Dev Server 的基本配置通过 NPM 创建项目无论是这个旨在梳理、测试，或者一个正式的、需要通过打包工具来构建的前端项目，通过 npm init 来创建项目，管理项目依赖已经成了标配。 -y 在这里是表示快速新建。使用 npm init 来初始化
浅谈几个前端异步解决方案 Javascript语言的执行环境是单线程。即一次只能完成一个任务。若有多个任务则需排队逐个执行——前一个任务完成，再执行后一个任务。这种执行模式实现简单，执行环境相对单纯。但随着前端业务日渐复杂，事务和请求等日渐增多，这种单线程执行方式在复杂的业务下势必效率低下，只要有一个任务耗时很长，后面的任务都必须…
JavaScript函数式编程之pointfree与声明式编程更多相关内容见博客 github.com/zhuanyongxi… 函数式编程中的pointfree的意思就是“无参”或“无值”，pointfree style是一种编程范式，也作tacit programming，就是“无参编程”的意思了。什么是“无参编程”
JavaScript 工作原理之十一－渲染引擎及性能优化小技巧原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第十一章。迄今为止，之前的 JavaScript 工作原理系列文章集中
【2018年5月份GitHub上最热门的Python项目】5 月份 GitHub 上最热门的Python项目排行已经出炉啦，在本月的名单中，出现了许多新项目，下面一起来看看上榜的项目有哪些。详见
JS的对象的原型翻阅到以前的学习笔记，加上自己现在的理解，谈一谈JS的原型链。 tips：本文有很多胡言乱语，如果你已经掌握js原型链，不建议阅读本文，以免被我误导。对象的原型究竟在哪里？ function Person() { } let person = new Person(); 当初我很不理解，person的原型是什么？很多教程就说: person的原型是 person…
今天Vue Star突破100K，正式超越了React 今天 Vue Star突破了 100K ，正式超越 React 。从我写文章开始就记录这个曲线图，可以看到 Vue 仅有微弱优势，目前战况激烈，直接看图：图片摘自 https://hubble.js.org/react-vs-vue/ 前端框架的演进越来越激烈，越来越快，以至于出现了求不要更新了，老子学不动了 long long ago…
Vuex入门到上手一、前言当我们的应用遇到多个组件共享状态时，会需要多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。在搭建下面页面时，你可能会对 vue 组件之间的通信感到崩溃，特别是非父子组件之间通信。此时就应该使用
前端性能优化：细说JavaScript的加载与执行本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法，既是细说，文中在涉及原理性的地方，不免会多说几句，还望各位读者保持耐心，仔细理解，请相信，您的耐心付出一定会让您得到与之匹配的回报。缘起随着用户体验的日益重视，前端性能对用户体验的影响备受关注，但由于引…
更可靠的 React 组件：组合及可重用性原文摘自：https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/ I. 组合一个组合式组件是由更小的特定组件组合而成的组合（composition）是一种通过将各组件联合在一起以创建更大组件的方式。组合是 React 的核心。幸好，组合易于…
JavaScript 引擎基础：Shapes 和 Inline Caches 前言：本文也可以被称做 “JavaScript Engines: The Good Parts™”，其来自 Mathias 和 Benedikt 在 JSConf EU 2018 上为本文主题演讲所起的题目，更多 JSconf EU 2018 上有趣的主题分享
【JSConf EU 2018】JavaScript引擎: 精粹部分 JSConf EU 2018圆满结束, 谷歌V8的开发者Mathias Bynens以及Benedikt Meurer一起发表了《JavaScript Engines: The Good Parts™》演讲，本文将带领大家回顾一下演讲上所提到的重点。演讲第一部分: JavaScript引擎 JavaScript引擎 JavaScript引擎解析源代码并将其转换成抽象语法树（AST）。基于AST，解释器产生字节…
美丽的闭包,在js中实现函数重载引言最近在js的学习中,看到了函数重载的问题，一开始，只看到了实现代码，看着代码冥思苦想了半个小时，总算是理清了其实现的原理，也为其实现的巧妙感到赞叹，也是在自己搞懂原理之后，去网络上搜索了下，才知道，这个实现方法是jQuery作者John Resig在《J
Webpack 4 配置最佳实践 Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有了新版配置的文档。社区中一些开发者也已经成功试水，升级到了 Webpack 4，…
用proxy实现一个更优雅的vue 如果你有读过Vue的源码，或者有了解过Vue的响应原理，那么你一定知道Object.defineProperty(), 那么你也应该知道，Vue 2.x里，是通过递归 + 遍历 data 对象来实现对数据的监控的，你可能还会知道，我们使用的时候，直接通过数组的下标给数组设置值，不能实时响应，是因为Object.defineProperty() 无法监控到数组下…