20180514前端开发周报

浅谈前端/软件工程师的代码素养;苏宁 Nodejs 性能优化实战;滑向未来:现代 JavaScriptCSS 滚动实现指南;前端应该了解的PWA;CSS Grid VS Flexbox:实例比较;前端 touch 事件知多少;Vue实现2048;LeetCode 算法题刷题心得(JavaScript)

  1. 浅谈前端/软件工程师的代码素养 本文提到的 6 个代码编写的原则,前三个偏向于代码维护性,后三个偏向于代码可读性,整个可维护性和可读性构成了代码的基本素养。
  2. 苏宁 Nodejs 性能优化实战 作者|李浩 编辑|覃云 Nodejs 项目背景介绍 自 2016 年以来,苏宁大规模的使用了基于 Nodejs 渲染的项目,架构使用 Nginx+Nodejs+PM2 组合,其中 Nodejs 版本从最初的 6.0+ 升级到如今的 8.0+,Nodejs 框架从 Express 过度到 Koa2,而 Nodejs 的性能优化作为其中的核心,苏宁在其性能提升...
  3. 滑向未来:现代 JavaScript 与 CSS 滚动实现指南 为你介绍最新的 JavaScript 与 CSS 特性,让你的页面滚动更平滑、美观,性能更好。
  4. 前端应该了解的PWA 一、传统web 应用 当前web应用在移动时代并没有达到其在桌面设备上流行的程度,下面有张图来对比与原生应用之间的差别。 究其原因,无外乎下面不可避免的几点: 移动设备网络限制-不可忽略的加载时间 web应用依赖于浏览器作为入口 体验与原生的差距 假如能
  5. CSS Grid VS Flexbox:实例比较 不久以前,所有 HTML 页面的布局还都是通过 tables、floats 以及其他的 CSS 属性来完成的。面对复杂页面的布局,却没有很好的办法。 然而 Flexbox 的出现,便轻松的解决了复杂的 Web 布局。它是一种专注于创建稳定的响应式页面的
  6. 前端 touch 事件知多少 此篇文章主要介绍touch类的事件, 也会顺带介绍下mouse类的, 因为比较类似 分类 touch类和mouse类的时间主要有 touch 事件 touch事件初体验: http://demo.404mzk.com/event/base/window_all_type.html touchstart: 手指触摸屏幕时触发 touchmove: 手指滑动屏幕时触发...
  7. vue实现2048 用vue-cli搭建项目,对这个项目可能有点笨重,但是也懒的再搭一个 4X4的方格用一个二维数组存放,绑定好后只关心这个二维数组,其他事交给vue 监听键盘事件 2048的核心部分就是移动合并的算法,因为是一个4X4的矩阵,所以只要实现左移的算法,其他方向的移动只需要将矩阵旋转,移动合并,再旋转回来,渲染do...
  8. LeetCode 算法题刷题心得(JavaScript) 花了十几天,把《算法》看了一遍然后重新 AC 了一遍 LeetCode 的题,收获颇丰。这次好好记录下心得。 我把所有做题的代码都放在 github 上以供参考。 项目地址:https://github.com/violetjack/LeetCodeACByJ
  9. IndexedDB 打造靠谱 Web 离线数据库 在知乎和我在平常工作中,常常会看到一个问题: 前端现在还火吗? 这个我只想说: 隔岸观火的人永远无法明白起火的原因,只有置身风暴,才能找到风眼之所在 ——『秦时明月』 你 TM 看都不看前端现在的发展,怎么去评判前端火不火,我该不该尝试一下其他方面的内容呢?本人为啥为这么热衷于新的技术呢?主要原因...
  10. CSS animation和transition的性能探究 CSS animation和transition的性能探究 本篇文章翻译自adobe Web Platform Team的博客:CSS animations and transitions performance: looking inside th
  11. babel原理及插件开发 摘要 如今的前端界已经离不开ES6,然而老旧浏览器并不支持,项目中特别是国内公司又需要兼容低版本的老旧浏览器,多亏了babel这个神奇的工具,可以让我们的ES6代码运行在旧浏览器中。 大部分前端开发人员只是配置一下babel,根据需要装个插件之类,我想肯定少有
  12. http与https的区别我真的知道吗 之前每次看到类似“http与https的区别?”的问题时,都会自己思考一下答案,好像只是浅显地知道https比http安全,但究竟为什么更安全,却又似乎说不出个所以然,或者说很多细节地方自己都是不清楚的。为了搞清楚,也为了系统地了解一下http相关的知识,前段
  13. 新来的开发花了四天时间来制作一个简单的 HTML 和 CSS 按钮,我该解雇他么? 简评:quora 上面的一个提问,我觉得他对编程这事儿是不是有什么误解。 你看到这个按钮了么? 这只是个简答的、普通的,毫无花哨的,没动画,没 JS,没有特殊的触发机制,没有复杂的权限的小按钮。 我花了 8 个小时才做出来,究竟发生了什么? 首先我没有什么想法,我要做啥我根本不知道。然...
  14. 前端学习路线及面试经验 前言 个人主页 原文链接 掘金 知乎&知乎专栏 本人从大二上学期到现在学习前端已将近有3年时间了,最近利用毕业论文写完的一些空余时间写一下这篇文章,用于分享一些个人的前端学习经验,以及一些面试经验,不一定适合每个人,不喜勿喷,同时欢迎大家提出建议。 学
  15. 面试:对javascript的闭包的理解 js的变量作用域有两种,全局变量和局部变量 需要注意的是,函数内部可以直接读取全局变量。 var global = 666; function func() { alert(global); } func(); //666 函数外部无法读取到函数内部的局部变量,因为函数在执行完之后,函数内部的环境就被销毁了。 function func() { var message = 888; } aler...
  16. JavaScript从初级往高级走系列————ES6 现在基本上开发中都在使用ES6,浏览器环境支持不好,可以用babel插件来解决。 采用‘二八定律’,主要涉及ES6常用且重要的部分。 问题: ES6模块化如何使用,开发环境如何打包 Class和普通构造函数有何区别 Promise的基本使用和原理 总结一下ES6其他常用功能 ES6模块化如何使用,开发环境如何打...
  17. 实例:使用puppeteer headless方式抓取JS网页 puppeteer google chrome团队出品的puppeteer 是依赖nodejs和chromium的自动化测试库,它的最大优点就是可以处理网页中的动态内容,如JavaScript,能够更好的模拟用户。 有些网站的反爬虫手段是将部分内容隐藏于某些j
  18. 37个JavaScript基本面试问题和解答 1、使用typeof bar ===“object”来确定bar是否是一个对象时有什么潜在的缺陷?这个陷阱如何避免? 尽管typeof bar ===“object”是检查bar是否是对象的可靠方法,但JavaScript中令人惊讶的问题是null也被
  19. Vue + better-scroll 实现移动端字母索引导航 vue+ better-scroll 实现移动端歌手列表字母索引导航。算是一个学习笔记吧,写个笔记让自己了解的更加深入一点。 Demo:list-view,使用 chrome 手机模式查看。换成手机模式之后,不能滑动的话,刷新一下就 OK 了。 Github: 移动端字母索引导航 效果图 配置环境 因为用到的是 vue-cli 和 bet...
  20. Sublime Text 3.1 发布 Since version 3.0 we've been shipping frequent dev builds, refining Sublime Text for a more polished experience all-around. Those
  21. 用小猪佩奇说明Javascript的原型和原型链 没错,我就是标题党!你已经成功被我骗进来了。来都来了,那就聊聊再走呗!接下来就听我一本正经地跟你说道说道。 Javascript的原型是这门语言的一个重点和难点。看过很多大佬写的解释Javascript原型的文章,但是很多对于初学者其实不是很友好,看完之后还是云里雾里。我虽然不敢说能把这个东西解释的很清楚,但是作...
  22. CSS module 入门 前端发展越来越快,这应该是每个前端开发者的切身感受,但是CSS 是前端领域中进化最慢的一块。ES678快速普及前端工程发愈发成熟,CSS 被被远远甩在了后面,JS语言模块已经标准化,CSS还是在不断探索,同时这也是一个急需解决的问题。 要是你以前还从未听说过C
  23. 推荐2个前端工具:Charles和Postman 5.1假期第二天,依然窝在家里,不过今天来客了,我的好朋友「晓哥」来看小宝,中午喝了点,各自「吹嘘」了一阵,聊聊各自职业的发展,工作中遇到的问题,以及对未来的规划。 他现在发展的特别好,在一家近千人开发的公司,主管北京地区的业务,包括需求洽谈、研发、项目推进和验收等,公司业务是为多家银行做app端,和...
  24. 当HTML5遇上区块链技术,游戏行业将迎来怎样的变革? 文 | 萌萌 韦小婉 引言 从2018年伊始,借着A股市场的东风,区块链便成为炙手可热的话题。然而面对近期持续跌停的概念股,给不少准备进军区块链市场的追随者们一盆冷水。 区块链为何如此火爆?究竟是新机遇还是新泡沫?局内人是怎么看的? 为此,区块链探长邀请了数位业内人士,讲述他们在这个行业里“搏击”的故事...
  25. 从HTML5 WebSocket到Socket.io HTML5 WebSocket 作为新一代的web标准,HTML5为我们提供了很多有用的东西,比如Canvas,本地存储(已经分离出去了),多媒体编程接口,当然还有我们的WebSocket。WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工
  26. Immutable 操作在 React 中的实践 作者简介 Amy 蚂蚁金服·数据体验技术团队 最近在需求开发的过程中,踩了很多因为更新引用数据但是页面不重新渲染的坑,所以对这块的内容总结了一下。 在谈及 Immutable 数据之前,我们先来聊聊 React 组件是怎么渲染更新的。 React 组件的更新方式 state 的直接改变 R...
  27. 作为一名初级前端开发工程师的一些感悟 从大三接触前端工作到现在已有3年时间,因为本人本科专业是GIS(地理信息科学,2017届本科),唯一和前端相关的就是webgis,专业课程关于前端学的也是一知半解,其实在那个时候大家喊的大多数都是网页开发,学校的课程也都是最基础的网页开发课程,所以学的也不是很
  28. 使用vscode调试编译后的js代码 vscode 是一个非常棒的编辑器,内置功能强大的调试能力。经过简单的设定,就可以对 js 文件进行调试。但有时我们想要调试的内容是经过编译的,当然我们可以直接调试编译后的代码。但经过编译压缩以后的代码,可读性很差,且也可能无法分模块查看了,有什么方法进行编译前的代码调试么?答案当然是肯定的。 vscode 的常...
  29. (VUEjQuery插件)盘点前端群的无脑回答 0.前言 你是不是在前端群见过很多这种前景:这个怎么做?怎么拿到这些数据?怎么更新整个列表? 回答:循环啊!遍历啊!用一个数组保存,遍历!jQuery!vue! 然后有一些稍微高级的:我想快一点的解决方法。我想用性能好一点的方法。 回答:递归啊!开个新的数组保
  30. JavaScript 工作原理之四-事件循环及异步编程的出现和 5 种更好的 async/await 编程方式(译) 原文请查阅这里,略有改动。 本系列持续更新中,Github 地址请查阅 这里 。 这是 JavaScript 工作原理的第四章。 现在,我们将会通过回顾单线程环境下编程的弊端及如何克服这些困难以创建令人惊叹的 JavaScript 交互界面来展开第一篇文章。老规矩,我们将会在本章末尾分享 5 条利用 async/await 编写更简洁代码...
  31. 大佬,JavaScript 柯里化,了解一下? 简介 柯里化从何而来 柯里化, 即 Currying 的音译。 Currying 是编译原理层面实现多参函数的一个技术。 在说JavaScript 中的柯里化前,可以聊一下原始的Currying是什么,又从何而来。 在编码过程中,身为码农的我们本质上所进行的工
  32. 用CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮css3美化单选框 radio 、多选框 checkbox 和 switch开关按钮 发表于 2018年05月5日 by 愚人码头 被浏览 1,584 次 分享到: 小编推荐:掘金是一个高质量的技术社区,从
  33. 你真的完全掌握了promise么? 最近在整理js中异步编程方法时,回顾了一下promise,又发现了一些遗漏的重要知识点,比如promise.resolve()传递不同参数的含义?比如当一个promise依赖另一个promise时事件执行顺序?比如当catch捕获到了错误后,会不会继续执行后面
  34. 网上看到的“12个非常有用的JavaScript技巧” 记录一下,自己以后可能用的到。原文:blog.jscrambler.com/12-extremel…网上看到的。1) 使用!!将变量转换成布尔类型有时,我们需要检查一些变量是否存在,或者它是否具有有效值,从而将它们的值视为true。对于做这样的检查,你可以使
  35. 大三前端doge迟来的春招实习总结(百度offer) 从2月底开始复习各种知识点,3月中旬已经有同学拿到了offer,而我直到今天上午才offer call了,这两个多月真是经历了好多... 因此写一篇文章记录和纪念这段时光...另外会给出一些有印象的面试题,大部分就不写了,因为网上都有,我挑一些没说过的点写 1
  36. JavaScript 纯前端实现图片的上传、下载与复制 这次在写一个画布应用,由于是纯前端的项目(我也希望加入后端啊可是后端在公司里申请机器要走架构评审),所以和普通的上传到服务器不太一样,下载倒是比较常见的函数,复制也是新增研究对象……当然大家懂得,博客第一段通常是用来吐槽的……所以这是一篇吐槽文。 从最简单的开始——下载 下载之所以说是最简单的,是因...
  37. 如何让webpack打包的速度提升50%? 随着前端应用包含的模块数量日益增长,代码打包的耗时也越来越长。公司很多项目打包耗时超过了10秒,对于一般人来说超过10秒的等待是比较难受的,虽然后续增量编辑的速度很快。于是我想结合实际开发环境提升一下首次打包的速度。 1. 实际开发环境 我碰到大多数处于维护状
  38. 大型Angular项目最佳实践 这里说的大型项目,是说一个项目,包含多个app,多个app之间会共享组件。例如我们可能有多个管理系统,分别用于整个平台的运营系统、第三方商户的销售管理系统、库存及发货管理系统等等,这些系统可能有统一的风格样式,有很多service组件都是通用的,例如订单服务,用于从服务器获取订单,在第三方的销售管理系统,和平...
  39. 掌握HTTP的方法 无论前端程序员,还是后端程序员,稍微系统的学习HTTP是非常值得的。实际上,它是日常开发一直在用的,之所以没有怎么太学习也可以工作,现存的各种框架帮了很多的忙。然而,想要快速理解概念,理解安全,使得开发性能高效的程序称为可能,学习HTTP都是必不可少的。
  40. JavaScript操作DOM常用的API 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。 文档对象模型 (DOM) 是对HTML文件的另一种展示,通俗地说,一个HTML 文件,我们可以用编辑器以代码的形式展示它,也可以用浏览器以页面的形式展示它,...
  41. JavaScript 编程精解 中文第三版 十、模块 编写易于删除,而不是易于扩展的代码。 Tef,《Programming is Terrible》 理想的程序拥有清晰的结构。 它的工作方式很容易解释,每个部分都起到明

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

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

原文:20180514前端开发周报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-weekly-20180514.html)