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

常见 CSS 布局方式；几种 JavaScript 动画库推荐；JS 命名与注释规范详解；JavaScript数据结构和算法；JavaScript数据类型的存储；iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览；浅谈JavaScript中的接口实现；深入理解 JavaScript 中的 this

#前端技术#【常见 CSS 布局方式】详见：一些常见的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。
几种 JavaScript 动画库推荐JavaScript 库对设计师和开发人员来说，都是非常有用的工具。它们可以为你的网站添加一些超级强大的功能，给用户带来更好的体验。
JS 命名与注释规范详解从事前端开发也有一段时间了，一直在遵循着规范化开发，从 js 也逐渐转向了 ts ，在这个过程中也有了很多收获，在此把自己的开发心得写下来。
本文参考了 JavaScript 开发规范，并做了补充和修改，同时删去了框架开发相关的内容。
JavaScript数据结构和算法数据结构和算法对于很多前端工程师来说，一直觉得是可有可无的，但其实不然，个人觉得，前端工程师其实是最需要重视数据结构和算法的人，因为前端所做的东西是用户访问网站第一眼看到的东西，特别在移动浪潮到来之后，对用户体验越来越高，对前端提出了更高的要求，面对越来越复杂的产品，需要坚实的数据结构和算法基础才能驾驭。如果没有学习过计算机科学的程序员，当我们在处理一些问题时，比较熟悉的数据结构就是数组，数组无疑是一个很好的选择。但很多时候，对于很多复杂的问题，数组就显得太过简陋了，当学习了数据结构和算法之后，对于很多编程问题，当想到一个合适的数据结构后，设计和实现解决这些问题的算法就手到擒来。
JavaScript数据类型的存储一个很基础的知识点，JavaScript中基本数据类型和引用数据类型是如何存储的。由于自己是野生程序员，在刚开始学习程序设计的时候没有在意内存这些基础知识，导致后来在提到“什么什么是存在栈中的，栈中只是存了一个引用”这样的话时总是一脸懵逼。。后来渐渐的了解了一些内存的知识，这部分还是非常有必要了解的。
iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览这前端代码效果实时预览的需求实际上是非常常见的，例如jsbin，codepen，runjs之类的网站就是满足此需求的。传统做法是这样子的，会新建一个另外的独立页面，专门用来接收传入的前端代码，通过新开窗口或者嵌入iframe页面的方式达到最终效果，其中可能会用到 HTML5 postMessage等通信技术。本文讲述借助iframe和blob实现前端代码的实时预览。
浅谈JavaScript中的接口实现接口是面向对象JavaScript程序员的工具箱中最有用的工具之一。在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”，即我们所说的面向接口编程，这个概念的重要性可见一斑。但问题在于，在JavaScript的世界中，没有内置的创建或实现接口的方法，也没有可以判断一个对象是否实现了与另一个对象相同的一套方法，这使得对象之间很难互换使用，好在JavaScript拥有出色的灵活性，这使得模拟传统面向对象的接口，添加这些特性并非难事。接口提供了一种用以说明一个对象应该具有哪些方法的手段，尽管它可以表明这些方法的含义，但是却不包含具体实现。有了这个工具，就能按对象提供的特性对它们进行分组。
深入理解 JavaScript 中的 this 你是否经常被JavaScript中的this关键字搞晕? 不用太过于当心, 很多JavaScript的初学者都被它搞晕过. 你不是一个人在战斗.

话虽如此, 但这并不意味着你可以永远不用理解this. 不管是在JavaScript中还是在许多教程中, 都广泛的使用this, 所以掌握this是迟早的事. 一旦你理解this, 就会觉得它实际上比你想象的简单许多.

