20180210 前端开发日报

10个超赞的jQuery图片滑块动画|精问推荐;现代CSS进化史;JS中的async/await — 异步隧道尽头的亮光;你不知道的Vuejs – 单文件组件;开发完第一版前端性能监控系统后的总结(无代码);前端实现在线预览pdf、word、xls、ppt等文件;尝试自己动手用react来写一个分页组件;VUE + UEditor 单图片跨域上传

  1. 10个超赞的jQuery图片滑块动画|精问推荐 【公众号回复“ 1024 ”,送你一个特别推送】 在前端开发过程中,图片特效都十分绚丽,比如抢红包特效,时间轴等,接下来分享10款效果惊艳的HTML5图片特效分享给大家。 正文 1、HTML5 3D正方体旋转动画 很酷的3D特效 之前我们分享过很多非常不错的HTML5 3D立体动画特效,尤其是一些HTML5 Canvas动画,更是…
  2. 现代CSS进化史英文:https://medium.com/actualize-…编译:缪斯 CSS一直被web开发者认为是最简单也是最难的一门奇葩语言。它的入门确实非常简单——你只需为元素定义好样式属性和值,看起来似乎需要做的工作也就这样嘛!然而在…
  3. JS中的async/await — 异步隧道尽头的亮光 JS中的异步操作从最初的回调函数演进到Promise,再到Generator,都是逐步的改进,而async函数的出现仿佛看到了异步方案的终点,用同步的方式写异步。 async函数 简单解释async函数就是Generator函
  4. 你不知道的Vuejs – 单文件组件 在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非常明显了: 字符串模板:缺乏高亮,书写麻烦,特别是 HTML 多行的时候,虽然可以将模板写在 html 文件中,但是侵入性太强,不利于组件解耦分…
  5. 开发完第一版前端性能监控系统后的总结(无代码) (无论何时我都是一个实践派) 说起前端性能监控系统,绝大部分人应该不陌生,也许你正在使用,又或者你只是听说过。总之它就是这样频繁的出现在我们的工作之中。 那么做一个前端性能监控系统,我们应该统计一些什么维度的信息呢?那些数据真正对于我们有用呢?它适用的场景又有哪些呢?有很多的问题需要回答,再做…
  6. 前端实现在线预览pdf、word、xls、ppt等文件 方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <a href="文档地址"></a> 方式二、通过jquery插件 jquery.media.js 实现 这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word…
  7. 尝试自己动手用react来写一个分页组件 分页效果 在线预览 github地址 效果截图(样式可自行修改): 构建项目 create-react-app react-paging-component 分页组件 1.子组件 创建 Pagecomponent.js 文件 核心代码: 初始化值 cons
  8. VUE + UEditor 单图片跨域上传 UEditor官网说不提供单图片的跨域,所以只能自己解决。查了网上的很多方案,但是没看到和vue一起用的,不过倒是获得了一些思路。本着不想改太多源代码的基础上尝试着…一不小心就可以用了 解决方案:上传单图片的时后端不直接返回JSON,而是重定向到前端页面 前端:VUE 后端:WAMP + ThinkPHP5.0 前端 http://l…
  9. 关于前端数据&逻辑的思考 最近重构了一个项目,一个基于redux模型的react-native项目,目标是在混乱的代码中梳理出一个清晰的结构来,为了实现这个目标,首先需要对项目的结构做分层处理,将各个逻辑分离出来,这里我是基于典型的MVC模型,那么为了将现有代码重构为理想的模型,我需要
  10. Webpack最简单的方式Mock APIwebpack-api-mocker 是一个为 REST API 创建 mock 的 webpack-dev-server 中间件。 当您尝试在没有实际的 REST API 服务器的情况下,测试您的应用程序时,这将会很有帮助。 安装 {代码…} 使用 定义API,假设我…
  11. 趣味js-只用1和特殊字符生成字符串 前言 今天逛 justjavac 老哥的博客( http://justjavac.com/about.html )看到了类似下面的代码 (+( ) +( ) +(( +{}) + ,[]+{}+…
  12. 你听过 React Fragments吗?React 中常见模式是为一个组件返回多个元素。为了包裹多个元素你肯定写过很多的 div 和 span,进行不必要的嵌套,无形中增加了浏览器的渲染压力。 版本15 15以前,render 函数的返回必须有一个根节点,否则报错,…
  13. TC39 敲定 ECMAScript 2018 特性集 1月23日至25日的TC39会议敲定了ES2018的特性集。ES2018是对ECMAScript语言规范的最新修订。这次更新中新添加的特性包括异步迭代器、用于对象解构(Object Destructuring)和对象字面量(Object Literal)的re
  14. 写给前端看的 iOS 梳理 (上) 本文来自 Tw93 前端专栏,欢迎交流 序 去年双十一为了排查一些 Weex 性能问题开始接触 iOS 相关学习,恰逢今年 1 月份开始慢慢参与 iOS 业务开发,借此机会整理一下 iOS 开发中的一些基础知识,用于备忘,同时旨在通过系列文章让
  15. CSS设置居中的方案总结-超全 前几天面试一家公司,被问到垂直居中的方法,我只答出了margin、table-cell、flex三种。回来之后觉得特别惭愧,于是整理了一下居中的方案做个记录,希望对大家也有帮助。 如果哪里写的不对,欢迎指正,非常感谢。 块级元素居中 html代码部分 &lt
  16. CORS ajax跨域请求php简单完整案例一则 这篇文章发布于 2018年02月9日,星期五,00:29,归类于js实例。 阅读 13 次, 今日 13 次 byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=7374 本文可随便转载,但需要保留原作者和出处。 一、CORS: Cross-Origin Resource Sharing CORS是Cross-Origin Resource Sharing的缩写,表示跨域的资源分…
  17. 探索 ECMAScript 装饰器 原文地址:Exploring EcmaScript Decorators 原文作者:Addy Osmani 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:缪宇 校对者:ZhiyuanSun ryouaki 探索
  18. [ Laravel 5.5 文档 ] 前端组件 —— 快速入门:JavaScript & CSS 脚手架 简介 Laravel 并不强制你使用什么JavaScript 框架或者CSS 预处理器,不过也确实提供了对很多应用都很有用的 Bootstrap 和 Vue 的一些基本脚手架。默认情况下,Laravel 使用 NPM 来安装这些前端包。 CSS Laravel Mix 提供了清爽优雅的 API 用于编译 SASS 或 Less,SASS 和 Less 都是在原生 CSS 的基础上新增了变…
  19. 介绍 Node.js 未来两处很不错的新特性 一、Promise 化的 fs API 就在几天前 Node.js 主干合入了一个巨大的 PR:fs: add promises API by jasnell · Pull Request #18297 · nodejs/nodegithub.com
  20. 在 Firefox 58 中,WebAssembly 组件性能提升了10倍 Mozilla在Firefox 58中为WebAssembly(WASM)组件推出了一套双层编译系统,号称解析和编译WASM代码的速度达到30-60MB/s,足够在有线网络中实现实时编译。基准测试表明,新版的性能比旧版提高了10倍,比Chrome快10倍以上。
  21. 谈谈 react 中的 key 前言 如果你用过 react,并且曾经尝试遍历数组来渲染一个组件,就应该遇到过上面的提示。因为提示的等级为 Warning,而非 Error,所以很多开发同学可能就不会去在意,包括我自己。在前几天开发一个需要动态渲染的组件时,才发现的了 key 的妙用,也因
  22. 基于 React + Webpack 的音乐相册项目(上) 1、安装 npm,安装成功后,在终端输入 npm -v 可以查看它的版本。 2、安装 generator-react-webpack ,使用如下命令: npm install -g generator-react-webpack 安装完成之后,输入 npm list –depth=0 -global 可以查看版本。 3、创建项目,打开你用来存放代码的目录,然后输入: yo…
  23. Nuxt.js: A Universal Vue.js Application Framework Universal (or Isomorphic) JavaScript is a term that has become very common in the JavaScript community. It is used to describe Jav
  24. Vue让我喜欢的10个方面 原文链接:10 things I love about Vue 原文作者:Duncan Grant 译者注:这篇文章写的比较浅显,只是作者从自身尝试使用Vue后的一些看法,所以不用期待这篇文章的深度,但也不失为刚开始使用Vue的用户提供多一些见解。 我喜欢V
  25. 浅谈script标签的defer和async 1. 什么鬼 今天在做一个小需的时候,忽然看到前辈一句吊炸天的代码 &lt;script src="#link("xxxx/xx/home/home.js")" type="text/javascript" async defer&gt;&lt;/sc
  26. 利用Node Github Profile Summary来生成你的Github简历吧 前言 之前看过国外一个开发者tipsy用kotlin开发了一个github profile summary,我觉得他的想法非常棒,所以我想着用Node的技术栈来实现一遍。 我的技术栈是Vue和Koa,所以在实现上我就用了它们分别来做前端和后台。 先放张效果图:
  27. The Cost Of JavaScript The Cost Of JavaScript As we build sites more heavily reliant on JavaScript, we sometimes pay for what we send down in ways th

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

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


关注我

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

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

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