8.6k 字 8 分钟

# Babel 配置用法解析 写前面：babel 默认是只会去转义 js 语法的，不会去转换新的 API，比如像 Promise、Generator、Symbol 这种全局 API 对象，babel 是不会去编译的。在我学会了 babe 配置 l 大法之后，看我一会儿怎么把这些新的 API 给它编译出来就完事儿了。 # 本文基于 babel7.8.0。我主要记录下 babel 配置需要的一些重要的模块儿包，来一步步进行 babel 的一个配置解析 (以 babel.config.js 方式配置为例)。 # 本文主要涉及到的一些 babel 包： # @babel/core ， #...
5.6k 字 5 分钟

Babel 是一个广泛使用的转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。下面是一个例子。

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel 将其转为普通函数，就能在现有的 JavaScript 环境执行了。

4.4k 字 4 分钟

最近在研究 express，学着使用 cookie，开始不会用，就百度了一下，没有百度到特别完整的解答。查阅了 express 的 API，综合了网友的博客，解读了 cookie-parser 的源码，以及使用 WebStorm 和 Chrome 验证，终于明白了 express 中 cookie 的使用。顾此篇文章即是分享也是总结。

28k 字 25 分钟

一直想写一篇介绍设计模式的文章，让读者可以很快看完，而且一看就懂，看懂就会用，同时不会将各个模式搞混。自认为本文还是写得不错的，花了不少心思来写这文章和做图，力求让读者真的能看着简单同时有所收获。

设计模式是对大家实际工作中写的各种代码进行高层次抽象的总结，其中最出名的当属 Gang of Four (GoF) 的分类了，他们将设计模式分类为 23 种经典的模式，根据用途我们又可以分为三大类，分别为创建型模式、结构型模式和行为型模式。

有一些重要的设计原则在开篇和大家分享下，这些原则将贯通全文：

  1. 面向接口编程，而不是面向实现。这个很重要，也是优雅的、可扩展的代码的第一步，这就不需要多说了吧。
  2. 职责单一原则。每个类都应该只有一个单一的功能，并且该功能应该由这个类完全封装起来。
  3. 对修改关闭，对扩展开放。对修改关闭是说，我们辛辛苦苦加班写出来的代码，该实现的功能和该修复的 bug 都完成了，别人可不能说改就改；对扩展开放就比较好理解了，也就是说在我们写好的代码基础上，很容易实现扩展。

设计原则可以参考另外一篇文章设计模式 - 七大原则

设计模式这里总结了 23 种：

  • 创建型模式，共五种： 工厂方法模式 、 抽象工厂模式 、 单例模式 、 建造者模式 、 原型模式 。

  • 结构型模式，共七种： 适配器模式 、 装饰器模式 、 代理模式 、 外观模式 、 桥接模式 、 组合模式 、 享元模式 。

  • 行为型模式，共十一种： 策略模式 、 模板方法模式 、 观察者模式 、 迭代子模式 、 责任链模式 、 命令模式 、 备忘录模式 、 状态模式 、 访问者模式 、 中介者模式 、 解释器模式 。

1k 字 1 分钟

# 开闭原则 COP

  • 开闭原则（Open Closed Principle）是编程中最基础、最重要的设计原则。
  • 模块和函数应该对扩展开放（对提供方），对修改关闭（对使用方）。用抽象构建框架，用实现扩展细节。
  • 当软件需要变化时，尽量通过扩展软件实体的行为来实现变化，而不是通过修改已有的代码来实现变化。
  • 编程中遵循其他原则，以及使用设计模式的目的就是遵循开闭原则。
11k 字 10 分钟

两个月之前在项目中就开始使用 Eslint ，当时直接 copy 别人的 .eslintrc.js 文件，感觉好复杂，一直没吃透，中间去把 Eslint 官方文档看了数遍，依然无果。今天刚好没事，回过头来想整理一下 Eslint 的使用，突然发现变得好简单。总结下在这过程中走得弯路。

  • 先要知道 Lint 是什么，Eslint 又是什么；
  • 因为想要的太多（想把 Eslint 官方文档里每个字都记住）就容易抓不住重点（目的是在项目中使用 Eslint，这仅仅是个工具，工具又怎么会搞的太难）。
2.5k 字 2 分钟

# Vue 动态组件 component :is 的使用

vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为：

<component :is="componentTag"></component>
data() {
    return {
        componentTag: '',
    }
}

componentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在 component 标签出现的位置，渲染该组件。

2.2k 字 2 分钟

# list-style-type 属性定义及用法

在 css 中，list-style-type 属性是使用来设置列表项标记的类型，在有序列表和无序列表中经常都会使用该属性。

目前，所有主流浏览器都支持 list-style-type 属性，但是任何版本的 Internet Explorer（包括 IE8）都不支持属性值 "decimal-leading-zero"、"lower-greek"、"lower-latin"、"upper-latin"、"armenian"、"georgian" 或 "inherit"；

如果需要同时设置多个列表属性，可以使用 list-style 属性，list-style 属性可以在一个声明中同时设置 list-style-type（列表项标记的类型）, list-style-position（何处放置列表项标记）, list-style-image（图像来替换列表项的标记）属性；