20180621 前端开发日报

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

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

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

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

原创文章:20180621 前端开发日报 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/fe-daily-20180621.html)