20170523 前端开发日报

基于栈的 HTML 解析器;React学习报告;WebP 已经适合主流使用?美图图像选型评测及优化历程;一、如何将vue初始项目发布到github上;还在找react例子? 记录一下react练习小心得;前端每周清单第 14 期:编写现代 JavaScript 代码、Web 开发者安全自检列表;前端每周清单第 14 期:Vue 现状与展望、编写现代 JavaScript 代码、Web 开发者安全自检列表;2017-05-23 前端日报

  1. 基于栈的 HTML 解析器 点渐渐连成了线 作者:@nixzhu 在前一篇解析器组合子之后,我对它算是入了门。最近同事想写一个HTML到Attributed String的转换器,但用第三方库生成的中间数据结构不能满足要求,因此我提议用解析器组合子来做这一步,我以为一个晚上就能搞定。 结果很明显,没有成功。原因是我实现的的解析器组合子…
  2. React学习报告React原理学习 React出身FaceBook豪门,一出生就带着virtualDOM和diff算法两大颠覆式的被动技能,很快引来高度关注,并且以高效快速著称。经过一段时间的使用,抽出时间来学习其原理,发现并不难,但是想法很创新…
  3. WebP 已经适合主流使用?美图图像选型评测及优化历程 导读:图像的格式及编码是互联网应用非常关键的基础架构问题,同时如何选择合适的图片格式,如何选择合适的压缩算法以及相关参数都是很有挑战性的技术难点。本文作者是美图资深图像处理专家,介绍其评测对比常用格式及常用算法和工具的优缺点,可以作为相关技术选型及优化的重要参考。 背景 近些年…
  4. 一、如何将vue初始项目发布到github上使用vue-cli构建一个新项目发布到github上并浏览 一、vue项目的创建 1、首先第一肯定是要有Node.js及npm这个不多说了2、安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使…
  5. 还在找react例子? 记录一下react练习小心得react+reudx+router+material-ui+es6、7 初学者用来做练习很不错,因为我就是。 看见ShanaMaid写了一个react读书app, 自己借用API练习一下,记录练习过程。https://github.com/fygethub/s… 创建仓库 通过creat…
  6. 前端每周清单第 14 期:编写现代 JavaScript 代码、Web 开发者安全自检列表 前端每周清单第 7 期:Vue现状与展望、编写现代 JavaScript 代码、Web 开发者安全自检列表 为InfoQ中文站特供稿件,首发地址为这里;如需转载,请与InfoQ中文站联系。从属于笔者的 Web 前端入门与工程实践的前端每周清单系列系列;部分文章需要自备梯子。 前端每周清单专注前端领域内容,分为新闻热点、开发教程…
  7. 前端每周清单第 14 期:Vue 现状与展望、编写现代 JavaScript 代码、Web 开发者安全自检列表 Vue 现状与展望、编写现代 JavaScript 代码、Web 开发者安全自检列表 —— 由王下邀月熊分享
  8. HTML5 进阶系列:canvas 动态图表前言 canvas 强大的功能让它成为了 HTML5 中非常重要的部分,至于它是什么,这里就不需要我多作介绍了。而可视化图表,则是 canvas 强大功能的表现之一。 现在已经有了很多成熟的图表插件都是用 canvas 实现的,C…
  9. 高手教你如何将 React 与其它 Web 开发语言高效结合混编使用 React 是一个用 JavaScript 编写的视图库,所以它几乎可以在任何使用 HTML 和 JavaScript 作为其表示层的 Web 应用程序中出现, —— 由igeekbar分享
  10. vue 的双向绑定原理及实现 vue 的双向绑定原理及实现 —— 由__ihhu分享
  11. 如何使用 Vue 2 构建简单的单页应用程序 (第 2 部分) 本教程的第 1 部分中讨论了构建单页应用程序的基础知识,页面链接由 Vue 自动完成。 在本教程中,您将学习如何: 传递路径参数 使用路由保护,设置未经认证的用户可访问路由。 —— 由愚人码头分享
  12. JS DOM Event关于这一篇章有太多对于我来说杂且乱的知识点,单单是分别DOM层级划分我看过的文章就有(0,2,3)的,(0,2)的,由于自己知识掌握还很薄弱所以只能参考别人文章结合自己理解来写,这其中也涉及到一点W3C标准制定…
  13. Workbox – 用来开发 PWA 应用的 JS 库合集 Workbox is a collection of JavaScript libraries for Progressive Web Apps https://workboxjs.org/ —— 由稀土君分享
  14. 基于 Vue、Nodejs、Socket.io 的聊天应用 技术栈:vue+node+socket.io+mongodb —— 由AnAn分享
  15. vuex中的state在组件中如何监听? 前言  不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的。组件在渲染过程中,获取的state状态为空。也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染。
  16. 前端网站分享 前端导航 —— 由thyile分享
  17. 初识weex(前端视角) – 使用vue2.0 推荐一个很赞的地址在线编辑代码 上一节,我们大概讲了一个项目,构建了一个app,过程应该是挺艰辛的,现在我们来看看这张图,以往我们都是用create,还记得吗,今天开始,我们来用init,也就是vue的模式来构建项目,不必要用create其实,大家肯定会有疑
  18. vuet 插件之 route:实现简易版 vue-cnode,实现列表点击详情返回后显示之前的数据 在 Vue 2.x 发布之后,各种 cnode 设置的版本随之而来,但是很多的版本都没有实现从列表点击详情后返回列表能显示原来的数据。下面我就给大家介绍下 Vuet 的 route 插件,他能够轻松的帮你实现这个功能,我们以 cnode 社区的 API 为例,一步步带大家实现这个功能 —— 由狼族小狈分享
  19. Vue 的单元测试探索(二) 对于 .vue 单文件组件的单元测试,一般的方法使用 Karma,配合 Webpack,headless browser,再加上你喜欢的测试框架(mocha、ava、jasmime、node-tap)。这个过程配置繁琐,而且需要 Webpack 把整个项目编译打包,再在 browser 上跑测试,执行过程也很慢。 —— 由XaYvier分享
  20. React Native 应用如何实现 60 帧 / 秒的流畅动画? 由于 React Native 中的 Bridge 的异步特性, JavaScript 代码编写的动画存在着性能问题。像 Animated 这样的现代动画库,采取的是尽量减少调用 React Native Bridge 的手段,来克服这类缺陷。用户交互,则是更进一步的问题,界面需要不停更新以响应用户的输入。我们能用 React Native 的方式来实现 60 FPS 吗? —— 由前…
  21. 终端聊天机器人 (Python,Node.js),前端人员学习后端语言的福音 终端聊天机器人 (Python 版本 + Node.js 版本),前端人员学习后端语言的福音!可通过 npm 和 pip 安装! —— 由Encounter分享
  22. #开源项目#【使用 React 创建 PDF 文件:React-pdf】详见: React-pdf 是一个用于浏览器、移动端以及服务端上创建 PDF 文件的开源 React 渲染工具。[围观] ​​​

    React-pdf
  23. 图解WebGL&Three.js工作原理》我们讲两个东西:1、WebGL背后的工作原理是什么?2、以Three.js为例,讲述框架在背后扮演什么样的角色?(by 万波) ​​​

    图解WebGL&Three.js工作原理
  24. 域名劫持资源重加载方案》在部分用户的网络环境中,页面CDN域名被劫持,导致前端资源无法正常加载,而页面主域名正常,导致页面可以访问,但是功能不正常。 (by 今日头条技术博客 ) ​​​

    域名劫持资源重加载方案
  25. Spring Data + Thymeleaf 3 + Bootstrap 4 实现分页器》分页器或者分页组件在现实中都有广泛着的应用,最近因为需要所以自己写了个分页器,所用到的技术就是 Spring Data、Thymeleaf 3、Bootstrap 4 。(by waylau) ​​​

    Spring Data + Thymeleaf 3 + Bootstrap 4 实现分页器
  26. 2017-05-23 前端日报FEX技术周刊JS与面向对象Vue 的单元测试探索【前端之巅】前端每周清单浅谈2017前端热门技术【英】从零开始用 proxy 实现 MobxJavaScript中的递归、PTC、TCO和STC实现一个属于我们自己的简易MVVM库【MDN】Concurre…
  27. #前端头条#【译:理解并掌握 JavaScript 中 this 的用法】按:本文原文来自 Javascript.isSexy 这个网站。这篇文章和文中提到的另一篇文章解决了我一直以来对 this 和 apply, call, bind 这三个方法的困惑。我看过很多国内相…请戳→ #前端开发博客# ​​​

    理解并掌握 JavaScript 中 this 的用法

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

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


关注我

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

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

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