前端叨叨客 on 前端叨叨客

Rollup 和 Webpack 之 Tree Shaking

Wed, 18 Oct 2017 00:00:00 +0000

这个话题最早源于和同事之前的一次讨论。Webpack 也支持 Tree Shaking 了，同样 Rollup 也是，那么它们之间实现是一致的么？写了一半，中间拖了几个月，然后社区中又有两篇比较不错的文章，然后又拖了好久，才慢慢补齐了文章。拖延症伤不起啊😂。

概念

在此之前先简单的谈谈 Tree Shaking 的概念。最早应该是从 Rollup 来的吧，不过其实简单理解的话，可以当成是 dead code elimination 的另一种说辞，就是把无用代码剔除掉。它们本质的区别在于，Tree Shaking 是导入有用的代码，而 dead code elimination 是排除无用代码。更学术的解释可以看 Rich_Harris 的官方说明。

Rollup

Rollup 作用于顶级 AST 节点上，依赖于 ES6 模块的静态解析。ES6 模块有个特性很好，就是完全的静态结构，这样导入和导出的声明都放在了模块最顶层，而且都是非动态的。正因这个设计的强大，才使用 Rollup 的 Tree Shaking 得以实现。

我们先从简单的例子开始看。

// action.js
export const walk = () => console.log('jianjian is walking')
export const run = () => console.log('jianjian is running')

// index.js
import {walk} from './action.js'
walk()

action.js 中定义了两个行为函数并导出，在 index.js 中使用 walk 函数。Rollup 编译后的结果如下：

'use strict';
const walk = () => console.log('jianjian is walking');
walk();

很明显，未使用到的 run 函数则在编译的时候被移除掉了。

如果是 CommonJS 写法的话，还需要通过 rollup-plugin-commonjs 插件来转换一下。

再来看一看对类的处理。

// action.js
class action1 {
  talk() {
    console.log('jianjian is talking')
  }
  walk() {
    console.log('jianjian is walking')
  }
}

class action2 {
  walk() {
    console.log('jianjian is walking')
  }
}
export {
    action1,
    action2
}

// index.js
import {action1, action2} from './class.js'

let act = new action1()
act.talk()

输出的结果如下：

'use strict';

class action1 {
  talk() {
    console.log('jianjian is talking');
  }
  walk() {
    console.log('jianjian is walking');
  }
}

let act = new action1();
act.talk();

类 action1 中定义了两个函数，walk 未使用到，但是实际结果还是会输出的，而 action2 未使用到则不输出。如果打包的时候加了 babel 将 class 语法转换为 ES5 的实现的话就无能为力了，毕竟对动态语法的分析有可能导致更大的问题，有兴趣的同学可以参看话题讨论。这也导致 Tree shaking 在实际的使用场景中显得有些尴尬，毕竟目前能优化的空间上有限。

Rollup 的主要构建流程做了如下几步：

查找。找到对应 entry 模块的所有依赖项并导入(可以是 plugin 处理后的内容，上面讲到的 commonjs 的处理就是如此)，返回模块包含 code, ast, map 等的 JSON 信息。同时存储相关的依赖 imports, externals 等等。
绑定。将索引与之相关联，来生成完整的依赖代码。
标记。引用所有需要被包含的申明( Tree Shaking 就是在这一步进行处理)
排序。使用增强的拓扑排序对模块进行排序，解决诸如全局命名冲突等问题。

而 Tree Shaking 实际针对 AST 进行删减处理，主要有以下内容，具体可以查找对应 AST 语法。如果错误，欢迎指正。

classDeclaration
conditional express
ExportDefaultDeclaration
FunctionDeclaration
isStatement
SequenceExpression
Statement
VariableDeclaration
VariableDeclarator

不对上面语法树替换做进一步说明了，主要展开来篇幅有点长。

Webpack

再来看看 Webpack 的相关处理。同样的先从函数入手。取了核心的编译后的文件，如下：

/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__action_js__ = __webpack_require__(2);

Object(__WEBPACK_IMPORTED_MODULE_0__action_js__["a" /* walk */])()



/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
const walk = () => console.log('walk')
/* harmony export (immutable) */ __webpack_exports__["a"] = walk;

const run = () => console.log('run')
/* unused harmony export run */

walk 和 run 函数还在，区别在于 run 函数处有 unused harmony export run 的注释，从而在 UglifyjsWebpackPlugin (底层用的是 uglify-js) 的时候做删除处理。

类的结果处理类似，这里不具体展开了。

抛除 Webpack 整个复杂的构建过程，在 Tree Shaking 中主要处理的两步，

抓取所有模块合并到一个包文件中，任何未导入的文件都不会被导出
在执行压缩的过程中，移除 dead code

我个人觉得 Webpack 的这个处理方式还是 DCE 而不该定义做 Tree Shaking。不过也就名字而已。

TODO

待续😂…

ES6 proxy

Thu, 28 Sep 2017 00:47:14 +0800

Proxy，顾名思义就是代理，是指在目标对象前加一层拦截（traps），可用于对访问对象的拦截和过滤。那么这个和上一节讲到的 Decorator 有什么区别呢？

Decorator 是给对象添加一些额外的职责，说白了是保持原有的逻辑不变。而 Proxy 的话更倾向于为对象提供一种代理，从而控制对这个对象的访问。

先来看看基本的实例。

let proxy = new Proxy(target, handler)

target 表示要拦截的对象，可以是 Array，Object，Function 或者另一个 Proxy。handler 表示要拦截的行为。而作用的结果则体现在 Proxy 的实例 proxy 上。如果目标没有拦截，就等同于原对象。

对于具体的 API 这里就不做展开了，需要补充的同学可以直接点击查看。无非是监听对象的操作，然后执行相应的目标行为。比如 get，set，deleteProperty 等等。

从一个简单的 get 操作来看看 proxy 实际是如何操作的。在取对象 obj 值的时候，记录一条日志。

let obj = {a: 1}
let proxy = new Proxy(obj, {
    get (target, key, proxy) {
        console.log(`get target key ${target[key]}`)
        return target[key]
    }
})
console.log(proxy.a)

在 Proxy 之前，我们会做类似功能来模拟。通过 globalGetInterceptor 函数来实现具体的对象操作内容。

// babel-plugin-proxy
var defaultHandle = {
    get: function(obj, propName) {
        return obj[propName]
    }
}
var Proxy = function(target, handle) {
    this.target = target
    this.handle = handle

    this.handle.get = this.handle.get || defaultHandle.get
}
Proxy.getTrap = function(propName) {
    return this.handle.get(this.target, propName)
}
function globalGetInterceptor(obj, propName) {
    if (obj instanceof Proxy) {
        return obj.getTrap(propName)
    }
    var value = defaultHandle.get(obj, propName)
    if (typeof value === 'function') {
        return value.bind(this)
    } else {
        return value
    }
}
globalGetInterceptor(proxy, 'a')

实际上，Proxy 的应用场景挺广的。目前看到他们常用有： * 对对象访问的控制 * 降低函数或类的复杂度 * 对资源的检验

通过具体的例子来演示一下。

第一个 console 的例子，稍微扩展一下的话，就可以当做监控来使用。比如在 get 或者 set 方法中加入对应的埋点等操作等等。

还是用上面讲到的 obj 对象。我们也可以做一些校验，访问控制等等。比如我们只允许 obj 属性赋值是数字。不然就报错。例子如下：

let obj = {a: 1}
let proxy = new Proxy(obj, {
    set (target, key, newValue) {
        if (isNaN(newValue)) {
            throw 'Error: isNaN'
        }
        target[key] = newValue
    }
})
proxy.b = 1

还有更高阶的，比如双向绑定等等。不一一例举了。

