20170924 前端开发周报-前端开发博客

2017前端面试题及答案总结；两行 JavaScript 代码；JavaScript参数传递的深入理解；新一代Node.js的Web开发框架Koa2；前端工程-从原理到轮子之JS模块化；2017 年 9 月：15 个有趣的 JS 和 CSS 库；Web开发中的<自定义>；HTTP请求中的Form Data与Request Payload的区别

2017前端面试题及答案总结|掘金技术征文 “金三银四，金九银十”，用来形容求职最好的几个月。但是随着行业的饱和，初中级前端er就业形势不容乐观。

行业状态不可控，我们能做的当然只是让自己变得更加具有竞争力。

今年自己也用了几个月的时间来准备笔记面试，巩固基础知识。特此将自己在这个过程总结的题目分享出来，希望对于求职和准备求职的同学有所帮助。
两行 JavaScript 代码最近看到了两行 JavaScript 代码，很受启发。 1. 封装 DOM 属性在 JavaScript 中，我们可以获取HTML元素的属性值，例如 element.id 。但是，因为 for 和 class 是 JavaScript 中的关键字，所以在 JavaScript 中这两个属性名称分别用 htmlFor 和 className 代替，于是在封装的时候需要先对这两个属性进行特殊判断。
JavaScript参数传递的深入理解今天看到《JavaScript高级程序设计》里面关于参数传递的章节时，有点懵。本着“打破砂锅问到底”的精神，看了些别人写的博客和知乎上一些大神的解释，算是对参数传递有了个比较全面的了解。在讲参数传递前，先要理解变量在内存中的存放方式。
新一代Node.js的Web开发框架Koa2 从零开始nodejs系列文章，将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，可以帮助我们迅速建立web站点，比起PHP的开发效率更高，而且学习曲线更低。
前端工程-从原理到轮子之JS模块化目前，一个典型的前端项目技术框架的选型主要包括以下三个方面： JS模块化框架。(Require/Sea/ES6 Module/NEJ) 前端模板框架。(React/Vue/Regular) 状态管理框架。(Flux/Redux) 系列文章将从上面三个方面来介绍相关原理，并且尝试自己造一个简单的轮子。本篇介绍的是 JS模块化。
2017 年 9 月：15 个有趣的 JS 和 CSS 库迎来了金秋 9 月，在这收获的季节，Tutorialzine 又为我们带来了哪些新鲜、有趣的前端资源呢？前端开发者们，一起来看看有木有你需要的前端库。 1. DisplayJS DisplayJS 是一个帮助你渲染 DOM 的简易框架。使用它，你可以更容易地将 JS 变量遍历到特定的 HTML 元素中，类似于 React 或 Vue.js 处理模版的方式…
Web开发中的<自定义> 自定义元素(Custom Elements)是一种更加灵活的HTML特性，可以使用它定义新的HTML元素。目前是chrome和opera所支持的一个特性。借助自定义元素，网络开发者可以创建新的 HTML 标记、扩展现有 HTML 标记，或者扩展其他开发者编写的组件。API 是网络组件的基础。它提供了基于网络标准来使用原生 JS/HTML/CSS 创建可重用组件的方法。其结果是代码更精简且模块化，并且在我们的应用中的可重用性更好。
HTTP请求中的Form Data与Request Payload的区别前端开发中经常会用到AJAX发送异步请求，对于POST类型的请求会附带请求数据。而常用的两种传参方式为：Form Data 和 Request Payload。 GET请求使用get请求时，参数会以key=value的形式拼接在请求的url后面。
Vue.js填坑记前言上一篇文章主要介绍了我们团队的「Vue.js项目模板」的搭建过程，这只是第一步。作为新手，在实际开发过程中，还会遇到各种各样奇怪的问题。本文主要介绍问题的原因以及解决方式。
前端排序算法总结排序算法可能是你学编程第一个学习的算法，还记得冒泡吗？
当然，排序和查找两类算法是面试的热门选项。如果你是一个会写快排的程序猿，面试官在比较你和一个连快排都不会写的人的时候，会优先选择你的。那么，前端需要会排序吗？答案是毋庸置疑的，必须会。现在的前端对计算机基础要求越来越高了，如果连排序这些算法都不会，那么发展前景就有限了。本篇将会总结一下，在前端的一些排序算法。
#前端技术#【前端面试题 V2.0】详见：这是一份集合了多家公司面试题的问答列表，涵盖底层原理、网络知识、性能优化等众多方面的内容，旨在帮助中、高级前端工程师检测知识点掌握情况，了解面试的各种套路。
我从Angular 2转向Vue.js, 也没有选择React 我们曾经不喜欢，现在依然不喜欢的就是Angular 2 默认使用Typescript作为开发语言。我知道Angular 2可以直接使用JavaScript，但是在Angular 2中使用JavaScript几乎等于重写整个项目。我不认为Typescript为开发增加了附加值，甚至更加糟糕了。我发现我们的编码速度反而变慢了。在JavaScript中很简单的事情，比如定义一个对象，如果使用Typescript就会变得复杂。在你决定使用Typescript之前，我强烈建议你读读下面这两篇文章。Typescript并不是每个人的最佳选择。
#开源项目#【纯 JS 实现的懒加载器：Lozad.js】详见： Lozad.js 是一个高性能、可配置的纯 JS 实现的懒加载器。它基于 IntersectionObserver API，没有任何依赖，支持动态懒加载添加元素。
Nodejs流学习系列之一: Readable Stream nodejs网关开发或多或少都会牵扯到流的使用，但每次的使用都是迷迷糊糊、懵懵懂懂，总是踩完坑后才知道怎么使用，所以有必要深入学习一下Nodejs的流。学习是为了实践，因此这篇文章将利用两个很常用的demo来学习理论并实践。本来只打算一篇文章就写完的,后来看官网文档,越看越觉得一篇文章解决不来,于是打算使用3篇文章来阐述清楚nodejs流的原理.
#CSS#【CSS粘住固定底部的5种方法】本文主要介绍一个Footer元素如何紧靠固定底部，使其无论内容多或者少，Footer元素始终紧靠固定在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多…请戳→ #前端开发博客#
Nodejs流学习系列之四: Nodejs流的应用例子前言理论花了三篇文章，也算是基本讲完了Nodejs流的一些基础知识，理论是给实践服务的，我们这篇文章也就没有那么多知识了，通过两个小应用来解决我在实际项目中遇到的两个问题。实际情况当然比这里的demo复杂，这里是我简化过的，所以大家清楚解决思路即可，无须纠结内在的一些细节哈。
#开源项目#【优酷 HTML5 播放器扩展：Youku-HTML5-Player】详见： Youku-HTML5-Player 是一个 Youku HTML5 播放器扩展，帮助你从此告别 Flash 和广告。同时，它具备智能记忆、弹幕、视频下载等功能。
React Native源码分析原理（二）(基于0.48版本)上一篇文章大家如果仔细阅读揣摩对RN有了一个初步的认识了，接下来将基于上一篇文章的这种初步认识然我们详细了解一下RN的启动过程
Vue:渲染、指令和事件如果要我用一句话描述使用 Vue 的经历，我可能会说“它如此合乎常理”或者“它提供给我需要的工具，而且没有妨碍我的工作”。每当学习 Vue 的时候，我都很高兴，因为很有意义，而且很优雅。Vue 相比其它框架的优势有: 简洁，提供更多语义化的 API ，比 React 的表现稍好，不像 Polymer 那样使用 polyfill，相比 Angular 有独立的视图。
JavaScript 与异步编程按照维基百科上的解释：独立于主控制流之外发生的事件就叫做异步。因为 setTimeout 的存在，至少在被 ECMA 标准化的那一刻起，JavaScript 就支持异步编程了。与其他语言的 sleep 不同，setTimeout 是异步的——它不会阻挡当前程序继续往下执行。然而异步编程真正发展壮大，Ajax 的流行功不可没。Ajax 中的 A（Asynchronous）真正点到了异步的概念——这还是 IE5、IE6 的时代。
#canvas#【html2canvas将HTML内容写入Canvas生成图片】html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当前页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 #前端开发博客#
浅谈HTML5 Web Worker Javascript是运行在单线程环境中，也就是说无法同时运行多个脚本。假设用户点击一个按钮，触发了一段用于计算的Javascript代码，那么在这段代码执行完毕之前，页面是无法响应用户操作的。但是，如果将这段代码交给Web Worker去运行的话，那么情况就不一样了：浏览器会在后台启动一个独立的worker线程来专门负责这段代码的运行，因此，页面在这段Javascript代码运行期间依然可以响应用户的其他操作。
#jQuery#【jquery点击滑动到某个位置】点击向下滚动到某个位置，比较常用的一个功能，只需要一个简单的函数就可以滑动到任意你需要的地方，默认点击之后是返回顶部。
ReactDOM 是如何把组件渲染到 DOM 中的？当我们在开发 React 项目中，第一次调用 ReactDOM.render 的时候都发生了什么呢？今天就从源码角度来追踪一下这个问题（主要看流程，而不纠结与细节）。首先我们需要明确两个概念， ReactElement 和 ReactComponent.
JavaScript 在 V8 中的元素种类及性能优化 JavaScript 对象可以具有与它们相关联的任意属性。对象属性的名称可以包含任何字符。JavaScript 引擎可以进行优化的一个有趣的例子是当属性名是纯数字时，一个特例就是数组索引的属性。