读过这篇文章以后, 你就会深入理解this的秘密. 到时候你就知道它是什么, 它做什么以及如何使用它.
《如何编写轻量级 CSS 框架》想说的东西很多，却又无从说起。如今轻量级框架如雨后春笋，层出不穷。我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。（by nzbin）
#前端技术#【JavaScript 中的执行上下文和调用栈是什么？】详见：一篇文章带你了解 JavaScript 基本概念之执行上下文。在本文中，作者将帮助你理解 JavaScript 解释器是如何执行你的代码的。
JavaScript精进之路 — 异步的实现（上）程序中现在运行部分和将来运行部分的关系就是异步编程的核心。简单来讲，如果程序中出现了一部分要在现在运行（顺序同步执行），一部分要在将来运行（可能是设置了timeout也可能是一个ajax的异步调用后执行的函数），那么两者之间的关系的构建就构成了异步编程。
深度好文 | JavaScript 疲劳终极指南：我们行业的真相上周我在 NebraskaJS 2017 会议上做了一个和这个话题极其类似的演讲，我也收到了许多积极的反馈，所以我就想这个演讲也可以写成一篇文章发表出来，让更多的人知道，并帮助他们应对 JS 疲劳，理解我们行业的真相。

这篇文章的目的是希望改变你对软件工程行业的普遍的看法，助你在你可能工作的领域上一臂之力。
在JavaScript中实现队列队列和栈非常类似，但是使用了不同的原则，而非后进先出。

队列是遵循FIFO（First In First Out，先进先出，也称先来先服务）原则的一组有序的项。队列在尾部添加新元素，并从顶部移除元素。最新添加的元素必须排在队列的末尾。

在现实中，最常见的例子就是排队：
排在第一位的人会先接受服务。
深入浅出 Web Audio Api Web Audio API 需要在音频上下文中处理音频的操作，并具有模块化路由的特点。基本的音频操作是通过音频节点来执行的，这些音频节点被连接在一起形成音频路由图。我们可以从上面这段文字中提取出几个关键词：

音频上下文
音频节点
模块化
音频图
我将会以这些关键词为开始，慢慢介绍什么是 Web Audio Api，如何使用 Web Audio Api 来处理音频等等。
2017年8月前端开发者超实用干货大合集在过去的几年当中，网络上所流传的各种设计和开发资源，在素质上有明显的提升。其中有一些已经几乎成为了设计师和开发者必备的工具，但是其中绝大多数由于其应用范畴的局限，或者传播不够广，导致它们大多并广为人知。将这些素材集中到一起，很大程度上是希望它们的目标用户能够明白，需要这些工具的时候，上哪儿找。

