形成良好统一的代码规范，有利于提高代码的可读性，减少潜在的错误，便于团队协作开发。本文简单介绍JS、CSS、 Git Commit 的规范工具及用法。

用 svg-sprite-loader 解放你的icon. 好吧，这篇文章的起源就来源于——我懒。 UI小姐姐设计了自己的icon，但是我不想每次引入icon的时候都写一大堆: {代码...} 很长很长的地址…我觉得最简单的形式还是像饿了么那些UI库一样，直接： {代码...} 写个文件名就能引入我的icon了。 OK, 以上就是我们的理想模式。So, let’s go! ...

最重要的一点是给这一行的父元素(columns)的直接子元素(column)设置flex: 1。这样元素才会平分整行空间，否则就只会占据元素本身的大小，挤在一起。

Redux是一款状态管理库，并且提供了react-redux库来与React亲密配合， 但是总是傻傻分不清楚这2者提供的API和相应的关系。这篇文章就来理一理。

每一个网址都有一个相对应的独特的 IP 地址，这个 IP 地址对应着host这个域名的机器，其实域名是不重要的，重要的是这个 IP 地址，由于 IP 地址这一串数字不便于记忆，因此此案有域名这个东西来帮助我们记忆。

PostCSS 是一款对 CSS 进行处理的工具。它主要依赖插件来进行操作。当你需要某些功能的时候，只需配置相应的插件即可。它有非常非常丰富的插件，可以涵盖你的开发过程的各个方面。即使没有满足你需要的插件，你也完全可以使用 JavaScript 来开发自己的插件就可以了。

我们在处理事件的时候，有些事件由于触发太频繁，而每次事件都处理的话，会消耗太多资源，导致浏览器崩溃。最常见的是我们在移动端实现无限加载的时候，移动端本来滚动就不是很灵敏，如果每次滚动都处理的话，界面就直接卡死了。

CSS Grid (CSS网格) 是继 Flexbox之后又一非常重要的布局方法。目前，Chrome Firefox Safari 浏览器的最新版本已经开始支持它了。

1. 单例模式 定义：一个特定类 仅有一个实例 应用场景： 一个遮罩层 实现方式 每个对象都是一个单体，因为他们的引用位置不一样； 使用new操作符 将首次生成的对象存储在全局变量中。缺点：全局变量易被覆盖。可以使用闭包来存储这个变量，参见 一个遮罩层。 在构造函数的属性中存储该实例。缺点：构造函数的属性也容易...

When a function is invoked, an activation record, otherwise known as an execution context, is created. This record contains information about where the function was called from (the call-stack), how the function was invoked, what parameters were passed, etc. One of the properties of this record i...

MDN定义：Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions 'remember' the environment in which they were created.

1. 什么是Sass {代码...} 2. Sass的特征 变量（variable）帮助你存储需要重复使用的值； 嵌套（nesting）让你书写更少的选择器； partials(_base.scss) 和@import让你的CSS更加模块化，并且编译为一个css文件，减少http请求； Mixin 让你创建一组可重复使用的CSS声明，每次使用只需要@inclue，并且可使用变量自定义值； ...

for...in： 由于a,b的长度不同，你更倾向于将短数组loop,所以你会在循环中使用push后者unshift，循环的方法也有所不同。 优点：解决了内存的问题；

首先我们来想想作用域是用来干什么的。在我们的程序中有很多变量（标识符identifier），我们现在或者将来将使用它。那么多变量，我咋知道我有没有声明或者定义过他呢，他的值又是多少呢，我要如何来找到他呢？作用域就是用来帮助我们寻找变量的。

vertical-align只针对内联元素。默认值baseline只内联元素的底部与文字底部在一条直线上。还取值middle,text-bottom,text-top,sub,super,top,bottom。（看这篇文章）

output的配置要注意pubilcPath这个属性，这个属性指明在浏览器中如何加载生成的打包文件。这个属性在加载额外的代码块(使用代码分隔)，加载图片（通过require）等静态资源的时候特别有用。