在 V8 中，如果属性名是数字（最常见的形式是 Array 构造函数生成的对象）会被特殊处理。尽管在许多情况下，这些数字索引属性的行为与其他属性一样，V8 选择将它们与非数字属性分开存储以进行优化。在引擎内部，V8 甚至给这些属性一个特殊的名称：元素。对象具有映射到值的属性，而数组具有映射到元素的索引。
前端分享之cookie的使用及单点登录 cookie的英文意思是饼干。在计算机术语中指服务端存放在客户端的一段数据。这段数据在客户端每次进行http请求时会自动加在http请求报文中的header上；服务端在响应时，可以对cookie进行设置，并将cookie加入到http响应报文header中。MDN中对cookie的解释为：cookie 是一个请求首部，其中含有先前由服务器通过 Set-Cookie 首部投放并存储到客户端的 HTTP cookies。
cookie一般存放在对应的域名下，各个浏览器对中一个域名下存放的cookie的个数与大小规定不一样。下表是不同浏览器对cookie存放的规定：
使用Node.js了解和测量HTTP花费的时间了解和测量HTTP时间有助于我们发现客户端到服务器或服务器到服务器之间的通信性能瓶颈。本文介绍了HTTP请求中的时间开销，并展示了如何在Node.js中进行测量。
DNS查找：执行DNS查找所花费的时间。 DNS查找将域名解析为IP地址。每个新的域需要一个完整的往返行程来进行DNS查找。当目的地已经是IP地址时，没有DNS查找。
TCP连接：在源主机和目标主机之间建立TCP连接所需的时间。必须在多步握手过程中正确建立连接。 TCP连接由操作系统管理，如果基础TCP连接无法建立，则OS范围的TCP连接超时将会进入我们应用程序中的超时配置。
TLS握手：完成TLS握手的时间。在握手过程中，端点交换认证和密钥以建立或恢复安全会话。没有HTTPS请求的不需要TLS握手。
第一个字节的时间（TTFB）：等待初始响应的时间。此时间除了等待服务器处理请求和传递响应所花费的时间之外，还可以捕获往返服务器的延迟。
内容传输：接收响应数据所花费的时间。响应数据的大小和可用的网络带宽决定其持续时间。
程序员神一样的存在：JavaScript 乱码艺术在小编过去的认知里，程序员是一种神奇的存在。他们可以编译在我们眼里完全乱码的程序，就好比会古老的玛雅语言一样让人崇拜。可就在最近，小编发现，程序员是一种神一样的存在…… 比如，你猜这是啥： (!! ) ]+( ]+ ]+(! ) ]+(! ) ] 颜……颜文字? 这是JavaScript语言，如果请…
Web 前端工作流客户端，打造最舒适的开发环境简单、快捷、高效、开箱即用的前端工作流客户端，无需各种配置系统环境。开发者无需再配置各种版本混乱的 NodeJS 环境
60 行 JS 代码搞定一个下拉刷新组件这里特指移动端，原因如下：相较于点击右上角刷新按钮（还有可能要点两次，第一次先展开 menu bar，然后才能看到 refresh 按钮），直接了当地下拉刷新无疑提供了更好的用户体验点击刷新按钮同步重载页面必然存在一定白屏时间，而通过下拉刷新的逻辑完全可以对于页面内容进行异步更新，其体验毫无疑问…
web开发中跨域解决方案什么是跨域？概念如下：只要协议、域名、端口有任何一个不同，都被当作是不同的域下面是具体的跨域情况详解 URL 说明是否允许通信 http://www.a.com/a.js、http://www.a.com/b.js 同一域名下 …
【翻译】19种JS高效缩写法原文:19+ JavaScript Shorthand Coding Techniques 1 使用三目运算符使用三目运算符，可以更简洁地把if else写成一行 {代码…} {代码…} 2 短路求值当你把一个变量的值赋给另一个变量，如果你要求原变量不能…
Angular 4.4.1 发布，Web 前端框架 Angular 4.4.1 已发布，更新内容： Bug 修复 animations: do not leak DOM nodes/styling for host triggered animations ( #18853 ) ( 1cc3fe2 ), closes #18606 common: fix improper packaging for @angular /common/http ( #18613 ) ( a203a95 ) common: fix XSSI pre…
一步步带你做vue后台管理框架(三)——登录功能
如何看待百度要求内部全面停止使用 React / React Native？前一阵收到Apache的通知，要求所有Apache项目禁止使用带Facebook BSD+PATENTS License的项目，并限时完成替代，估计好多人要加班了，幸好我们没用。现在抵制这个License的公司越来越多，加班的苦逼工程师也越来越多。。。其实这个License不光React用，大家可以看看Facebook的开源项目，很多都带了这个PATENT…
《一步步带你做vue后台管理框架》——登录功能系列教程《一步步带你做vue后台管理框架》第三课 github地址：vue-framework-wz线上体验地址：立即体验《一步步带你做vue后台管理框架》第一课：介绍框架《一步步带你做vue后台管理框架》第二课：上手使用《一步步带你做vue后台管理框架》第
#前端开发那些事#【Vue2.0（vue-router）附 SPA 案例】详见：Vue2.0（vue-router）附SPA案例 Vue router 是 Vue 中的一个核心插件。本文中，作者通过三部分内容与大家分享 Vue router 的学习整理，同时附上了案例。（作者：范小饭_）分享Web前端相关的技术文章、工具资源、学习心得以及笔记。小编会在12小时内审核通过，并与大家分享精选文章。小狮也会在微博【IT程序狮】上，推荐大家的文章。欢迎Web开发者们踊跃投稿哦。
一款可配置风格简单的下拉列表组件[采用vue2.0技术] 一款可配置风格简单的下拉列表开发目标：开发一款如图所示的下拉列表，可以发布成vue组件知识准备： vue2.0 css vscode or whatever you like aja
深入理解 js this 绑定 ( 无需死记硬背，尾部有总结和面试题解析 )js 的 this 绑定问题，让多数新手懵逼，部分老手觉得恶心,这是因为this的绑定 ‘难以捉摸’，出错的时候还往往不知道为什么，相当反逻辑。让我们考虑下面代码: {代码…} 在平时搬砖时比较常见的this绑定问题，大家…
#JavaScript#【js数组方法的一道笔试题考察点详解】一道关于javascript数组方法的综合理解，有concat、splice、slice、unshift、push、reverse等，你对这些方法足够熟悉吗？来试试这道笔试题。 #前端开发博客#
#rem#【Rem自适应js-优化flexible.js】rem自适应js代码，根据淘宝的flexible库优化而来的，使用计算方式上比原来的更加方便，添加这段代码在页面中，你就能愉快的使用rem实现自适应了。 #前端开发博客#
前端框架模式的变迁前言前端框架的变迁，体系架构的完善，使得我们只知道框架，却不明白它背后的道理。我们应该抱着一颗好奇心，在探索框架模式的变迁过程中，体会前人的一些理解和思考本篇将讲述的是前端框架变化过程中的一些思考，前端框架模式的变化：从无到有，从MVC(Flux或者R
Node.js 8.5 新特性最近 Node.js 发布了8.5版本，在这个版本里，Node 添加了3个激动人心的新特性。支持 ES Module 此次版本迭代中，Node 终于支持了开发者呼声最高的 ES 模块提案。这意味着，你可以直接使用import关键字引入需要的模块。 Node 8.5 可以运行如下代码： `import fs from ‘fs’` 使用es模块，你需要注意…
JS中将变量转为字符串译者按:语言的细枝末节了解一下就可以了，不需要太较真，不过如果一点也不知道的话，那就不太妙了。原文: Converting a value to string in JavaScript 译者:Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。对于JavaScript，有3种不同方法可以将…
webpack：从入门到真实项目配置该文使用的 Webpack 版本为 3.6.0，本文分两部分。第一步是简单的使用 webpack，第二部分通过一个真实项目来配置 webpack，没有使用任何的 CLI，都是一步步配置直到完成生产代码的打包。这是本项目对应的仓库，每个小节基本都对应了一次 commit。这是本文的大纲，如果觉得有兴趣你就可以往下看了 Web…
中国开发者的 Vue 成为 WordPress 弃用 React 后的最佳选择上周， WordPress 团队因专利问题而决定停止使用 React 的消息，引发了社区关于新技术框架的讨论。在美中国开发者尤雨溪（英文名：Evan You）的 Vue.js 框架，成为呼声最高的竞争者。
web前端–10个妨碍进步的学习方式 1.前言从事web前端的人很多，每个人的学习方式，学习习惯基本不会一模一样！关于web前端（或者直接互联网），大家都知道，是做到老，学到老的一个行业。之前写文章的时候，我说过很多学习的方式和建议。今天换一下，说一下我个人不建议的学习方式，或者我个人觉得是妨碍进
【React系列】如何构建React应用程序前面几篇内容简单整理了一些React的基础知识点，以方便大家能够简单的了解React的一些相关概念。在本节中，我们来试着以一个简单的例子来分析，如何构建一个React应用程序，该如何去思考。首先，我们来选择比较…
每日一博 | 前端对图片进行本地压缩并上传的实践相信做过前端的小伙伴们都写过图片上传，最简单的方式是通过表单提交，一个<input type="file">加一个<button type="submit">，外面包一层form就搞定了。（button默认的type是submit，这里可以省略，之所以特别写出来，是因为以前碰到过form标签里面写了一个<button>标签，一点击…
为处理升级过程的问题 Angular 5 将会推迟发布开发团队目前公布的 Angular 5 发布日期是 10 月 23 日，该版本的重点是构建渐进式的 Web 应用程序 (Progressive Web Apps)。 Angular 5 是由谷歌开发的流行 JavaScript 框架的下一个版本，原本计划在九月推出。但现在官方宣布需要推迟发布日期，将于 10 月 23 日发布，因为开发团队需要更多的时间来处理升…
webpack-multi-page：webpack 前端多页项目工程 webpack 前端多页项目工程，适用于展示型站点，比如官网。 Example Demo Feature 支持 ES6 语法，使用 babel 编译，预设env环境 – preset-env html 支持 ejs 语法，使用 underscore-template-loader 和 HtmlWebpackPlugin 编译，详细语法可查看 underscore 或者 l…
67 个节省前端开发者时间的实用工具、库与资源在这篇文章中，我不会与大家谈论大型的前端框架，如 React、Angular、Vue 等，也没有涉及那些流行的代码编辑器，如 Atom、VS Code、Sublime，我只想与大家分享一个有助于提升开发人员效率的工具列表合集。或许，一些朋友已经对文中的一些工具有所了解，但如果你发现了一些对你有帮助的新工具，那么，我将倍感…
APIJSON：后端零用时开发接口，前端/客户端定制返回 JSON 的内容和结构 Java-Server Android JavaScript Vue.js English Document 在线测试 1.简介 2.对比传统方式 2.1 开发流程 2.2 客户端请求 2.3 服务端操作 2.4 客户端解析 2.5 对应不同需求的请求 2.6 对应不同请求…
Vue:组件，Props，Slots 特别声明：本文转载 @nzbin 翻译 @SARAH DRASNER 的《 intro-to-vue-2-components-props-slots 》一文。如需转载，烦请注明原文出处：英文原文： https://css-tricks.com/intro-to-vue-2-components-props-slots/ 英文译文： http://www.cnblogs.com/nzbin/p/6376786.html 这是关于 JavaScript 框架 Vue.js…
react都这么无情了，vue还是那么有义，4种父子组件数据双向传递大法原本想放张老尤的照片的，烧三根香膜拜一下的，可惜图片和不上去，在前端这么mmp的时代，天天有那么多B事，在数据驱动的时候，大家都推崇数据的走向都是单向数据流，都是通过父组件去向子组件传递数据，还是那句话，那来这么多B事，只要注意点就可以了，合理的运用双向绑定，无论对业务和组件开发来说，都是一件双赢的事…
【 js 基础】 setTimeout(fn, 0) 的作用在 zepto 源码中，$.fn 对象有个 ready 函数，其中有这样一句 setTimeout(fn,0); $.fn = { ready: function(callback){ // dont use "interactive" on IE <= 10 (it can fired premature) // // document.readyState：当document文档正在加载时,返回"loading"。
Vue 2.0学习笔记：v-if 和 v-show 在Vue中，我们可以使用 v-if 和 v-show 来控制元素或模板的渲染。而 v-if 和 v-show 也属于Vue的内部常用的指令。这里所说的指令就是 directive ，指特殊的带有前缀 v- 的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。 Vue中的内部指令有很多种，今天我们先学习其…