ES7 Decorators

Sun, 18 Jun 2017 22:10:05 +0800

Decorators 的概念来源于 Python，可以称为装饰器。简单的理解其实它就是一个 wrapper，对目标函数或对象进行修改并返回。如果从 Java 的角度的话，可以看作是一个 filter。

它只是一种语法糖，本质上是对函数的变换。先来看看经典的日志系统吧。

class Person {
  @log
  getFullName(firstname, lastname) {
    return `${firstname}${lastname}`
  }
}

function log(target, key, descriptor){
  const value = descriptor.value
  descriptor.value = (...args) => {
    console.log(`Calling ${key} with`, args)
    return value.apply(null, arguments)
  }
  return descriptor
}

const person = new Person()
person.getFullName('LeBron', 'James')

@ 声明的 @log 即为 decorator，它是一个函数，接收三个参数：

target，需要定义属性的对象
key，属性名
descriptor，属性描述符，同 Object.defineProperty 的 decorator

发现了么，其实 decorators 底层用的也是 Object.defineProperty 的属性来写的。

如果单纯通过外面包的一层函数来实现的话，会是怎么样的？其实也挺简单的。

function log(target){
  console.log(target.name, typeof target, arguments)
  return (...args) => {
   console.log(`Calling ${target.name} with`, args)
    target.call(this, [](#).slice.call(arguments))
  }
}

class Person{
  getFullName(firstname, lastname) {
    // …
  }
}
Person.prototype.getFullName = log(Person.prototype.getFullName)
// …

实际项目开发中，我们可以通过使用 babel-plugin-syntax-decorators 或 babel-plugin-transform-decorators-legacy 来转码。让我们来看看 babel 中的实现方式。以下只是一些伪代码。

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
  // descriptor 赋值逻辑以及默认属性
  Object['keys'](#)(descriptor).forEach(function (key) {
    desc[key](#) = descriptor[key](#);
  });
  desc.enumerable = !!desc.enumerable;
  desc.configurable = !!desc.configurable;

  desc = decorators.slice().reverse().reduce(function (desc, decorator) {
    return decorator(target, property, desc) || desc;
  }, desc);

  if (desc.initializer === void 0) {
    Object['defineProperty'](#)(target, property, desc);
    desc = null;
  }

  return desc;
}

let Person = (_class = class Person {
  getFullName(firstname, lastname) {
    return `${ firstname }${ lastname }`;
  }
}, (_applyDecoratedDescriptor(_class.prototype, 'getFullName', [log](#), Object.getOwnPropertyDescriptor(_class.prototype, 'getFullName'), _class.prototype)), _class);

作用 & 结尾

用于函数或类的修饰
由于用的 Object.defineProperty 特性，所以 descriptor 还可以对对象属性层级的操作
实现 mixin
用于工厂函数

几个有趣的库，对 decorator 做了一些加强。有兴趣的同学可以翻翻。 * core-decorators.js * core-wrappers

四个调节颜色的 CSS 滤镜

Fri, 09 Jun 2017 01:05:16 +0800

本文为译文，原文地址： http://vanseodesign.com/css/4-css-filters-for-adjusting-color/ ，作者，@Steven Bradley

SVG 提供了一种非破坏性的方式来改变图像或图形的某些颜色属性。不幸的是，其中的一些变化比其它的更麻烦。CSS 滤镜允许你无损的改变颜色的一些性质，比 SVG 简单。

最近几周我一直在谈论 CSS 滤镜作为 SVG 滤镜的替代品。首先我提供了一个介绍和展示 blur() 滤镜函数的示例，然后我浏览了 url() 和 grop-shadow() 滤镜函数，并分别提供了示例。

今天我想介绍四个 CSS 滤镜函数，所有这些都是 SVG 滤镜原语 feColorMatrix 的不同类型和值的映射。

feColorMatrix 滤镜原语（Filter Primitive）

feColorMatrix 滤镜原语可以用于更改元素颜色的一些基本属性。顾名思义，原语使用矩形来添加不同的滤镜效果。

存在四种不同的 CSS filter-function 来达到 feColorMatrix 的效果。这是一个例子，其中单个 SVG 原语可以比任何一个 CSS 滤镜功能做得更多。

这是四种 CSS 滤镜：

grayscale()
hue-rotate()
saturate()
sepia()

让我们在下图中做一些具体的实践。

grayscale() 函数

grayscale() filter-function 功能将图像转换为灰度。

grayscale() = grayscale( [ <number> | <percentage> ] )

你可以通过提供 0.0 到 1.0 之间的百分比或数字来确定转换图像的比例。100%（或 1.0）是完全转换为灰度，0% （或 0.0）则没有任何转换。0.0 和 1.0 或 0% 和 100% 直接的值是线性的乘数效应。负值是不被允许的。

在第一个例子中，我使用 filter-function 中的值 1 将 100% 的灰度应用到上图中。

.strawberry {
 filter: grayscale(1);
}

原始图像包含很多灰色，但我认为你可以看到滤镜的效果，因为现在所有的颜色都已被删除。

为了比较矩阵和 filter-function，公平起见，通过将 type 属性设置为 saturate 来使 feColorMatrix 更轻松地删除颜色。看如下部分代码：

<filter id="grayscale">
 <feColorMatrix type="matrix"
    values="(0.2126 + 0.7874 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0
            (0.2126 - 0.2126 * [1 - amount]) (0.7152 + 0.2848 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0
            (0.2126 - 0.2126 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 + 0.9278 * [1 - amount]) 0 0 0 0 0 1 0"/>
</filter>

不过，这绝对是 CSS filter-function 功能更容易使用的情况。我知道使用这个特定的矩阵唯一的原因是我在网上发现一个例子，不需要搜索 filter-function 的值为 1。

hue-rotate() 函数

hue-rotate() filter-function 将元素中每个像素的色调改变为你指定的数量。

hue-rotate() = hue-rotate( <angle> )

角度设置为度数，你需要将单位指定为 deg。 0deg 的角度使得元素不变，和 360deg(720deg, 1080deg, 1440p等)的任意倍数一致。

这个例子中我设置了角度为 255deg。

.strawberry {
 filter: hue-rotate(225deg);
}

该值将红色和黄色的花朵变成含有更多粉色，紫色和蓝色的花朵。

以下是 SVG filter 的对比。CSS 依旧更简单。不过这种情况并不多。

<filter id="hue-rotate">
 <feColorMatrix type="hueRotate" values="225"/>
</filter>

saturate() 函数

CSS 还提供了一个 saturate() filter-function，你可以使用它来更改元素饱和度。

saturate() = saturate( [ <number> | <percentage> ] )

和grayscale` 函数一样，该值定义了转让的比例。0% （或 0.0）导致完全饱和度的元素，100%（或 1.0）使元素保持不变。之间的值是线性的乘数效应。

这里我设置了 50%。

.strawberry {
 filter: saturate(0.5);
}

返回图片如下。

不允许使用负值，但是你可以提供大于 100% 或 1.0 的值。使得元素超饱和、再次使用 900% 饱和度的图像（ filter:saturate(9);）。

如同 saturate()，相应的 SVG filter 是比较简单的。

<filter id="saturate">
 <feColorMatrix type="saturate" values="0.5"/>
</filter>

我之前提到，你可以通过将 type 属性设置为 saturate，来使 feColorMatrix 更轻松地创建灰度图像。你只需要将值设置为 0，使得图像完全饱和，这与将其设置为 100% 灰度产生。

sepia() 函数

最后还有 sepia() filter-function 将图像转换为深褐色。

sepia() = sepia( [ <number> | <percentage> ] )

现在应该很熟悉，但是值定义了转换的比例。100%（1.0）是完全深褐色，而 0%（0.0）则保持图像不变。期间的值是效果间的线性乘数效应。

不允许使用负值，但是你可以提供大于 100% 或 1.0 的值，但不会添加效果。

这里我设置为 75%。

.strawberry {
 filter: sepia(75%);
}

图片如下：

对于没有 sepia 类型的 feColorMatrix，所有想要获得与使用另一个矩阵的深褐色效果。

<filter id="sepia">
 <feColorMatrix type="matrix"
    values="(0.393 + 0.607 * [1 - amount]) (0.769 - 0.769 * [1 - amount]) (0.189 - 0.189 * [1 - amount]) 0 0
            (0.349 - 0.349 * [1 - amount]) (0.686 + 0.314 * [1 - amount]) (0.168 - 0.168 * [1 - amount]) 0 0
            (0.272 - 0.272 * [1 - amount]) (0.534 - 0.534 * [1 - amount]) (0.131 + 0.869 * [1 - amount]) 0 0 0 0 0 1 0"/>
</filter>

我认为你同意 CSS 滤镜功能是这两个选项，即使 SVG 在更灵活配置。

总结

这四个 CSS 过滤器功能都是滤镜原语 feColorMatrix 的不同类型和值的映射。其中两个代替复杂的矩阵，而另外两个替换一个特定类型的原语。

我希望您同意，所有这四个过滤功能都足够容易理解和使用。我怀疑你会很难与他们合作，或弄清楚用来调整图像和图形的值。

下一周，我将通过查看四个更多的滤镜原语创建的效果。与今天四个功能一样，我相你会下周的功能通常与原语更若以使用。

【译】CSS 网格的春天

Wed, 10 May 2017 22:34:58 +0800

本文为译文，原文地址： http://jonibologna.com/spring-into-css-grid，作者，@jonitrythall

CSS 网格(Grid)最近一直受到很多的关注，我终于在过去的一个周末腾出时间来了解它的基本工作原理。道路很曲折，前途很美好（说真的，这是改变生活的东西），但是我在创建示例并分享的同时，整理了一些笔记。

这篇文章不是只看看这个布局功能有多强大，而是希望它在这混乱中把威胁因素移除，或者进入 CSS 网格。

点击这里查看完整的 Demo

制定一个计划

和学习任何网络新事物一样，我立即打开 Adobe Illustrator，感受自然，网格和紫色带来的灵感，我开始绘制一个基本的户外场景，然后开始尝试用 CSS 网格来实现。

下图为我的最终搞：

标记

标记由一个 class 名为 contain 的 div 主容器以及十二个 class 名为 spring 的子集 div 组成。HTML 和 CSS 代码片段如下：

<div class="contain">
  <div class="spring">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/sun.svg" alt="Sun" width="15%" />
  </div>
  <div class="spring">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/cloud_copy.svg" alt="Cloud" width="30%" />
  </div>
  <div class="spring">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/cloud_copy.svg" alt="Cloud" width="30%" />
  </div>
  <div class="spring"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/rain.svg" alt="Rain" width="60%" /></div>
  <div class="spring">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/rain.svg" alt="Rain" width="60%" />
  </div>
  <div class="spring">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/rain.svg" alt="Rain" width="27%" />
  </div>
  <div class="spring">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/dragonfly.svg" alt="Dragonfly" width="30%" />
  </div>
  <div class="spring">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/butterfly.svg" alt="Butterfly" width="30%" />
  </div>
  <div class="spring">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/dragonfly.svg" alt="Dragonfly" width="30%" />
  </div>
  <div class="spring">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/butterfly.svg" alt="Butterfly" width="30%"/>
  </div>
  <div class="spring">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/flower1.svg" alt="First flower" />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/flower2.svg" alt="Second flower" />
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/flower3.svg" alt="Third flower" />
  </div>
  <div class="spring">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/flowers2.svg" alt="Fourth flower" />
  </div>
</div>

$orange: #FB9C6F;

body {
  border: 2px solid $orange;
}

.contain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 2fr) 1fr 4fr;
  grid-gap: 2px;
  background-color: $orange;
}

.spring {
  padding: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF;
}

// Sun
.spring:nth-child(1) {
  grid-column: 1 / 5;
}

// Cloud 1
.spring:nth-child(2) {
  grid-column: 1 / 3;
}

// Cloud 2
.spring:nth-child(3) {
  grid-column: 3 / 5;
}

// Rain 1
.spring:nth-child(4) {
  grid-column: 1 / 2;
}

// Rain 2
.spring:nth-child(5) {
  grid-column: 2 / 3;
}

// Rain 3
.spring:nth-child(6) {
  grid-column: 3 / 5;
}

// Flowers 1
.spring:nth-child(11) {
  grid-column: 1 / 4;
  justify-content: space-around;
}

// Flowers 2
.spring:nth-child(12) {
  grid-column: 4 / 5;
}

// Just simplifying for smaller window
@media (max-width: 550px) {
  .contain {
    display: block;
  }

  .spring:nth-child(3),
  .spring:nth-child(5),
  .spring:nth-child(6),
  .spring:nth-child(7),
  .spring:nth-child(8),
  .spring:nth-child(11) {
    display: none;
  }

  img {
    width: 30%;
  }
}

在实现网格之前，布局是标准的状态，所有的图像堆叠在一起。如下图：

columns

使用网格时首先需要在 CSS 网格容器中声明它：

.contain {
    display: grid;
}

注意：这里也有 inline-grid 和 subgrid 作为选项。

这里将立即设置容器内所有的子元素为网格项。

初始网格基于使用 grid-template-columns 属性设置的四个相同大小的列。

.contain {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

repeat 函数允许缩短 1fr 1fr 1fr 1fr 的写法。

`fr` 单位

网格属性可以接受多个不同的单位值，本例中只使用了 fr。这个单位是超级聪明和灵活的，因为它将可用空间划分为分数，所以 1fr 1fr 1fr 1fr 将生成四个相同大小的列。

网格间距

网格间距由每个项目的 2px 橙色间距表示。间隙显示主容器的背景颜色，为橙色，外边框是 body 本身。每个网格包含一个白色背景的图像。

示例使用缩写 grid-gap 来匹配 grid-column-gap 和 grid-row-gap。该属性接受单个共享值或者两个不同的值，第一个参数表示行，第二个表示列。

从列起点和终点来排列项目

一旦在主容器上设置基本列，容器中的每个子元素 div 都可以单独进一步设计，已实现以下网格：

这是通过 grid-column-start 和 grid-column-end 属性或 grid-column 简写来指定元素的起点和终点来完成的。

例如，每个后代元素 div 起点和终点定义如下：

.spring:nth-child(4) {
  grid-column: 1 / 2;
}

.spring:nth-child(5) {
  grid-column: 2 / 3;
}

.spring:nth-child(6) {
  grid-column: 3 / 5;
}

第四列项目（第一个雨图像容器）的 grid-column: 1 / 2 ; 指示它在第一垂直网格线开始并在第二列结束，而第六项（第三个云图像容器）被设置为在第三垂直网格线开始并在第五列结束，使其成为其它的两倍。

最初这可能有点棘手，因为垂直线超过了实际网格列单元的个数。

太阳图像能够通过从第一垂直网线开始并在最后一行终止，即第五行，跨越所有四个可用单元格，从而占据全宽。

.spring:nth-child(1) {
  grid-column: 1 / 5;
}

没有必要对蜻蜓图像和蝴蝶图像做任何事情，因为所需的布局与主容器 .contain div 上的列声明一致。

rows

回到容器元素设置行，这是我来演示这个奇怪风景的最后一步。尽管初始列由相等的间距组成，但是行具有更多的变化。

前三行是最小行的两倍，而最大行是最小行的四倍，如下所示： grid-template-rows: repeat(3, 2fr) 1fr 4fr;

这个设计对于行的需求是相当轻的，这就是行样式所需的程度，但是行有自己的一组属性，有些甚至可以与列属性组合来创建速记法，保持 CSS 的简洁。

Flexbox

谈及 flexbox（并且最近创建了一个印刷视觉指南），我只想说，在这个示例中，flexbox 用于将图像在网格中居中，而网格和 flexbox 实际上可以一起使用。

使用如下，使得每张图片都在项目中居中：

.spring {
    display: flex;
    justify-content: center;
    align-items: center;
}

div 包含三个独立的花图像，flexbox 也水平划分它们。

.spring:nth-child(11) {
    display: flex;
    justify-content: space-around;
}

Robin Rendle 最近在 CSS-Tricks 上写了有关这个主题的一个很好的总结。

浏览器支持

目前浏览器支持状况：

资源

这里有一些比较好的扩展阅读：

Getting Started with CSS Grid Basic CSS Grid Concepts on MDN CSS Grid Layout on MDN The spec CSS Grid Garden

结尾

要了解 CSS Grid 的功能，还需要学习更多的东西，我迫不及待地写更多的内容，但希望这篇文章可以作为一个有趣的起点。

GTD 学习笔记

Tue, 18 Apr 2017 01:52:13 +0800

起由是由于最近事情比较多而且散，常常忙的焦头烂额还一头雾水。想起了之前同事推荐的软件 OmniFocus，从而花了周末的时间简单学习了下关于 GTD 的一些知识。

概念

GTD，Getting Things Done。是目前比较流行的一套时间管理方案。来自艾伦的同名书籍。其主要思想就是把你脑中的事情全都移出收集到一个统一的地方，然后进行管理分配后，一件一件的事情去做。最后再进行定期的回顾。最主要的是保证一个时间段只做一件事情，从而来达到高效的目的。

GTD 中可以鉴戒的地方有很多。不过所有的概念理论肯定不适合每一个人，所以还需要依据自己的行为模式不断的实践打磨，找到一套属于自己的管理体系。自我升级，也是一件有趣的事情。目前正在尝试，期待后面会有一些新的想法。

核心原则

GTD 的核心原则主要是收集，处理，组织，执行，回顾。

收集

是及时的把任何你需要做的，想到的事情都记录到收集箱（inbox）中。在这个阶段可以不用管是否有价值，因为后续还会有专门一个流程用于整理处理收集箱。记录的形式可以是纸质的或者是电子的，你喜欢就好。关键是及时，不要拖着等到忘记了，我们需要的是无负荷的头脑。这样的好处是你可以将大脑中的一些无关信息清空，专心做事。后续只需要对着收集箱来处理即可。

处理

将你收集箱中的信息快速进行处理。建议每天清理一次。处理的方法是从上往下逐条进行，不放回收集箱。操作中有一个重要原则，两分钟原则。任何事情如果少于两分钟，就马上执行。其它的，可以委托他人或者延期（及放入一个专门的处理箱中），或者给设定一个专门的情景，或者放入后期所需执行的日程表中，无用的信息就果断的删除。

组织

这是一个很重要的一步。对于上述中不能立即执行的，需要规划好下一步行动（action）。把任务切割成能做的一条一条。可以按情境（context）分类。那些不能一步执行完成的可以归属为一个项目，把需要等待他人才能继续进行的设置为等待，可能在以后需要做的设置为将来状态。总而言之，就是把之前收集到的任务全部整理归类好，便于后续执行。

这里可能还需要统筹规划下之前的收录是否有遗漏，项目中是否需要拆分等等事情。

这里我还特地去搜索了下为何按情境来分类，感觉还是不太适应。举例来说，有很多内容是需要在特定的环境下才能处理的，比如办公场所，家里，无网络状态等等。大概看了下自己，估计 90% 以上都是同一个情境的，意义不大。个人还是喜欢按四象限法则的重要程度来划分会多一点。

执行

这个就完全没有压力了。按着排好的任务一条一条往下做就好了。如果碰对紧急的统统塞进收集箱中，重要的，先保存工作场景，去处理，后续再回来。

回顾

这个也很重要的。自己在这方面一直做的不好，常常有种碌碌无为怀疑人生的错觉。通过回顾来了解项目的计划及进度，并做适当的调整。最终服务于长期目标。建议每天小结，每周一完整总结。

工具

适合 GTD 的工具实在太多了。这里不罗列了。需要注意的是不要花太多精力在选择工具上，到头来适得其反。

结语

好了，让我们来回顾一下 GTD 做了啥。把要做的事情都记录下来，集中处理你的需求，是立即完成还是归到下一步行动。然后保持及时的更新与回顾。就这么简单。

GTD 的其中一个精髓是立即就做。把那些大项目切割成一块块，然后我们按部就班的一步步执行下来就可以了。

CSS 模块化组织之道

Sat, 01 Apr 2017 00:00:00 +0000

前几天还在问朋友，CSS 近期有没有推出啥比较火热的，答，除了 Grid 好像没啥新东西。CSS 确实好像没有 JS 社区那么火热了。

由于 CSS 自身语言的特点，操作起来非常容易，但是等到项目到达一定程度的时候，想要优雅的管理 CSS，却也不见得那么容易。

大家平常在开发 CSS 的过程中，肯定遇到过下面的一些情况：

全局命名空间容易冲突
文件依赖管理的混乱
层级嵌套太深
样式被重置
大量重复、冗余、无用的代码

好的 CSS 设计应该具有可读性，维护性，扩展性和复用性。这几条其实也不用特地的去解释，在软件开发设计中并不陌生。大体来说，就是设计 CSS 的时候，我们需要考虑书写的条理是否清晰，后续修改内容是否低成本，新增内容又是否会打破现有逻辑。而在组织 CSS 的时候，尽量地多考虑下抽象与解耦，可以依据现有的内容，快速创建新的模块。

而现在对于 CSS 模块化的解决方案其实也有很多，比如 OOCSS，SMACSS，CSS Modules 以及 BEM 的命名规则。在这里，我也不一一介绍这些概念具体是什么了，有兴趣的同学可以自己去研究下，相关的文章已经太多了。

在如此多的选择之中，甚至可以说是混乱，我觉得最重要的是，各个团队应该依据各自的业务情况选择合适的方案，并做好团队中的约定。大家遵循同一套约定与规范，在合理解决问题的同时也避免出现使用混乱的情况。

下面来谈谈我自己平时项目中的一些解决方案。这也是平时开发经验和借鉴现有方案的组合。

闲话扯在前面的是，目前方案中推荐使用预处理器等方式。虽然即使不用也能满足绝大多数场景，但是有更优雅而便捷的方式何乐而不为呢。

首先，目录划分。将 CSS 分为两类，通用模块和业务模块，可以适当地分为多个小文件。

通用模块中存放公共部分，同一类别独自一文件，可以是表示结构的，也可以是表示主题的，唯独表示页面具体逻辑的部分，不能放在该目录下。
业务模块则指具体页面对应的 CSS 文件。一个页面单独对应一个 CSS 文件。通过 @import 引入相关的通用模块子文件及需要更细粒度拆分的 CSS 文件。

如下图所示，common 中存在的为共用部分文件，而 page 下则具体对应到指定的页面。Demo/style.css 为对应 Demo 页面中的 CSS 文件。其中 style.css 可能还 @import 了 common/form.css，common/btn.css 以及 Demo/css 目录下的文件。

    ├── common
    │   ├── btn.css
    │   ├── common.css
    │   ├── form.css
    │   └── layout.css
    └── page
        └── Demo
            ├── css
            │   ├── list.css
            │   └── search.css
            └── style.css

其次，在命名方式上，主要以原子类 + BEM 的方式来命名。这里的原子类，不是像 mr10， pull-right 这类方式，而是带有固有前缀的命名方式。好处是可以通过命名来快速识别所属位置及功能。比如以 ly- 前缀来表示和页面布局相关结构，如两栏三栏。再比如 pos-mr10，pos-fl ，sty-fiz12等等。这个可能目前需要团队内约定。

至于具体到达一个组件级别的时候，直接推荐使用 BEM 方式来维护。BEM 真心强大，虽然初识乱花渐欲迷人眼。BEM 后续再单独拆出来讲吧。

来看一些代码的片段加强理解。

$orange: #fe7800;

@function Mpercentage($value){
    @return percentage($value/640);
}

// btn.css
.btn-full{
    display: inline-block;
    width: 100%; height: 48px; line-height: 48px;
    text-align: center; font-size: 1.8rem;
}
.btn-inline{
    display: inline-block;
    padding: 0 Mpercentage(60);
    height: 30px; line-height: 30px;
}
.btn-purple{
    color: #fff;
    background: #9a78c8;
}
.btn-white{
    color: #666;
    background: #fff;
}

// login.css
.login-form{
    font-size: 1.4rem;

    &__item{
        position: relative;
        margin-bottom: Mpercentage(20);
    }
    &__item_btn{
        margin-top: Mpercentage(30);
    }
    &__item_tips{
        line-height: 35px; font-size: 1.3rem;
        color: #666;
    }
    &__input{
        display: block;
        padding: 0 3%;
        width: 93%; height: 43px; line-height: 43px;
        font-size: 1.5rem;
        border: 1px solid #dadada;

        &:focus{
            border-color: #baacdf;
        }
        &.form-error{
            border-color: $orange;
        }
    }
}

最后，通过函数、组件模块的抽离来实现页面的快速重组。这里其实蛮多都依赖到预处理器的特性了，从而使得 CSS 可以变得更加灵活。

至此，主要概括起来就是通过文件与命名来解决冲突问题，通过预处理器来解决维护扩展问题。

那么问题来了，你发现了上述中几个不能满足的场景了么？

挖一挖 submodule

Sat, 02 Jul 2016 14:26:44 +0800

在很长的一段时间内，对submodule的概念含糊不清。特别是 submodule 和 subtree 这两个的区别。今天正好有时间来理一理。

子模块（submodule）

为了解决项目中的依赖问题。使得更加方便的维护与管理。子模块允许你将一个 Git 仓库作为另外一个 Git 仓库的子目录，从而保持相对独立的提交记录。

子模块有点类似与一个软链。你记录他们当前确切所处的提交，但是不能记录一个子模块的 master 或者其它符号的引用。在 git 的存储信息中，submodule 的属于 160000 模式，这在Git中是一个特殊模式，基本意思是你将一个提交记录为一个目录项而不是子目录或者文件。

用法

submodule 的使用还是挺方便的。.gitmodules 文件保存着项目 URL 与已经拉取的本地目录之间的映射。

git submodule add 来增加新模块，git submodule init 用于初始化，git submodule update 用于更新，就是删除的时候不太方便。而另外一个更新维护子模块的时候也有些繁琐，也常常会出一些坑。

挖坑说明

当你 pull master 之后，如果 submodule 有变更，都需要记得submodule update一下，不然又会提交旧的信息回去了。这本质上，都是因为它在主master上都是已 link 的方式存在。
submodule 的时候也有点费劲的其实。当你进入 submodule 的目录，其实不会切到任何分支，HEAD 处于游离的状态，所以在改动之前需要 checkout master，再来改动。

subtree

上面讲了这个多，其实官方推荐使用 subtree 来代替 submodule。两者的区分在于，submodule是把一个 commit 嵌入到当前项目的子目录中，只相当于一个 Link，而 subtree 是合并子项目到当前项目的子目录中，是一个完整项目的拷贝。

subtree 除了命令长一点外，还是有挺多优点的。比如

clone 的时候不需要 init
没有类似的 .gitmodule 文件
管理上更加方便一些

用法

subtree 的使用相对复杂一些。这个依旧省略了各种操作的说明。具体翻看 API。

关联：

git remote add -f <子仓库名> <子仓库地址>
git subtree add --prefix=<子目录名> <子仓库名> <分支> --squash

更新

git fetch <远程仓库名> <分支>
git subtree pull --prefix=<子目录名> <远程分支> <分支> --squash

推送
```
git subtree push --prefix=ai ai master
```

参考文献

CSS哲学伪命题

Wed, 24 Feb 2016 00:43:23 +0800

标题党。这篇文章断断续续的修改过好几次，也没有满意，本来是想总结一下我这些零散的 CSS 知识结构，可能由于知识体系不全面，总是没能把知识点串联成一个通顺的内容。贴出来权当大家一起讨论下“前世今生”。文章后续可能会不定时更新。

CSS 作为 Web 的基础部分，极其容易上手。但是 CSS 并不算的上是一门编程语言，在语言能力上略显薄弱，往往导致整体的维护性变差。但是这并没有使得大家停止对 CSS 的探索，从命名规范，目录架构，预处理器(如SASS)，后处理器（PostCSS），模块化等等的方向上，努力把 CSS 变得更好。

关于自我历程

其实我自己并没有系统的学习过 CSS（虽然我现在也不知道如何系统的学习），看了几个视频，扫了下中文版的 API，然后就开始了切图生涯，很多的知识点也都是后来一些零散的博客中了解到的。这过程中，的的确确踩过不少的坑，有的填了，有的继续祸害着项目里其它的同学。也导致我在很长的时段时间里都是走在一个混乱无序的 CSS 书写当中。

最早遇到的大概的是命名的问题了吧，因为本身积累的词汇量就少，动不动就没单词可用了。那个时候好像也就是网上列出一大堆像menu， siderbar之类的“命名大全”来模仿。再到后来接触到了 Bootstrap 这种比较系统的框架（里面有好多可以值得借鉴的地方），而后又看到一些按类别划分文件，再配有特有的前缀的管理方式(那个时候还并不知道 SMACSS 的名词)，还有一些原子化，把功能和样式分离等等的。在 SASS 兴起的时候其实挺兴奋的，因为终于感觉有了点编程的能力，当然了，对变量，嵌套，mixins等等的使用，很大程度上提高了编程效率。在后来同事的分享中，又了解了 BEM 的命名方式（初看很乱，了解后有一种豁然开然的感觉，细细回想起来，也就是大家约定一套共用的命名规范）。以及通过 PostCSS 去实现 CSS 中一些自动处理的任务。在 React/ES6/Webpack 出现后，使得很大一部分程度上，CSS 写在 JS 中的方式也开始在特定的场合中频频出现。

以上，通通出现过我的项目中，在项目切换维护的时候，那感觉，心如刀割。并不是说上面涉及到的知识点有对错的问题，只是在一个团队中，如果没有一些统一的架构和约定，往往到项目的后期会变得越来越不稳定。这不禁又让我想起了 CSS 的学习曲线（像PHP？又来黑了），样式大家都能写，能愉快的维护，又是另一个层次了。

个人觉得 CSS 中有两个比较重要的点，语义化和可维护性，而最终都是为了提高开发的效率。

语义化很大一部分程度上是为了阅读需要，简易明了。建议团队内还是要尽量的保持风格一致。其它的，可以看一下CSS语义思维的内容，这里不展开讲了。

可维护性真的是一个很虚的概念，但是涉及到了多方面的各个点。比如，该怎么保持项目的简单性，灵活性，而同时又有足够的扩展能力？又比如如何抽取模块，是以功能划分还是以样式结构？如何重用样式？如何防止样式被覆盖，避免冗余代码等等。

除了一次性的单页面这种外，一般项目类型的，都建议在开始的时候就搭好底层，统一一下整体风格与使用习惯，保持良好组织结构，命名规范，不然越往后面，可能会遇到更大的问题。

比如，对文件做一个层次划分

基础框架（reset，iconfont，栅格）
通用模块（原子，统一规范的模块）
页面样式（继承通用模块）

采用类似 BEM/SUIT 等等的命名方式等等。

现有的技术选择

其实我们在平时应该或多或少的接触过一些 SASS, Compass, BEM, SMACSS, OOCSS 的概念与设计模式。当然并没有一种解决方案是绝对的，合适当前的项目就可以了。

BEM

用于解决项目命名规则问题。BEM 通过已block(块)，element(元素)，modifier(修饰符) 的概念，使用连接符串联父级块作为前缀，来实现功能模块命名的唯一性。有兴趣的同学可以看一下 BEM的进化史。发现一句话并不太好表述清楚，想要具体了解的同学可以移步官网。

BEM 这种唯一性以及元素间的平级展开，往往在稍微复杂一点的项目里，就会把名字命名的很长很长。目前也有很多是在 BEM 的基础上衍生出来的一些方式(如 SUIT)。

OOCSS （Object Oriented CSS）

面向对象 CSS。是一种已面向对象的维护方式去管理组织 CSS 代码。其哲学理念是模块化，功能单一性，关注点分离。

OOCSS 中有两个重要的原则

结构和外观分离。样式尽量独立，和 DOM 无关
容器和内容分离。CSS 只关注内容

OOCSS 与 SASS 结合是一个不错的选择，充分强大。

SMACSS(Scalable and Modular Architecture for CSS)

可扩展和模块化 CSS。把 CSS 样式划分为若干个不同类别的文件，如基础，布局，模块，主题等等。在加上一些特有前缀的组合。

ACSS (Atomic CSS)

原子化 CSS。遵循关注点分离原则。

CSS 模块化

随着 React 的迅速引爆，其它关于 CSS 的另一种使用方式也在兴起。将样式在 JS 中定义。借助 require/import 而解决了 CSS 中的命名空间的问题，使得单文件变得简单清晰。而通过组合，也可以实现快速的重复利用。甚至有些 CSS 可以单独与组件去绑定。

以及其它的一些方式。上述的方式，是比较让我眼前一亮的感觉。

未来走向

待补充…

扩展阅读

Rollup 试炼之路

Thu, 14 Jan 2016 00:00:00 +0000

最近看到挺多次 Rollup 这个词，再也架不住好奇，简单的学习实践了一下。完整项目库地址请戳。

PS: ES6 对应 ES2015，请忽略这些细节。

什么是 Rollup

Rollup Github 地址。根据官网的解释，Rollup 是下一代 ES6 模块化工具。ES6 之后，模块化的写法将更加的趋势化，我们会将以前的文件切割成多个的细小模块。那么如何来高效的组织管理这些文件，又有了很多不同的方案。现有的模块化打包已经有如 Browserify 和 Webpack ，那为啥还需要一个新的呢？

优势在哪

可以生成 AMD，CMD，UMD 甚至 ES6 模块文件。
Tree-shaking

tree-shaking(有知道中文怎么翻译的同学欢迎留言告知一下)，大致意思就是打包的时候会移除未使用到的 ES6 exports模块。想要更深入的了解 tree-shaking 的话，可以看下博士的这篇文章Tree-shaking with webpack 2 and Babel 6。

话题转回来，Rollup 正是使用了 ES6 的模块特性，所以会使打包后的文件体积更小。如果是 CommonJS 的则需要先通过插件转为 ES6 后处理。

对了，值得多说一句的是，Rollup 打包后的代码没有 require，import的，而是直接插入到文件中。

如何引用

Rollup 支持 CLI 和 JS API 方式，同时提供了一些插件如解决压缩 babel 转换等问题。(PS: 此处讲解采用 API 的方式)

首先在项目根目录创建 rollup.js 文件，安装 npm 的相关依赖

var rollup = require('rollup');
var babel = require('rollup-plugin-babel');
var uglify = require('rollup-plugin-uglify');

rollup.rollup({
    entry: 'src/index.js',
    plugins: [
        babel({
            exclude: 'node_modules/**',
            presets: [ "es2015-rollup" ]
        }),
        uglify()
    ]
}).then(function(bundle) {
    bundle.write({
        // output format - 'amd', 'cjs', 'es6', 'iife', 'umd'
        format: 'umd',
        moduleName: 'dqSystem',
        sourceMap: true,
        dest: 'dqSystem.js'
    });
});

rollup 方法可以配置一些入口文件，依赖插件等，返回的是 bundle 的 Promise 方法。bundle 方法中可以配置文件相关参数，同时也可以生成多份版本文件。具体的 API 参考官网

使用 node rollup.js 执行打包。另外 Rollup 好像还不支持 watch 的配置，我采用了 npm-watch 的方式跳过了。

采过的坑

试用时间不长，且内容比较简单，可能没碰到一些奇怪的点

Rollup.js 中可以 catch 下 error 方便调试错误
UMD/IIFE 模式中需要moduleName
Rollup 的模块引用只支持 ES6 Module，其他的需要采用 npm 和 commonjs 的插件去解决

自己YY下

不知道拿 Rollup 和 webpack 相比合不合适。我个人还是挺喜欢 webpack 的打包方式的，关键是功能强大，不过相比，配置也巨复杂。而 Rollup 的配置就简单很多了。实验的项目文件不大，所以没看出来两者在压缩体积上是否有明显的差异。Rollup 的tree-shaking也将会在 webpack2 中支持。所以好像并没有什么一定非它不可的感觉。

套用朋友说的一句话，“任何产品的生命周期都得看社区的活跃程度”。从 github 的 fock 人数上，还是持有很大的保留意见的，所有我个人可能会在一些小型或者快速项目中做尝试而已。

参考文章

ES6 - 字符串模板

Mon, 14 Dec 2015 00:00:00 +0000

ES6 - 字符串模板

写在前面

关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了。虽然说各大浏览器还没有全面的支持，不过这并不妨碍我们一颗想要撸一把的心。在后端，可以使用 Node.js(0.12+)或 io.js, 前端的话，也可以使用Babel 或Traceur 进行语法预转义成 ES5使用。

关于该系列（不知道能不能成为一个系列，总是各种懒），会没有规律的挑选一些内容来学习。欢迎大家积极纠错，留言探讨。

模板字符串(template strings)

ES6 中引进的一种新型的字符串字面量语法 - 模板字符串。书面上来解释，模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量。简单来讲，就是增加了变量功能的字符串。

先来看一下以前我们对字符串的使用：

    ```
    /**
     * Before ES6 字符串拼接
     */
    var name = '丁香医生';
    var desc = '丁香医生是面向大众的科普性健康类网站';
    var html = function(name, desc){
        var tpl = '公司名：' + name + '\n'+
                '简介：'+ desc;
        return tpl;
    }
    ```

而现在：

    ```
    var html = `公司名：${name}
        简介：${desc}`;
    ```

很简洁吧。引一段 MDN 对于模板字符串的定义：

    模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来。

而占位符${}，可以是任意的 js 表达式（函数或者运算），甚至是另一个模板字符串，会将其计算的结果作为字符串输出。如果模板中需要使用$,{等字符串，则需要进行转义。

看个例子就明白了。

    ```
    var x = 1;
    var y = 2;
    `${ x } + ${ y } = ${ x + y}`  // "1 + 2 = 3"
    ```

不同于普通字符串，模板字符串还可以多行书写，模板字符串中所有的空格，新行，缩进都会原样的输出在生成的字符串中。

而单纯的模板字符串还存在着很多的局限性。如： * 不能自动转义特殊的字符串。（这样很容易引起注入攻击） * 不能很好的和国际化库配合（即不会格式化特定语言的数字，日期，文字等） * 没有内建循环语法，（甚至连条件语句都不支持，只可以使用模板套构的方法）

标签模板(tagged template)

为此，引出了标签模板的概念。标签模板则是在反引号前面引入一个标签（tag）。该标签是一个函数，用于处于定制化模板字符串后返回值。就拿上面对特殊字符串举例。

    ```
    /**
     * HTML 标签转义
     * @param {Array.<DOMString>} templateData 字符串类型的tokens
     * @param {...} ..vals 表达式占位符的运算结果tokens
     *
     */
    function SaferHTML(templateData) {
      var s = templateData[0];
      for (var i = 1; i < arguments.length; i++) {
        var arg = String(arguments[i]);
        // Escape special characters in the substitution.
        s += arg.replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;");
        // Don't escape special characters in the template.
        s += templateData[i];
      }
      return s;
    }
    // 调用
    var html = SaferHTML`<p>这是关于字符串模板的介绍</p>`;
    ```

标签函数会接收多个参数。 * 第一个参数是包含了字符串字面量(即那些没有变量替换的值)的数组 * 后面的参数是已经替换后的变量值

改一下例子1

    ```
    var name = '丁香医生';
    var desc = '丁香医生是面向大众的科普性健康类网站';
    tag`公司名：${name}简介：${desc}`
    ```

tag 的参数则分别为 [‘公司名：’,‘简介：’], ‘丁香医生’, ‘丁香医生是面向大众的科普性健康类网站’。

有了此类方法，就大大的增加了控制的权利。如上面说的国际化库甚至循环语句。

浏览器兼容性

服务器端， io.js 支持
浏览器端， FF34+ , chrome 41+
移动端 IOS 8, Android 4.4
IE Tech Preview

扩展阅读

ES6 - 解构赋值

Mon, 14 Dec 2015 00:00:00 +0000

在解释什么是解构赋值前，我们先来看一下， ES5 中对变量的声明和赋值。

var str = 'hello word';

左边一个变量名，右边可以是字符串，数组或对象。

ES6 中增加了一种更为便捷的赋值方式。称为 Destructuring 。好像大家普遍翻译为解构。解构赋值允许我们将数组或对象的属性赋予给任何变量，该变量的定义语法与数组字面量或对象字面量很相似。举个例子可以直观的说明。

let [speak, name] = ['hello', 'destructuring'];
console.log( speak + ' ' + name ); // hello destructuring

数组的解构赋值

用更加直白的话来描述就是，等号两边保持相同的形式（数组对应数组，对象对应对象），则左边的变量就会被赋予对应的值。如果对应的右边值缺失，缺失部分变量值为 undefined ,如果右边值多余，依旧能够正常解构。

// ES6 中
let arr = [1,2,3,4,5];
let [el1, el2] = [arr];
// 或者
let [el1, el2] = [1,2,3,4,5];
// el1 => 1, el2 => 2

解构赋值也是可嵌套的：

let value = [1, 2, [3, 4, 5]];
let [el1, el2, [el3, el4]] = value;

同样可以通过简单地在指定位置省略变量来忽略数组中的某个元素：

let value = [1, 2, 3, 4, 5];
let [el1, , el3, , el5] = value;

更进一步，默认值同样也可以被指定：

let [firstName = "John", lastName = "Doe"] = [];

ES6中，提供了一种将右侧多余的值以数组的形式赋值给左侧变量的语法——“rest“模式：

let [head, ...tail] = [1, 2, 3, 4];
console.log(tail);  // [2, 3, 4]

当默认值不存在，变量值就等于 undefined

let [missing] = [];
console.log(missing);  // undefined

这里的数组，指的是部署了 [Iterator](http://www.2ality.com/2015/02/es6-iteration.html) 接口的数据结构。

对象的解构赋值

和数组的用法相类似，一个主要的不同点是，对象是无次序排列的，所以变量必须和属性名相同。

let person = {firstName: "John", lastName: "Doe"};
let {firstName, lastName} = person;

解构另一个特性是，变量 keys 可以使用计算后的属性名，但是如果你对这容易混淆的话，不建议使用。

let person = {firstName: "John", lastName: "Doe"};
let {firstName: name, lastName} = person;
// `name`变量将会被声明为 `person.firstName` 的值

函数参数的解构赋值

函数的参数也可以解构赋值。

function add({x: 0, y: 0}){
    return x+y;
}
add({1,2}); // 3

null 和 undefined

当尝试解构 null 和 undefined 的时候会报错。这是因为使用对象赋值模式时，被解构的值必需能够转换成一个对象（object）。大多数的类型都可以转换为一个对象，但null和undefined却并不能被转换。

其它

解构赋值的好处有很多，比如

两个值的交换
函数参数默认值
函数返回值
正则匹配的返回值
快速处理 JSON 数据
遍历Map结构

ES6 的解构赋值给 JS 的书写带来了很大的便利性，同时也提高了代码的可读性。但是也需要注意一些问题，避免适得其反。 * 关于圆括号的问题，欢迎翻看阮一峰老师的博客 * 解构的嵌套尽量不要太深 * 函数有多个返回值时，尽量使用对象解构而不用数组解构，避免出现顺序对应问题 * 已声明过的变量不能用于解构

浏览器支持

http://kangax.github.io/compat-table/es6/#destructuring 不完全统计： * IE NO * FF 38+ (大部分) * CH/OP NO * Webkit * SF 9+, 8部分 * IOS8 部分

PS: 整理的时候发现以前还保留着这样一份文章，无新，基本参考下述文章内容。仅供学习。

参考文章

跨域那些事

Sun, 30 Nov 2014 00:00:00 +0000

同源策略

javascript 语言在设计之初为了安全考虑，不允许调用其它页面的对象。跨域是由 javascript 语言安全限制中的同源策略造成的。 同源策略指的是，一段脚本只能读取来自同一来源的窗口和文档的属性，(同一来源指的是域名、协议和端口号的组合) 简单来讲，即不允许同一域名下的不同端口号，不同协议（http,https），不用子域名（www.dxy.cn 和 app.dxy.cn）及域名和域名对应的 ip 也不允许。

解决跨域的原理

HTML 中，静态资源是没有跨域限制的。在 HTML DOM 中，script 标签是可以跨域访问服务器上的数据的。所以我们可以手动插入 script 标签等方法来伪造。不过，有个限制是，服务器返回内容不能单纯为一个 json 字符串，可定变量或函数实现，如: var json = {"type":"json"} 或 json({"type":"json"})。jsonp 即采用后者形式。

解决方案

手动插入script标签的形式。
jsonp … 它能对老的浏览器也保持支持。但是，只支持 get 不支持 post 等其它类型的 HTTP 请求。
跨域资源共享（CORS）使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求的成功或者失败。服务器端对于 CORS 的支持，主要通过 Access-Control-Allow-Origin 进行
```
var xhr = new XMLHttpRequest();
xhr.open('get', '/xx', true);
xhr.send();
```
iframe + domain 对于主域相同而子域不同，则可以只用 document.domain 来实现跨域。

e.g. 在 http://a.com/test.html 和 http://sub.a.com/test2.html 中分别加上 document.domain = a.com，然后 test.html 页面中创建 iframe 来控制iframe的内容文档。

注意的是：
- domain 指向的是主域。（如 a.com ， www.a.com 其实是二级域名）
- document.domain 需设置为自身或更高一级的父域
- 浏览器限制2 为，不同域的框架之间是不能进行 js 的交互的(可取到 window对象，但取不到 window 对象的属性和方法,PS: html5中的 postMessage 例外)。
window.name window.name 值在不同页面（包括不同域下）加载后依旧存在(当然关闭窗口后就销毁了)。注意的是，window.name 由大小限制，一般为2M。
HTML5 window.postMessage
隐藏 form, target 指向一个隐藏的 iframe

DPI 和 PPI

Mon, 08 Sep 2014 00:00:00 +0000

本文所涉及的内容在网上已有很多介绍。可相互借鉴。笔者仅为整理知识体系所用。

PPI（Pixel Per Inch）

图像分辨率所使用的单位。在图像中每英寸所表达的像素数目。

DPI（Dot Per Inch）

打印分辨率使用的单位。每英寸所表达的打印点数。

像素（Pixel）

一种用来计算数码影像的单位。

分辨率

单位长度中，所表达或撷取的像素数目。

DPI用来表示输出设备的输出精度，如打印机，显示器
DPI表示的是像点/英寸（每英寸长度上有多少个打印点或像点）
PPI用来表示输入设备的输入精度，如扫描仪，数码相机
PPI表示的是　像素/英寸（每英寸长度上有多少个像素）

参考资料

主流CSS image比较

Fri, 29 Aug 2014 00:00:00 +0000

在还原设计图的时候，难免会碰到一些样式图片的引用。如何来对这些图片做优化呢？本文简单的梳理了一下目前几种比较常用的使用方式。注： 1. 有更好的方法的话，欢迎补充。 2. 下文未对性能问题做真实的测试，请保持一颗好奇的心，并告诉我们）

CSS Sprite

这是目前使用比较多的方式。也是我个人认为相对最优的一种解决方式。当然，这里的最优指的是特定环境。比如移动客户端，就不一定要这么干。CSS Sprite 是将页面中所使用到的小图片整合到一张大图上去。大家都知道，客户端向服务器发送请求是很有代价的，特别是在移动端，所以，sprite 的提出是为了减少 http 请求数，从而加快页面加载速度。

使用方式

先将小图片整合到一张大图上
css 引入背景图片
然后依据图标的位置使用 background-position 进行定位

使用技巧

切图的时候就构思拼接好图片（不然后期抓心挠肺的，当然，善用工具的出门右转）
排序有序，便于后期维护(个人建议图标从上到下排列)。有利于 background-position 定位
定位时避免使用 right, bottom 等（后期图片尺寸变化后就不一定了好不）
合理预留空白位置（空太多文件变大，太小引起图标重叠）

优点

减少 http 请求。（这个是最大的优点）
对你存在的图片一目了然（不知道这个算不算，如改进版3.0拿到的图哪些图标是之前已存在不需要重新切了的）

缺点

图片合并定位费时费力（谁用谁知道啊）

其它

github 上有个 grunt 合并 sprite 的组件，可以看看

image data URI

即将图片资源转换为 base64 字符串格式嵌到页面或样式中。这样连图片的请求链接都省了。如：

使用方式

    /** 数据格式 **/
    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC

    /** 样式引用 **/
    .icon{
      width: 30px; height: 30px;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/IwwHK8QatsYlGfIhezM9WOc8jSQAoTvMqTzY1u+Z6449gA9r24D4iZ6wwAAAAAElFTkSuQmCC);
    }

标签语法：

data : 取得数据协议
image/png : 取得数据的协议名称（注意这里也图片资源也可以使用字体等）
base64 : 数据编码方式
iVBOR… : 编码后数据

Base64编码自行百度科普吧。

优点

减少 HTTP 请求
避免某些文件跨域
无图片缓存等问题(但是一般 css 也是有缓存的好不好)

缺点

兼容性（ IE6,7 不兼容, 可以使用 MHTML 来解决）
浏览器不会缓存该图片（这里是否是这样我存有疑惑，因为好像看上去也是第一次加载的时候慢）
增加 css 文件大小
编码成本及维护(展示不直观，目前需手动转换，我暂时不知道自动替换之类的插件)
之前有看到过篇测评说性能上比 sprite 微弱一些，一时间找不到链接

综合起来，data URI可以使用在 * 图片尺寸很小，使用一条 http 请求有点浪费，如渐变背景框 * 图片在全站大规模使用，且很少被更新的，如 loading 图

在线转换工具

更新

github 资源 sus 可转换 data URI

参考资料

MDN - data URIs

icon fonts

由于移动端设备拥有不同分辨率，PPI 等引起的问题，常常需要针对不同屏幕分辨率来调整优化，如使用 @2x 图片， max-width 限制等。采用 css @font-face 用来显示 icon 也不失为一种好办法。因为 icon fonts (字体)是矢量图形，所以不受分辨率的影响，同时可以做到完美缩放；当然，也可使用在 WEB 端。

优点

文件小
加载性能好
支持 css 样式
IE6/7 下也支持

缺点

样式限制，使用扁平化风格
移动端还存在不兼容问题 (兼容表，作者不详)
少量移动设备和 icon fonts 字符编码冲突
FF和 IE9 下跨域问题
性能问题

使用方法

制作字体文件
- 可以利用字体工具手动制作
- 也可以利用在线工具自动生成
在 css 中引用，如下

引入字体文件

    @font-face {font-family: 'iconfont';
        src: url('iconfont.eot'); /* IE9*/
        src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('iconfont.woff') format('woff'), /* chrome、firefox */
        url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
    }

再定义一个 icon-* 通配我们所有图标的共有 CSS 样式，

    [class^="icon-"], [class*=" icon-"] {
      display: inline-block;
      speak: none
      font-family: "iconfont";
      font-size: 16px;
      line-height: 1;
      font-style: normal;
      /** 字体图标出现锯齿的问题： */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

最后是利用 :before 来注入每个 icon 对应的字体编码

    .icon-bell:before {
      content: "\003432";
    }
    .icon-search:before {
      content: "\003433";
    }

前端叨叨客 on 前端叨叨客

Rollup 和 Webpack 之 Tree Shaking

概念

Rollup

Webpack

TODO

ES6 proxy

ES7 Decorators

作用 & 结尾

四个调节颜色的 CSS 滤镜

feColorMatrix 滤镜原语（Filter Primitive）

grayscale() 函数

hue-rotate() 函数

saturate() 函数

sepia() 函数

总结

【译】CSS 网格的春天

制定一个计划

标记

columns

fr 单位

网格间距

从列起点和终点来排列项目

rows

Flexbox

浏览器支持

资源

结尾

GTD 学习笔记

概念

核心原则

收集

处理

组织

执行

回顾

工具

结语

CSS 模块化组织之道

挖一挖 submodule

子模块（submodule）

用法

挖坑说明

subtree

用法

参考文献

CSS哲学伪命题

关于自我历程

现有的技术选择

BEM

OOCSS （Object Oriented CSS）

SMACSS(Scalable and Modular Architecture for CSS)

ACSS (Atomic CSS)

CSS 模块化

未来走向

扩展阅读

Rollup 试炼之路

什么是 Rollup

优势在哪

如何引用

采过的坑

自己YY下

参考文章

ES6 - 字符串模板

ES6 - 字符串模板

写在前面

模板字符串(template strings)

标签模板(tagged template)

浏览器兼容性

扩展阅读

ES6 - 解构赋值

数组的解构赋值

对象的解构赋值

函数参数的解构赋值

null 和 undefined

其它

浏览器支持

参考文章

跨域那些事

同源策略

`fr` 单位