1.Arguments：类数组对象。存储实际传入函数的参数。 {代码...}

1. 正则表达式语法 1.1 表示方法 {代码...} 1.2 字符类[] []:匹配[]中的任意字符 [^]:不在[]中的任意字符 .:除换行符或其他终止符之外的任意字符。以下的大写都是小写的取反： \w:[a-zA-Z0-9] \W:[^a-zA-Z0-9] \s:任意unicode空白符 \S:[^\s] \d:[0-9] \D:[^0-9] [\b]：退格 1.3 重复 {n,m}:出现n<= 次数 <= m {n,...

用Bootstrap的CSS部分实现CSS效果，VueJS实现Accordian效果。利用Vue JS的v-show或v-if指令，显示或隐藏panel-body

1. 函数定义 {代码...} 2. 函数调用 2.1 函数调用 {代码...} 2.2 方法调用 {代码...} 2.3 构造函数调用 {代码...} 2.4 间接调用 {代码...} 3. 函数的实参和形参 {代码...} 4. 闭包 {代码...} 5. 函数的属性和方法 5.1 函数的属性 {代码...} 5.2 函数的方法 {代码...} 6. 函数式编程 {代码...}

1. 数组 数组是值的有序集合，每个值被称为元素。数组有以下特点： 无类型：数组元素可以是任意元素。 动态性：数组的长度是动态的，可随时增加和缩减。无需在创建时为其声明固定大小也无需在长度变化时重新分配空间。 数组是特殊的对象，并且经过优化，用索引访问数组比访问常规的对象属性快。 数组继承自Array.prototy...

对象是属性的无序集合。因此，这一章主要从对象和属性两个方面来阐述。 1. 对象 1.1 对象的定义 {代码...} 1.2 对象的分类 {代码...} 1.3 对象的操作 1.3.1 创建对象 {代码...} {代码...} 1.3.2 序列化对象 {代码...} 1.4 对象的方法 {代码...} 1.5 对象的属性 {代码...} 2.属性 2.1 属性的分类 {代码...} 2.2 属性的描...

随着ES6的推进，我们开始逐渐使用ES6语法，但目前并非所有浏览器都支持ES6语法，为了将ES6转换为现有浏览器能理解的语法，Babel诞生了。

今天，我们用纯CSS实现⭐️评级。 案例效果 分析：正常情况下为空心的☆，鼠标hover时，变为实心黄色的★. HTML分析 div.star包裹5个span,每个span的内容为空心的☆.HTML代码如下： {代码...} CSS分析 1.分析：当我们hover时，我们用实心的★覆盖空心的☆，并给实心的★设置color:gold;. 要覆盖空心的☆，我们要利用为元素::befor...

效果预览 分析：可以看出hover的时候是有前后两个面的翻转，并且有一个凸出效果。 HTML分析 代码如下： {代码...} <a>标签里包裹一个<span>盒子里包裹两个<span>，为效果的前后面做准备。 CSS分析 1.外观、定位 代码如下： {代码...} 2.3D效果 首先创造3D环境，保留3D空间： {代码...} 1.在three-d:ho...

最外层的.container触发3d效果，#cube保留父元素的3d空间同时包裹正方体的6个面，给每个面设置对应的class属性。HTML代码如下：

今天，我们用比较简洁的CSS3来实现翻转效果。 动画效果 效果分析 当鼠标滑过包含块时，元素整体翻转180度，以实现“正”“反”面的切换。 HTML分析 分析：.container，.flip为了实现动画效果做准备。.front,.back各包裹一张图片。实现该效果的HTML如下： {代码...} CSS分析 1. 元素布局 为了实现以上效果，先进行元素布局。...

前言：发现这个问题的起因是在写一个css animation demo的时候为了不让图片溢出包含块，而给包含块设置了{overflow:hidden;}属性导致动画效果不能实现。于是查找overflow的相关属性时又遇到了其他问题。现在终于有些解释。