20171119 前端开发周报

使用 JavaScript 实现分屏视觉效果;实例感受-es6的常用语法和优越性;CSS居中的各种实现方式;所有主流浏览器都已支持 WebAssembly,包括 Edge 和 Safari;前端跨域有哪些种方法及介绍?;移动端逆袭iPad 的 JavaScript 性能已超越 rMBP;10个JavaScript常见BUG及修复方法

  1. 使用 JavaScript 实现分屏视觉效果 上篇文章10个独特的CSS背景视觉效果中有提到分屏的视觉效果,今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website。 HT
  2. 实例感受-es6的常用语法和优越性 1.前言前几天,用es6的语法重写了我的一个代码库,说是重写,其实改动的并不多,工作量不大。在重写完了的时候,就个人总结了一下es6常用的一些常用的语法和比es5优越的方面。下面提到的语法可能也就是es6新特性的10%-20%,但是开发上占了80%左右的。下面
  3. CSS居中的各种实现方式 CSS中如何完美做到居中,一直是令前端工程师头疼的问题。最近读到CSS-TRICKS中的一篇帖子,将居中问题的解决方案策略化。感觉收获很大,翻译过来供大家交流学习。当我们书写CSS时,让元素居中,是抱怨的爆发点之一:为什么会这么难?我认为问题的关键,不在于怎么
  4. 所有主流浏览器都已支持 WebAssembly,包括 Edge 和 Safari While Mozilla has been preparing to launch Firefox Quantum, its fastest browser yet, some notable developments have happened with
  5. 前端跨域有哪些种方法及介绍? 1.同源策略如下: URL 说明 是否允许通信 www.a.com/a.js www.a.com/b.js 同一域名下 允许 www.a.com/lab/a.js www.a.com/script/b.js 同一域名下不同文件夹 允许
  6. 移动端逆袭iPad 的 JavaScript 性能已超越 rMBP 说到移动端,很多同学的印象可能还停留在【兼容费劲、费性能动画、不好调试】的阶段。但苹果每年发布会的【迄今最强】难道都是在挤牙膏吗?笔者做了个前端领域内的性能对比评测,结果非常有趣。 思路在前端范畴内,对【性能】的追求一般出现在资源加载速度、减少重复渲染等层面,
  7. 10个JavaScript常见BUG及修复方法 译者按: JavaScript语言设计太灵活,用起来不免要多加小心掉进坑里面。 原文: Top 10 bugs and their bug fixing 译者: Fundebug 为了保证可读性,本
  8. 不吹不黑聊聊前端框架:尤雨溪 Live 整理 最近买了尤雨溪大大的Live:不吹不黑聊聊前端框架,这场Live让我的前端思维到了前所未有的高度:当我们身为前端开发萌新,在前端人才金字塔的浮动与挣扎中思考该学什么框架、该如何入门前端、又遇到学习瓶颈怎么办的时候,正是这些业界大牛们用自己的行动引导着我们,有如尤大所说:多思考场景需求,多看看技术到底做了…
  9. 前端路由的前生今世及实现原理 原文发于我的博客:https://github.com/hwen/blogS… 什么是路由 路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样 {代码…} 有时还会有带.asp或.html的路径,这就是所谓的SSR(Se…
  10. 打造自己的JavaScript武器库自己打造一把趁手的武器,高效率完成前端业务代码。 前言 作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化、url参数转对象、浏…
  11. 使用 CSS overscroll-behavior 控制滚动行为:自定义下拉刷新和溢出效果dev-reading/fe 是一个阅读、导读、速读的 repo,不要依赖于 dev-reading/fe 学习知识。本 repo 只是一个快速了解文章内容的工具,并不提供全文解读和翻译。你可以通过本平台快速了解文章里面的内容,找到感兴趣…
  12. 53合1:Node.js 最佳实践大合集 Follow us on Twitter! @nodepractices Welcome! 3 Things You Ought To Know First: 1. When you read here,
  13. Vue2.0开发风格指南 本文是对Vue官方风格指南的注解,过滤了极少数我认为重要性很低的项目,并将其余项按照作用相关性重新归类,便于读者针对性的选择某一方面进行参考。 框架或规范约束 组件名推荐统一使用kebab-case(连字符式),因为HTML对
  14. Git的4个阶段的撤销更改虽然git诞生距今已有12年之久,网上各种关于git的介绍文章数不胜数,但是依然有很多人(包括我自己在内)对于它的功能不能完全掌握。以下的介绍只是基于我个人对于git的理解,并且可能生编硬造了一些不完全符合gi…
  15. vue router 如何使用params query传参,以及有什么区别 写在前面:传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个人blo 写在前面:传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个人blo 写在前面:传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文首发于我的个人blo
  16. 用webpack搭建多页面项目 最基本的单入口配置 之前使用webpack1.x的可以读读这篇文章《webpack升级指南和特性摘要》 module.exports={ entry:’./src/index.js’ output:{ path:__dirname+’/bu
  17. Chrome 扩展开发:定制 HTTP 请求响应头域 本文首发于《程序员》杂志2017年第9、10、11期,下面的版本又经过进一步的修订。 导读 搜索是程序员的灵魂,为了提升搜索的效率,以便更快的查询信息,我试着同时搜索4个网站,分别是百度、Google、维基、Bing。一个可行的做法就是网页中嵌入4个iframe,通过js拼接前面4个搜索引擎的Search URL并依次在if…
  18. JS常用的18种设计模式总结 花了一个多月,终于把js中常用的设计模式整理了一遍。其中主要参阅了曾探的《JavaScript设计模式与开发实践》,讲真这本书写的真的很不错。还参考了wiki、博客、掘金、CSDN等的文章,在此表示感谢,如有理解不当,还望指正。 设计模式 设计 花了一个多月,终于把js中常用的设计模式整理了一遍。其中主要参阅了曾探的《JavaScript设计模式与开发实践》,讲真这本书写的真的很不错。还参考了wiki、博客、掘金、CSDN等的文章,在此表示感谢,如有理解不当,还望指正。 设计模式 设计 花了一个多月,终于把js中常用的设计模式整理了一遍。其中主要参阅了曾探的《JavaScript设计模式与开发实践》,讲真这本书写的真的很不错。还参考了wiki、博客、掘金、CSDN等的文章,在此表示感谢,如有理解不当,还望指正。 设计模式 设计
  19. “好” 维护的 NodeJS 应用 得益于前端社区的活跃,近年来 NodeJS 应用的场景越来越丰富,JS 慢慢变得这也能做,那也能做,笔者也在这波潮流中,上了 NodeJS 全栈应用的这波车,也曾做出过日均访问千万级的 NodeJS 应用,本文将大概总结一下其中的一些「知识点」: 分层设计 可测试性设计 进程管理(少量谈及…
  20. 用vue做一个酷炫的menu 写在前面         最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱。开个小玩耍,我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的vue
  21. Web静态资源缓存及优化 前言对于页面中静态资源(html/js/css/img/webfont),理想中的效果:页面以最快的速度获取到所有必须静态资源,渲染飞快;服务器上静态资源未更新时再次访问不请求服务器;服务器上静态资源更新时请求服务器最新资源,加载又飞快。总结下来也就是2个指标 前言对于页面中静态资源(html/js/css/img/webfont),理想中的效果:页面以最快的速度获取到所有必须静态资源,渲染飞快;服务器上静态资源未更新时再次访问不请求服务器;服务器上静态资源更新时请求服务器最新资源,加载又飞快。总结下来也就是2个指标 前言对于页面中静态资源(html/js/css/img/webfont),理想中的效果:页面以最快的速度获取到所有必须静态资源,渲染飞快;服务器上静态资源未更新时再次访问不请求服务器;服务器上静态资源更新时请求服务器最新资源,加载又飞快。总结下来也就是2个指标
  22. Web 安全系列:XSS 攻击 前段时间在学习Web安全方面的知识,对这方面有了进一步的了解,决定写文章记录下来,只是对Web安全方面知识的一些总结,没有太多的深度。 XSS攻击简介 跨站脚本攻击(XSS),英文全称 Cross Site Script, 是Web安全头号大敌。 XSS攻击,一般是指黑客通过在网页中注入恶意脚本,当用户浏览网页时,恶…
  23. jQuery核心解读 jQuery如此强大和好用,关键得益于以下特性: 丰富强大的语法(CSS选择器),用来查询文档元素 高效的查询方法,用来找到与CSS选择器匹配的文档元素集 一套有用
  24. CSS 实用 Tips 作为前端,日常开发充满了各种挑战与乐趣,我们穷尽一切在奇葩的需求中提升用户体验。本文将列举一些前端开发中碰到的小众需求,并提供解决方案以供参考。 一、修改鼠标手势图标 很多童鞋可能都用过: cursor: pointer | wait | hand | text | move | not-allowed; 但是,它还支持…
  25. [英] GitLab 使用 Vue 一年的经验总结 It’s been a while since we wrote about Vue. We’ve been using Vue for over a year now and life has been very good. Thanks @lnoogn f It’s been a while since we wrote about Vue. We’ve been using Vue for over a year now and life has been very good. Thanks @lnoogn f It’s been a while since we wrote about Vue. We’ve been using Vue for over a year now and life has been very good. Thanks @lnoogn f
  26. js 实现多重罗盘转动 引子 这几天一直在忙一个可滑动的转盘的demo,网上也有类似的例子,但是根据老板的需求来改他们的代码,还不如重新写个完全符合需求的插件。想法很美好,但是新手上路… 效果链接文末 需求image 这个demo给的非常简单,能转动的地方有三处,内盘、外盘和指
  27. 500行代码实现迷你版vuejs,麻雀虽小,五脏俱全 What is this? 中文版文档 There is several detailed articles show how to write tiny-vue (in Chinese) Write tiny-vue in 8
  28. JS中图片压缩的一般方法 前两天公司业务上有需求需要将较大的图片压缩后再传到远程服务器,网上找了不少方法都不太好用,今天有空索性自己写了一个方法,并把它放到了自己的github上,有兴趣的同学可以戳这里一、需求是什么?首先想一想我们有哪些需求?大多时候我们需要将一个File对象压缩之后 前两天公司业务上有需求需要将较大的图片压缩后再传到远程服务器,网上找了不少方法都不太好用,今天有空索性自己写了一个方法,并把它放到了自己的github上,有兴趣的同学可以戳这里一、需求是什么?首先想一想我们有哪些需求?大多时候我们需要将一个File对象压缩之后
  29. 客栈说书:CSS遮罩CSS3 mask/masks详细介绍 客栈说书:CSS遮罩CSS3 mask/masks详细介绍 这篇文章发布于 2017年11月6日,星期一,22:32,归类于 css相关。 阅读 380 次, 今日 130 次

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

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


关注我

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

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

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