20180829 前端开发日报

Web 魔方模拟器的设计与实现;可能比文档还详细–VueRouter完全指北;vue过滤器(八);React Context API:轻松管理状态;现代 JS 流程控制:从回调函数到 Promises 再到 Async/Await;每天阅读一个 npm 模块(1)- username;如何使用纯函数式 JavaScript 处理脏副作用;如何机智的弄坏一台电脑?来自一名前端工程师的报复..

  1. Web 魔方模拟器的设计与实现 魔方是个结构简单而变化无穷的神奇玩具。那么如何在万能的浏览器里模拟出魔方的无尽变换,又如何将其还原呢?下面让我们一步步地来一探究竟吧。 魔方的抽象 拆解过魔方的同学可能知道,现实中魔方的内部结构包含了中轴、弹簧、螺丝等机械装置。但当我们只是想要「模拟」它的时
  2. 可能比文档还详细–VueRouter完全指北 前言 关于标题,应该算不上是标题党,因为内容真的很多很长很全面.主要是在官网的基础上又详细总结,举例了很多东西.确保所有新人都能理解!所以实际上很多东西是比官网还详细的.你想要的,在官网上没理解的,基本在这里都能找到解答!本来想分成两篇发的,但想想男人长点也没
  3. vue过滤器(八) // 第一个参数表示:过滤器的名称 // 第二个参数表示:函数,使用过滤器的时候,这个函数中的代码会被执行 Vue.filter(‘filterName’, function (value) { // value 表示要过滤的内容 }) 例子 Vue.filter(‘date’, function (input, format = ‘yyyy-MM-dd hh:mm:ss’){ var o = { &q…
  4. React Context API:轻松管理状态 原文链接:React Context API: Managing State with Ease 译者:OFED 使用最新的 React Context API 管理状态非常容易。现在就跟随我一起学习下它和 Redux 的区别以及它是如何使用的吧。 **综述:**React Context API 在 React 生态系统中并不是个新鲜事物。不过,在 React16.3.0版本中做了一…
  5. 每天阅读一个 npm 模块(1)- username 最近工作比较繁忙,每天能用于学习知识的时间越来越少,深感这样不利于自己的技术提升。恰好想起狼叔 所说的 “迷茫时学习 Node.js 最好的方法 – 每天看十个 npm 模块 “,虽然每天没有那么多时间看十个模块,但时间就像海绵一样,挤一挤,每天阅读一个模块还是能做到的。 希望通过这一系列的文章,一方面提醒自己…
  6. 如何使用纯函数式 JavaScript 处理脏副作用 首先,假定你对函数式编程有所涉猎。用不了多久你就能明白 纯函数 的概念。随着深入了解,你会发现函数式程序员似乎对纯函数很着迷。他们说:“纯函数让你推敲代码”,“纯函数不太可能引发一场热核战争”,“纯函数提供了引用透明性”。诸如此类。他们说的并没有错,纯函数是个好东西。但是存在一个问题…… 纯函数是没…
  7. 如何机智的弄坏一台电脑?来自一名前端工程师的报复.. 很多人都在说: “技术领域当中,前端最没有技术含量,且容易被替代。” 有人说,前端的能力界限顶多就在浏览器那儿,无论你触发了多少bug,最多导致浏览器崩溃,连电脑系统都影响不了。 就像二次元各种炫酷的毁灭世界,都不会导致三次元的世界末日。 这我就不能忍了。作为一个前端,我发现还是有方式突破次元壁、打…
  8. Vue.js的响应式系统原理 Vue.js是一款MVVM框架,核心思想是数据驱动视图,数据模型仅仅是普通的 JavaScript 对象。而当修改它们时,视图会进行更新。实现这些的核心就是“ 响应式系统 ”。 我们在开发过程中可能会存在这样的疑问: Vue.js把哪些对象变成了响应式对象? Vue.js究竟是如何响应式修改数据的? 上面这幅图的下半部…
  9. 前端知识集锦2① 使用set去重:set是ES6中提供的数据结构,不同于数组,所有的值都是不重复的,Set内部使用===来判断是否相等,类似’1’和1会两个都保存,NaN和NaN只会保存一个
  10. vue 表单控件与绑定(七) <div id="app-1"> <p><input v-model="textBox" placeholder="输入内容…">输入的内容:{{ textBox }}</p> </div> <script type="text/javascript"> var vm1 = new Vue({ el: ‘#app-1’, data: { tex…
  11. #前端开发那些事#【从 PostCSS 插件,体验编码到发布全过程】详见: 因项目的需求,自己动手写了一个 PostCSS 插件 postcss-px2vw,并介绍到七牛云图片的使用与上传相关的技巧,以及期间遇到的一些问题。(作者:红顏漠) ​​​
  12. 可能是除文档外最详细的说明–VueRouter完全指北 关于标题,应该算不上是标题党,因为内容真的很多很长很全面.本来想分成两篇发的,但想想男人长点也没什么不好的.所以也希望各位收藏插眼标记(滑稽) 特点:本文主要是参考了官方文档.除了不常用的过渡动效和数据获取,都进行了分析说明.说明:每一节都在文档的基础上进行了更通俗的解释;例子:每一节都添加了单独的例子进行详…
  13. Vue 页面掉东西组件 之前项目还用 jQuery 的时候,要在页面上做一个飘东西效果,类似下雪那样。当时使用的是一个开源组件 jquery.let_it_snow。 当时这个组件只支持掉单张图片,产品要求掉各种东西,于是我 fork 了一下,添加了多图片支持,还好原组件的代码比较容
  14. Vue 实现展开折叠效果效果参见:https://segmentfault.com/q/1010000011359250/a-1020000011360185
  15. 银行项目从 SVN 迁移到 Git 一、迁移流程 本人目前做某银行互联网支付平台项目。 自入职加入这个项目开始就一直使用svn进行代码版本控制,开发,测试,生产共用一个仓库,仅一个分支。 一开始有需求就在base版本进行改动,修改完成直接提交,或者在测试环境替换class文件。 修改生产问题,也是相当的小心,担心出现问题,由于新旧代码可…
  16. 前端每日实战:119# 视频演示如何用纯 CSS 创作一个接扎啤的动画(内含2个视频)效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 [链接] 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 第 1 部…
  17. 《Web 推送通知》系列翻译 | 引言&概览 引言 参与者(排名不分先后):任家乐、杨芯芯、刘文涛、张卓、刘鹏。 PWA 技术的流行,给了前端许多新的能力。以前很多前端做不到的事情,现在逐渐可以做到了。本系列文章讲述的的 Web 推送通知就是前端开发者最希望获得的能力之一。 通过推送通知,即使用户的浏
  18. (…)这三个点在JavaScript中意味着什么?这篇文章的标题来自我在Quora上被要求回答的一个问题。下面是我试图解释JavaScript中三个点的作用。希望这对于将来有相同问题的人来说可以消除围绕这个概念的迷雾。
  19. Vue.js源码角度:剖析模版和数据渲染成最终的DOM的过程 写在前面 因为最近做的项目采取的技术栈是vue.js,加上自己对vue.js的底层运行机制很感兴趣,所以最近每天花点时间,大概一两个月左右把vue.js源码捋了一遍,在这里针对模版和数据渲染成最终的DOM的过程这一部分做一下总结。 在看源码的过程当中,可能当中
  20. [边学边练]用简单实例学习React每一个的地方,每一种的知识,每一种事物,都是从陌生到熟悉。在这个过程里面,或许能开阔眼界,增长见识,体验乐趣。一切都归于我们的心态与行动。
  21. CSS 样式防御 概念 / 起因 什么是样式防御? 顾名思义,就是保护你写的样式最后是你想展现的样子。一般样式被破坏多发生于第三方应用编程中,当编写的组件被应用于第三方网站中,组件的样式经常会被网站本身的样式影响而破坏了它本来想展现的样子。 为什么会研究这个东西呢?因为有一天,
  22. 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/…) 项目地址
  23. (Ajax)axios源码简析(一)——axios入口文件axios是时下最流行的http请求库,可以用于浏览器环境与nodejs环境。目前axios的最近版本是0.18.0,本文所分析的源码也是该版本。
  24. 基于react的录音及音频曲线绘制的组件开发 ##简介 演示地址 最近由于工作需要,需要在react上用到一个录音的功能,录音主要包含开始录音,暂停录音,停止录音,并将频谱通过canvas绘制出来。起初开发时找了一个现成的包,但是这个第三方的包不支持暂停功能,也不支持音频转码,只能输出audio/web
  25. JavaScript运算出现很多小数导致运算不精确的问题,用toFixed解决 最近碰到一是微信充值的BUG,充值19.99变成充值19.98,导致金额前后,不 一致,仔细研究发现,JS某些小数运算会出现类似无限循环的小数 var fee = 19.99 var all = fee * 100 console.log(all) > 1998.9999999999998 微信只认整数,应该传 1999,结果变成 1998.9999999999998 变成最后充值 19.9…
  26. React专题:可变状态 本文是『horseshoe·React专题』系列文章之一,后续会有更多专题推出 来我的 GitHub repo 阅读完整的专题文章 来我的 个人博客 获得无与伦比的阅读体验 React使用一个特殊的对象this.state来管理组件内部的状态。 然后开发者就
  27. package.json 中的 Module 字段是干嘛的 引入 最近团队的一个同学在搞 npm library 源码的调试插件,因为内部的一个组件库含有大量的逻辑,在某个项目中不经意就出现一个磨人的 bug,但是组件库发布都是打包编译后的代码,而且没有 publish src 代码,不方便调试,每次还要 do
  28. TypeScript在react项目中的实践前段时间有写过一个TypeScript在node项目中的实践。 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的。 但是那仅仅是一个纯接口项目,碰巧赶上近期的另一个项目重构也由我来主持,经过上次的…
  29. 来来来,探究一下CommonJs的实现原理 其实刚看到这个题目的时候,我的内心是拒绝的,但是本着对科学的敬畏精神,我开始了 CommonJs 的探索之路。 来来来奉上我这几天的心血,拿走不客气。如有错误欢迎指正,共同进步。 提到CommonJs 绕不开的就是模块化。 模块化 模块化是指将一个复杂的系统
  30. Dweb: Beaker–去中心化的浏览器 (中英) 原文:Dweb: Serving the Web from the Browser with Beaker 作者:Tara Vancil 发表时间:August 22, 2018 译者:西楼听雨 发表时间: 2018/8/25 原文是 Mozilla 开发者
  31. [NG] 考古 – HttpInterceptor 循环引用错误 原文首发于 baishusama.github.io,欢迎围观~ 前言 恍然间发现这个错误已经不复存在了,于是稍微看了下相关 issue、commit、PR。写篇笔记祭奠下~ 需求描述 一个使用 HttpInterceptor 的常见场景是实现基于 toke
  32. 你的 JavaScript 依赖库可能并不安全 作者|Manjunath M 译者|无明 现代的 JavaScript 开发人员都喜欢 npm。GitHub 和 npm registry 是开发人员在查找特定软件包时常去的地方。开源模块为开发人员提供了很多可在项目中重用的功能,帮助他们提高工作效率。可以说,如果不是这些开源软件包,今天的大多数框架都不会以当前的形式存在。 …
  33. nodejs中的子进程,深入解析child_process模块和cluster模块  node遵循的是单线程单进程的模式,node的单线程是指js的引擎只有一个实例,且在nodejs的主线程中执行,同时node以事件驱动的方式处理IO等异步操作。node的单线程模式,只维持一个主线程,大大减少了线程间切换…

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

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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流