这次的前端干货合集内容也很齐全，仔细看看，总能找到几款你所需要的。
Vue 插件编写与实战本文立足vue开源的理念，主要为vue开发者讲解编写vue插件的方法和步骤，通过理论与实践相结合的方式来加深大家对vue插件编写的认识。
个人总结（css3新特性） css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有用的），以及一些实例，就写了这一篇总结！希望，这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性，以及基础的用法，感觉css3的魅力！如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得更深入的文章或者书籍了！如果大家有什么其他特性推荐的，欢迎补充！大家一起学习，进步！
Ajax的全面总结Ajax在前端开发中有着举足轻重的地位，关于Ajax的使用和注意事项一直是一个重要的话题，借此机会，本文希望对Ajax做一个全面的总结，彻底揭开Ajax的神秘面纱。一.什么是AjaxAjax(Asynchronous JavaScript and XM…
HTTP缓存机制详解 Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。

但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。

在此，我会尝试用简单明了的文字，像大家系统的介绍HTTP缓存机制，期望对各位正确的理解前端缓存有所帮助。
Vue.js数据绑定原理 Vue.js是一款MVVM框架，上手快速简单易用，通过数据绑定在修改数据的时候更新视图。Vue.js的数据绑定原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持E8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。
JavaScript 是如何工作的？大家应该都知道 JavaScript 是单线程的，以及听过 V8 引擎的概念。

这篇文章将会介绍这些概念，并解释 JavaScript 是如何运行的。通过了解这些细节，开发者能更好地编写代码，正确利用其提供的 API。
#前端技术#【5 个你可能不知道的 CSS 属性】详见：在这篇文章中，作者将分享 5 个相对较新的 CSS 属性。通过总览这些 CSS 属性，告诉你可以使用哪些值，它们的应用场景，并且提供了一些示例帮助你理解。
Web 开发中说高并发的时候，我们在说什么这并不是一个回答的问题的文章，而是由此引发的一个思考。大家先心里仔细想想，当你们听到高并发网站时，心里对这个网站是个什么概念？首先想到的是淘宝吗？带着问题，我们一起思考技术写这个话题是因为我对搜索引擎给我的答案很不满意，然后决定把思考的一些东西分享出来，希望可以大家彼此讨论下…
【七个不可错过的React组件库与开发框架】React是如今最火爆的前端技术，从按钮到卷轴到工具条，应有尽有，而且这些组件可以各行其是，也可以组装成复杂的UI，你也可以把UI分解成独立的可服用的模块。这里介绍几个非常重要而有用的React组件库和开发框架。详见（来自：@IT经理网）
关于 Node.js 的认证方面的教程（很可能）是有误的我搜索了大量关于 Node.js/Express.js 认证的教程。所有这些都是不完整的，甚至以某种方式造成安全错误，可能会伤害新用户。当其他教程不再帮助你时，你或许可以看看这篇文章，这篇文章探讨了如何避免一些常见的身份验证陷阱。同时我也一直在 Node/Express 中寻找强大的、一体化的解决方案，来与 Rails 的 devise 竞争。
CSS 中的行问：块级元素和行内元素有什么区别？块级（block）元素可以控制它的大小
行内（inline）元素将其排到父级的行系统中
我更愿意把这两者称作为元素的两个特性。因为行内元素具有 inline 特性，所以多个行内元素会排在一行；但它们不具有 block 特性，所以无法使用 width、height 指定它们的宽高。因为块级元素具有 block 特性，所以可以直接指定元素的宽高；因为块级元素不具有 inline 特性，所以它们会独占一行。
10 个 React 小模式在过去的几年，我经手过很多大大小小的React项目，在这个过程中，我不断的重复重复，逐渐的形成了一些模式，在这里分享给大家。

如果你是刚开始接触React，能看到这篇文章，只能说你很幸运：）。
Nodejs实战——实现一个资源分析系统最近经验要迁移到https，需要排查页面中需要用到的全部资源，我用nodejs+phantomjs做了一个自动收集页面资源的程序，本文分享下自己的一点经验，注意文章结尾有干货。
立即表达式的多种写法与注意点以及in操作符的作用立即表达式，在javascript中非常常见，采用立即表达式可以形成一个局部作用域，常配合闭包实现模块化编程等其他用途，接下来我们看看，在大多数的框架中，立即表达式都有哪些写法，以及需要注意的点，另外再介绍下in操作符的用法。
JavaScript 中的执行上下文和调用栈在这篇文章里，我会深入地探讨 JavaScript 中最基本概念之一，那就是执行上下文。通过这篇文章，你应该能够清楚地了解到 JS 解释器究竟在干嘛，为什么可以在一些函数和变量声明之前就能使用，以及它们的值是怎样被决定的。
28个让你惊叹的JavaScript黑科技代码 void 0的写法让代码晦涩难懂。10. 论如何优雅的取整vara =~~2.33varb=2.33|0varc=2.33>>011. 如何优雅的实现金钱格式化:1234567890 –> 1…
我们动手来封装一个JS的发布订阅组件提及发布订阅，我们都知道是一种比较经典的设计模式。比如像redux等比较流行的一些库或者一些前端框架底层都会用来作为通讯机制，那么我们今天就来封装一个基于发布订阅的组件。
又闹分裂？Node.js 被分叉出一个项目 — Ayo.js Ayo （发音为“eye-oh”或 IO）是当前流行的 JavaScript 运行时 Node.js 的一个分支。它的创建是由于 Node.js 项目内部发生了一个关于“行为准则(Code of Conduct)”的问题。 Node.js 项目的一个委员会(TSC)就是否应该允许一名 Node.js 项目的开发者继续为项目工作进行了投票，投票结果是 60% 持赞成的态度。之…
HTML5 实时监听输入框值变化在网页开发中经常会碰到需要动态监听输入框值变化的情况，如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此这篇文…
基于 vue+express+mongodb 个人网站开发体验从界面设计到后端的全栈开发
前端 101：给不了解前端的同学讲前端简介有时候需要向新同学科普前端，又不知道如何下手？先把这篇图文分享丢给他吧！本文改编自魔法哥为 “百姓网暑期实习生训练营” 所作的前端入门讲座。此讲座面向在校大学生，内容比较初级，高手请飘过～大家好，今天的分享主要分为以下三个部分。由于目前计算机专业还没有为 Web 前端技术设…
几个前端工程师应当掌握的“词语”HTML5学堂-码匠：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少？有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好~一方…
整理下《前端江湖面试》对自己有益的题目面试题目汇总前言近期在找工作，也在读前端面试江湖这本书，书中整理了很多基础的面试题目，在书中也发出了一些错误。好记性不如烂笔头，于是整理下对自己有益的题目，都是一些较为基础的题目,后期还会更新。…
Javascript奇技淫巧之位运算符奇技淫巧：指过于奇巧而无益还让人着迷的技艺与制品。 And（与） & Or（或） | Exclusive Or（异或） ^ Not（非） ~ 位运算符，我们在日常js开发中其实说真的，很少会用到，甚至可以说有相当一部分的 javascrip…
直播协议 HTTP-FLV 详解传统的直播协议要么使用 Adobe 的基于 TCP 的 RTMP 协议，要么使用 Apple 的基于 HTTP 的 HLS 协议。今天我要向大家介绍另外一种结合了 RTMP 的低延时，以及可以复用现有 HTTP 分发资源的流式协议 HTTP-FLV。 FLV…
《又闹分裂？Node.js 被 fork 出一个项目 Ayo.js》
[js高手之路]js单页hash路由原理与应用实战什么是路由？通俗点说，就是不同的URL显示不同的内容什么是单页应用? 单页，英文缩写为SPA( Single Page Application)，就是把各种功能做在一个页面内. 那所谓的单页路由应用就是：在一个页面内，通过切换地址…
前端工程化实践：大前端的转变之路年初有幸加入到 TalkingData，到现在半年有余。是时候回头看看，这半年走过的路。团队的充分信任和赋能，使我可以大胆地实践和尝试。前端团队需要负责很多条产品线的前端开发工作，如果技术规范和技术栈不统一，就很难保证产品的快速迭代。在这半年里，通过推行组件化开发理念、规范 Git 工作流和…
H5 是 HTML5 吗？ H5 这个词在当前存在一些争议，很多人的理解都不一样，本文做了详细的分析
10个有趣的Javascript和CSS库-2017年8月 10个有趣的Javascript和CSS库-2017年8月 helloweba.com 作者：月光光时间： 2017年08月26日 13:05 标签：javascript css 这个月我们为您收集和整理了最新关注的10个Javascript和CSS库，它们当中有UI库、动画特效、以及前端整套解决方案等等，希望对前端朋友们有所帮助。 Bootstr…
读书笔记：锋利的JQuery 本文首发于我的个人博客：cherryblog.site/ 最近开启了阅读源码之旅，有兴趣的童靴可以持续关注，这几天再看 Zepto.js 的源码，估计博文过几天就会出来~另外，买的十几本书陆陆续续的在看，立志每本书都写一本读书笔记（相当于这本书的浓缩版 + 个人见解）前一段在当当和京东上趁着打折买了十几本编程的书，励志要…
如何免费地让网站启用 HTTPS 今天，我把CoolShell变成https的安全访问了。我承认这件事有点晚了，因为之前的HTTP的问题也有网友告诉我，被国内的电信运营商在访问我的网站时加入了一些弹窗广告。另外，HTTP的网站在搜索引擎中的rank会更低。所以，这事早就应该干了。现在用HTTP访问CoolShell会被得到一个 301 的HTTPS的跳转。下面我分享一下启用HT…
HTML5 indexedDB 前端本地存储数据库实例教程 HTML5 indexedDB和Web SQL Database都是本地数据库数据存储，Web SQL Database数据库要出来的更早，然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始，就已经注定Web SQL Database数据库是明日黄花。
10 个最终编译成 JavaScript 的脚本语言相比于简单的网站，现代应用具有不同的需求。但是浏览器是一个具有（几乎）固定可用技术集合的平台，而JavaScript依然是 web 应用的核心语言；需要运行在浏览器中的任何应用必须使用该语言来实现。作者的更多文章 KeystoneJS: The Best Node.js Alternative to WordPress The Anatomy of a Modern Ja…
Vue.js响应式原理写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址： github.com/answershuto 。在学习过程中，为Vue加上了中文的注释 github.com/answershuto… ，希望可以对其他想学习Vue源码的小伙伴有所…
基于 vue + nuxt 打造 o2o 教育商城系统（触屏版）服务端渲染SSR Node.js(v6.9.1) + express(4.X) + vue(2.0) + vuex + mysql(5.7.18) + （NUXT）SSR + nginx反向代理前言 *本项目纯属个人练习项目，数据并非真实，如有雷同 Node.js(v6.9.1) + express(4.X) + vue(2.0) + vuex + mysql(5.7.18) + （NUXT）SSR + nginx反向代理前言 *本项目纯属个人练习项目，数据并非真实，如有雷同
iNotify.js —— Javascript 实现的浏览器系统通知 JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。下载 $ npm install title-notify –save-dev $ bower install inotify –save-dev 编译 # 下载依赖工具 $ npm install # 压缩inotify $ npm build init effect: flash | scroll | favicon var iNotify = new…
基于 Vue 实现的移动端图片轮播组件.wc-swiper 基于 Vue 的移动端的图片轮播组件. Why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的….
#CSS3#【CSS3弹性盒模型flexbox布局基础版】最近看了社区上的一些关于flexbox的很多文章，感觉都没有我这篇文章实在，最重要的兼容性问题好多人都没有提出解决方案。另外本人还废寝忘食的翻译了国外的《CSS3弹性盒模型fl…请戳→ #前端开发博客#
全面了解JS作用域执行上下文（也称执行环境）堆栈执行上下文是javascript最重要的一个概念，执行上下文定义了变量或函数有权访问的其他数据，决定了它们各自的行为。而在javascript中有三种执行上下文：全局执行上下文，函数执…
30 行 JavaScript 代码搭建神经网络
关于Angular响应式表单的三种更新值的讨论 Angular响应式表单相比较模板驱动表单更大操作性、更易测试性。因此，我更推荐这类表单创造方式。当一个用于修改用户信息的表单，数据的来源总是来自远程；而对于一个 FormGroup 的创建总在 ngOnInit 中完成。因此，这里会有一个表单更新值的问题。而通常我们会透过 FormGroup 下的三种…
vue组件之间的通信（一）个人认为Vue组件之间的通信主要归类为3种：父子组件之间的通信任意两个组件之间的通信最终的boss，Vuex-状态管理模式此次写一下前两种通信，后续会单独写vuex相关的内容。父子组件的通信这种方式的通信是最简单，下面直接贴代码
10 个最佳 ES6 特性 ES6，正式名称是ECMAScript2015，但是ES6这个名称更加简洁。ES6已经不再是JavaScript最新的标准，但是它已经广泛用于编程实践中。如果你还没用过ES6，现在还不算太晚…下面是10个ES6最佳特性，排名不分先后：1.函数参数默认值 2.模板字符串 3.多行字符串 4.解构赋值 5.对象属性简写 6.箭头函数 7.Promise 8.Let与Const 9.类 10.模块化
你知道JavaScript是一种多么奇葩的编程语言吗？微信号：gh_ffb279ea1674 奇舞周刊 JavaScript 是一个伟大的语言。它有简单的语法，完善的生态系统，最重要的是，有一个庞大的社区。同时，我们都知道，JavaScript 有很多有趣的“潜规则”。其中有一些经常在日常工作中给我们添麻烦，而有些可以给我们带来帮助，让我们大笑起来。这篇文章的思想源于Brian Leroux，…