MySQL · 源码分析 · MySQL 半同步复制数据一致

发表于 2017-09-18

简介

MySQL Replication为MySQL用户提供了高可用性和可扩展性解决方案。本文介绍了MySQL Replication的主要发展历程，然后通过三个参数rpl_semi_sync_master_wait_point、sync_binlog、sync_relay_log的配置简要分析了MySQL半同步的数据一致性。

MySQL Replication的发展

在2000年，MySQL 3.23.15版本引入了Replication。Replication作为一种准实时同步方式，得到广泛应用。

这个时候的Replicaton的实现涉及到两个线程，一个在Master，一个在Slave。Slave的I/O和SQL功能是作为一个线程，从Master获取到event后直接apply，没有relay log。这种方式使得读取event的速度会被Slave replay速度拖慢，当主备存在较大延迟时候，会导致大量binary log没有备份到Slave端。

在2002年，MySQL 4.0.2版本将Slave端event读取和执行独立成两个线程（IO线程和SQL线程），同时引入了relay log。IO线程读取event后写入relay log，SQL线程从relay log中读取event然后执行。这样即使SQL线程执行慢，Master的binary log也会尽可能的同步到Slave。当Master宕机，切换到Slave，不会出现大量数据丢失。

MySQL在2010年5.5版本之前，一直采用的是异步复制。主库的事务执行不会管备库的同步进度，如果备库落后，主库不幸crash，那么就会导致数据丢失。

MySQL在5.5中引入了半同步复制，主库在应答客户端提交的事务前需要保证至少一个从库接收并写到relay log中。那么半同步复制是否可以做到不丢失数据呢。

在2016年，MySQL在5.7.17中引入了Group Replication。

MySQL 半同步复制的数据一致性

源码剖析

以下源码版本均为官方MySQL 5.7。
MySQL semi-sync是以插件方式引入，在plugin/semisync目录下。这里以semi-sync主要的函数调用为入口，学习semi-sync源码。

复制代码plugin/semisync/semisync_master.cc
403 /*******************************************************************************
404  *
405  * <ReplSemiSyncMaster> class: the basic code layer for sync-replication master.
406  * <ReplSemiSyncSlave>  class: the basic code layer for sync-replication slave.
407  *
408  * The most important functions during semi-syn replication listed:
409  *
410  * Master:
          //实际由Ack_receiver线程调用，处理semi-sync复制状态，获取备库最新binlog位点，唤醒对应线程
411  *  . reportReplyBinlog():  called by the binlog dump thread when it receives
412  *                          the slave's status information.
          //根据semi-sync运行状态设置数据包头semi-sync标记
413  *  . updateSyncHeader():   based on transaction waiting information, decide
414  *                          whether to request the slave to reply.
          //存储当前binlog 文件名和偏移量，更新当前最大的事务 binlog 位置
415  *  . writeTranxInBinlog(): called by the transaction thread when it finishes
416  *                          writing all transaction events in binlog.
          //实现客户端同步等待逻辑
417  *  . commitTrx():          transaction thread wait for the slave reply.
418  *
419  * Slave:
          //确认网络包头是否有semi-sync标记
420  *  . slaveReadSyncHeader(): read the semi-sync header from the master, get the
421  *                           sync status and get the payload for events.
          //给Master发送ACK报文
422  *  . slaveReply():          reply to the master about the replication progress.
423  *
424  ******************************************************************************/

复制代码Ack_receiver线程，不断遍历slave，通过select监听slave网络包，处理semi-sync复制状态，唤醒等待线程。
plugin/semisync/semisync_master_ack_receiver.cc Ack_receiver::run()
->plugin/semisync/semisync_master.cc ReplSemiSyncMaster::reportReplyPacket
  ->plugin/semisync/semisync_master.cc ReplSemiSyncMaster::reportReplyBinlog

binlog Dump线程。如果slave是semi-slave，通过add_slave将slave添加到监听队列，在发送网络包时根据semi-sync运行状态设置包头的semi-sync标记。
sql/rpl_binlog_sender.cc Binlog_sender::run()
->sql/rpl_binlog_sender.cc Binlog_sender::send_binlog
  ->sql/rpl_binlog_sender.cc Binlog_sender::send_events
    ->sql/rpl_binlog_sender.cc Binlog_sender::before_send_hook
      ->plugin/semisync/semisync_master_plugin.cc repl_semi_before_send_event
        ->plugin/semisync/semisync_master.cc ReplSemiSyncMaster::updateSyncHeader

事务提交阶段，在flush binlog后，存储当前binlog 文件名和偏移量，更新当前最大的事务 binlog 位置。
sql/binlog.cc MYSQL_BIN_LOG::ordered_commit
 ->plugin/semisync/semisync_master_plugin.cc repl_semi_report_binlog_update//after_flush
   ->plugin/semisync/semisync_master.cc repl_semisync.writeTranxInBinlog

事务提交阶段，客户端等待处理逻辑，分为after_sync和after_commit两种情况
sql/binlog.cc MYSQL_BIN_LOG::ordered_commit
  ->sql/binlog.cc process_after_commit_stage_queue || call_after_sync_hook
    ->plugin/semisync/semisync_master_plugin.cc repl_semi_report_commit || repl_semi_report_binlog_sync
      ->plugin/semisync/semisync_master.cc ReplSemiSyncMaster::commitTrx

Slave IO线程，读取数据后后检查包头是否有semi-sync标记。
sql/rpl_slave.cc handle_slave_io
  ->plugin/semisync/semisync_slave_plugin.cc repl_semi_slave_read_event
    ->plugin/semisync/semisync_slave.cc ReplSemiSyncSlave::slaveReadSyncHeader

Slave IO线程，在queue event后，在需要回复Master ACK报文的时候，回复Master ACK报文。
sql/rpl_slave.cc handle_slave_io
  ->plugin/semisync/semisync_slave_plugin.cc repl_semi_slave_queue_event
    ->plugin/semisync/semisync_slave.cc ReplSemiSyncSlave::slaveReply

首先半同步方式，主库在等待备库ack时候，如果超时会退化为异步，这就可能导致数据丢失。在接下来分析中，先假设rpl_semi_sync_master_timeout足够大，不会退化为异步方式。

这里通过三个参数rpl_semi_sync_master_wait_point、sync_binlog、sync_relay_log的配置来对semi-sync做数据一致性的分析。

rpl_semi_sync_master_wait_point的配置

源码剖析：

复制代码plugin/semisync/semisync_master_plugin.cc

68 int repl_semi_report_binlog_sync(Binlog_storage_param *param,
69                                  const char *log_file,
70                                  my_off_t log_pos)
71 {
72   if (rpl_semi_sync_master_wait_point == WAIT_AFTER_SYNC)
73     return repl_semisync.commitTrx(log_file, log_pos);
74   return 0;
75 }

97 int repl_semi_report_commit(Trans_param *param)
   ...
102   if (rpl_semi_sync_master_wait_point == WAIT_AFTER_COMMIT &&
106     return repl_semisync.commitTrx(binlog_name, param->log_pos);

配置为WAIT_AFTER_COMMIT

当rpl_semi_sync_master_wait_point为WAIT_AFTER_COMMIT时，commitTrx的调用在engine层commit之后（在ordered_commit函数中process_after_commit_stage_queue调用），如上图所示。即在等待Slave
ACK时候，虽然没有返回当前客户端，但事务已经提交，其他客户端会读取到已提交事务。如果Slave端还没有读到该事务的events，同时主库发生了crash，然后切换到备库。那么之前读到的事务就不见了，出现了幻读，如下图所示。图片引自Loss-less Semi-Synchronous Replication on MySQL 5.7.2 。

配置为WAIT_AFTER_SYNC

MySQL针对上述问题，在5.7.2引入了Loss-less Semi-Synchronous，在调用binlog sync之后，engine层commit之前等待Slave ACK。这样只有在确认Slave收到事务events后，事务才会提交。在commit之前等待Slave ACK，同时可以堆积事务，利于group commit，有利于提升性能。如下图所示，图片引自Loss-less Semi-Synchronous Replication on MySQL 5.7.2 ：

其实上图流程中存在着会导致主备数据不一致，使主备同步失败的情形。见下面sync_binlog配置的分析。

sync_binlog的配置

源码剖析：

复制代码sql/binlog.cc ordered_commit
       //当sync_period(sync_binlog)为1时，在sync之后update binlog end pos
9002   update_binlog_end_pos_after_sync= (get_sync_period() == 1);
       ...
9021     if (!update_binlog_end_pos_after_sync)
           //更新binlog end position,dump线程会发送更新后的events
9022       update_binlog_end_pos();
       ...
         //
9057     std::pair<bool, bool> result= sync_binlog_file(false);
       ...
9061   if (update_binlog_end_pos_after_sync)
9062   {
       ...
9068       update_binlog_end_pos(tmp_thd->get_trans_pos());
9069   }



sql/binlog.cc sync_binlog_file
8618 std::pair<bool, bool>
8619 MYSQL_BIN_LOG::sync_binlog_file(bool force)
8620 {
8621   bool synced= false;
8622   unsigned int sync_period= get_sync_period();//sync_binlog值
       //sync_period为0不做sync操作，其他值为达到sync调用次数后sync
8623   if (force || (sync_period && ++sync_counter >= sync_period))
8624   {

配置分析

当sync_binlog为0的时候，binlog sync磁盘由操作系统负责。当不为0的时候，其数值为定期sync磁盘的binlog commit group数。当sync_binlog值大于1的时候，sync binlog操作可能并没有使binlog落盘。如果没有落盘，事务在提交前，Master掉电，然后恢复，那么这个时候该事务被回滚。但是Slave上可能已经收到了该事务的events并且执行，这个时候就会出现Slave事务比Master多的情况，主备同步会失败。所以如果要保持主备一致，需要设置sync_binlog为1。

WAIT_AFTER_SYNC和WAIT_AFTER_COMMIT两图中Send Events的位置，也可能导致主备数据不一致，出现同步失败的情形。实际在rpl_semi_sync_master_wait_point分析的图中是sync binlog大于1的情况。根据上面源码，流程如下图所示。Master依次执行flush binlog， update binlog position， sync binlog。如果Master在update binlog position后，sync binlog前掉电，Master再次启动后原事务就会被回滚。但可能出现Slave获取到Events，这也会导致Slave数据比Master多，主备同步失败。

由于上面的原因，sync_binlog设置为1的时候，MySQL会update binlog end pos after sync。流程如下图所示。这时候，对于每一个事务都需要sync binlog，同时sync binlog和网络发送events会是一个串行的过程，性能下降明显。

sync_relay_log的配置

源码剖析

复制代码sql/rpl_slave.cc handle_slave_io

5764       if (queue_event(mi, event_buf, event_len))
           ...
5771       if (RUN_HOOK(binlog_relay_io, after_queue_event,
5772                    (thd, mi, event_buf, event_len, synced)))

after_queue_event
->plugin/semisync/semisync_slave_plugin.cc repl_semi_slave_queue_event
->plugin/semisync/semisync_slave.cc ReplSemiSyncSlave::slaveReply

queue_event
->sql/binlog.cc MYSQL_BIN_LOG::append_buffer(const char* buf, uint len, Master_info *mi)
->sql/binlog.cc after_append_to_relay_log(mi);
->sql/binlog.cc flush_and_sync(0)
->sql/binlog.cc sync_binlog_file(force)

配置分析

在Slave的IO线程中get_sync_period获得的是sync_relay_log的值，与sync_binlog对sync控制一样。当sync_relay_log不是1的时候，semisync返回给Master的position可能没有sync到磁盘。在gtid_mode下，在保证前面两个配置正确的情况下，sync_relay_log不是1的时候，仅发生Master或Slave的一次Crash并不会发生数据丢失或者主备同步失败情况。如果发生Slave没有sync relay log，Master端事务提交，客户端观察到事务提交，然后Slave端Crash。这样Slave端就会丢失掉已经回复Master
ACK的事务events。

但当Slave再次启动，如果没有来得及从Master端同步丢失的事务Events，Master就Crash。这个时候，用户访问Slave就会发现数据丢失。

通过上面这个Case，MySQL semisync如果要保证任意时刻发生一台机器宕机都不丢失数据，需要同时设置sync_relay_log为1。对relay log的sync操作是在queue_event中，对每个event都要sync，所以sync_relay_log设置为1的时候，事务响应时间会受到影响，对于涉及数据比较多的事务延迟会增加很多。

MySQL 三节点

在一主一从的主备semisync的数据一致性分析中放弃了高可用，当主备之间网络抖动或者一台宕机的情况下停止提供服务。要做到高可用，很自然我们可以想到一主两从，这样解决某一网络抖动或一台宕机时候的可用性问题。但是，前文叙述要保证数据一致性配置要求依然存在，即正常情况下的性能不会有改善。同时需要解决Master宕机时候，如何选取新主机的问题，如何避免多主的情形。

选取新主机时一定要读取两个从机，看哪一个从机有最新的日志，否则可能导致数据丢失。这样的三节点方案就类似分布式Quorum机制，写的时候需要保证写成功三节点中的法定集合，确定新主的时候需要读取法定集合。利用分布式一致性协议Paxos/Raft可以解决数据一致性问题，选主问题和多主问题，因此近些年，国内数据库团队大多实现了基于Paxos/Raft的三节点方案。近来MySQL官方也以插件形式引入了支持多主集群的Group Replication方案。

总结

可以看到从replication功能引入后，官方MySQL一直在不停的完善，前进。同时我们可以发现当前原生的MySQL主备复制实现实际上很难在满足数据一致性的前提下做到高可用、高性能。

本文转载自: 掘金

开发者博客 – 和开发相关的这里全都有

Vuex 源码分析

发表于 2017-09-13

本文解读的Vuex版本为2.3.1

Vuex代码结构

Vuex的代码并不多，但麻雀虽小，五脏俱全，下面来看一下其中的实现细节。

源码分析

入口文件

入口文件src/index.js:

复制代码import { Store, install } from './store'
import { mapState, mapMutations, mapGetters, mapActions } from './helpers'

export default {
  Store,
  install,
  version: '__VERSION__',
  mapState,
  mapMutations,
  mapGetters,
  mapActions
}

这是Vuex对外暴露的API，其中核心部分是Store，然后是install，它是一个vue插件所必须的方法。Store
和install都在store.js文件中。mapState、mapMutations、mapGetters、mapActions为四个辅助函数，用来将store中的相关属性映射到组件中。

install方法

Vuejs的插件都应该有一个install方法。先看下我们通常使用Vuex的姿势：

复制代码import Vue from 'vue'
import Vuex from 'vuex'
...
Vue.use(Vuex)

install方法的源码:

复制代码export function install (_Vue) {
  if (Vue) {
    console.error(
      '[vuex] already installed. Vue.use(Vuex) should be called only once.'
    )
    return
  }
  Vue = _Vue
  applyMixin(Vue)
}

// auto install in dist mode
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

方法的入参_Vue就是use的时候传入的Vue构造器。
install方法很简单，先判断下如果Vue已经有值，就抛出错误。这里的Vue是在代码最前面声明的一个内部变量。

1	复制代码let Vue // bind on install

这是为了保证install方法只执行一次。
install方法的最后调用了applyMixin方法。这个方法定义在src/mixin.js中：

复制代码export default function (Vue) {
  const version = Number(Vue.version.split('.')[0])

  if (version >= 2) {
    const usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1
    Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit })
  } else {
    // override init and inject vuex init procedure
    // for 1.x backwards compatibility.
    const _init = Vue.prototype._init
    Vue.prototype._init = function (options = {}) {
      options.init = options.init
        ? [vuexInit].concat(options.init)
        : vuexInit
      _init.call(this, options)
    }
  }

  /**
   * Vuex init hook, injected into each instances init hooks list.
   */

  function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      this.$store = options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
  }
}

方法判断了一下当前vue的版本，当vue版本>=2的时候，就在Vue上添加了一个全局mixin，要么在init阶段，要么在beforeCreate阶段。Vue上添加的全局mixin会影响到每一个组件。mixin的各种混入方式不同，同名钩子函数将混合为一个数组，因此都将被调用。并且，混合对象的钩子将在组件自身钩子之前。

来看下这个mixin方法vueInit做了些什么:
this.$options用来获取实例的初始化选项，当传入了store的时候，就把这个store挂载到实例的$store上，没有的话，并且实例有parent的，就把parent的$store挂载到当前实例上。这样，我们在Vue的组件中就可以通过this.$store.xxx访问Vuex的各种数据和状态了。

Store构造函数

Vuex中代码最多的就是store.js, 它的构造函数就是Vuex的主体流程。

复制代码  constructor (options = {}) {
    assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
    assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)

    const {
      plugins = [],
      strict = false
    } = options

    let {
      state = {}
    } = options
    if (typeof state === 'function') {
      state = state()
    }

    // store internal state
    this._committing = false
    this._actions = Object.create(null)
    this._mutations = Object.create(null)
    this._wrappedGetters = Object.create(null)
    this._modules = new ModuleCollection(options)
    this._modulesNamespaceMap = Object.create(null)
    this._subscribers = []
    this._watcherVM = new Vue()

    // bind commit and dispatch to self
    const store = this
    const { dispatch, commit } = this
    this.dispatch = function boundDispatch (type, payload) {
      return dispatch.call(store, type, payload)
    }
    this.commit = function boundCommit (type, payload, options) {
      return commit.call(store, type, payload, options)
    }

    // strict mode
    this.strict = strict

    // init root module.
    // this also recursively registers all sub-modules
    // and collects all module getters inside this._wrappedGetters
    installModule(this, state, [], this._modules.root)

    // initialize the store vm, which is responsible for the reactivity
    // (also registers _wrappedGetters as computed properties)
    resetStoreVM(this, state)

    // apply plugins
    plugins.concat(devtoolPlugin).forEach(plugin => plugin(this))
  }

依然，先来看看使用Store的通常姿势，便于我们知道方法的入参：

复制代码export default new Vuex.Store({
  state,
  mutations
  actions,
  getters,
  modules: {
    ...
  },
  plugins,
  strict: false
})

store构造函数的最开始，进行了2个判断。

1 2	复制代码assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`) assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)

这里的assert是util.js里的一个方法。

1
2
3

复制代码export function assert (condition, msg) {
  if (!condition) throw new Error(`[vuex] ${msg}`)
}

先判断一下Vue是否存在，是为了保证在这之前store已经install过了。另外，Vuex依赖Promise，这里也进行了判断。
assert这个函数虽然简单，但这种编程方式值得我们学习。
接着往下看：

复制代码const {
  plugins = [],
  strict = false
} = options

let {
  state = {}
} = options
if (typeof state === 'function') {
  state = state()
}

这里使用解构并设置默认值的方式来获取传入的值，分别得到了plugins, strict 和state。传入的state也可以是一个方法，方法的返回值作为state。

然后是定义了一些内部变量：

复制代码// store internal state
this._committing = false
this._actions = Object.create(null)
this._mutations = Object.create(null)
this._wrappedGetters = Object.create(null)
this._modules = new ModuleCollection(options)
this._modulesNamespaceMap = Object.create(null)
this._subscribers = []
this._watcherVM = new Vue()

this._committing 表示提交状态，作用是保证对 Vuex 中 state 的修改只能在 mutation 的回调函数中，而不能在外部随意修改state。
this._actions 用来存放用户定义的所有的 actions。
this._mutations 用来存放用户定义所有的 mutatins。
this._wrappedGetters 用来存放用户定义的所有 getters。
this._modules 用来存储用户定义的所有modules
this._modulesNamespaceMap 存放module和其namespace的对应关系。
this._subscribers 用来存储所有对 mutation 变化的订阅者。
this._watcherVM 是一个 Vue 对象的实例，主要是利用 Vue 实例方法 $watch 来观测变化的。
这些参数后面会用到，我们再一一展开。

继续往下看：

复制代码// bind commit and dispatch to self
const store = this
const { dispatch, commit } = this
this.dispatch = function boundDispatch (type, payload) {
  return dispatch.call(store, type, payload)
}
this.commit = function boundCommit (type, payload, options) {
  return commit.call(store, type, payload, options)
}

如同代码的注释一样，绑定Store类的dispatch和commit方法到当前store实例上。dispatch 和 commit 的实现我们稍后会分析。this.strict 表示是否开启严格模式，在严格模式下会观测所有的 state 的变化，建议在开发环境时开启严格模式，线上环境要关闭严格模式，否则会有一定的性能开销。

构造函数的最后：

复制代码// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
installModule(this, state, [], this._modules.root)

// initialize the store vm, which is responsible for the reactivity
// (also registers _wrappedGetters as computed properties)
resetStoreVM(this, state)

// apply plugins
plugins.concat(devtoolPlugin).forEach(plugin => plugin(this))

Vuex的初始化核心

installModule

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。

为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割。

复制代码// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
installModule(this, state, [], this._modules.root)

在进入installModule方法之前，有必要先看下方法的入参this._modules.root是什么。

1	复制代码this._modules = new ModuleCollection(options)

这里主要用到了src/module/module-collection.js 和 src/module/module.js

module-collection.js:

复制代码export default class ModuleCollection {
  constructor (rawRootModule) {
    // register root module (Vuex.Store options)
    this.root = new Module(rawRootModule, false)

    // register all nested modules
    if (rawRootModule.modules) {
      forEachValue(rawRootModule.modules, (rawModule, key) => {
        this.register([key], rawModule, false)
      })
    }
  }
  ...
}

module-collection的构造函数里先定义了实例的root属性，为一个Module实例。然后遍历options里的modules，依次注册。

看下这个Module的构造函数：

复制代码export default class Module {
  constructor (rawModule, runtime) {
    this.runtime = runtime
    this._children = Object.create(null)
    this._rawModule = rawModule
    const rawState = rawModule.state
    this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}
  }
  ...
}

这里的rawModule一层一层的传过来，也就是new Store时候的options。
module实例的_children目前为null，然后设置了实例的_rawModule和state。

回到module-collection构造函数的register方法, 及它用到的相关方法：

复制代码register (path, rawModule, runtime = true) {
  const parent = this.get(path.slice(0, -1))
  const newModule = new Module(rawModule, runtime)
  parent.addChild(path[path.length - 1], newModule)

  // register nested modules
  if (rawModule.modules) {
    forEachValue(rawModule.modules, (rawChildModule, key) => {
      this.register(path.concat(key), rawChildModule, runtime)
    })
  }
}

get (path) {
  return path.reduce((module, key) => {
    return module.getChild(key)
  }, this.root)
}

addChild (key, module) {
  this._children[key] = module
}

get方法的入参path为一个数组，例如[‘subModule’, ‘subsubModule’], 这里使用reduce方法，一层一层的取值, this.get(path.slice(0, -1))取到当前module的父module。然后再调用Module类的addChild方法，将改module添加到父module的_children对象上。

然后，如果rawModule上有传入modules的话，就递归一次注册。

看下得到的_modules数据结构：

扯了一大圈，就是为了说明installModule函数的入参，接着回到installModule方法。

1 2	复制代码const isRoot = !path.length const namespace = store._modules.getNamespace(path)

通过path的length来判断是不是root module。

来看一下getNamespace这个方法：

复制代码getNamespace (path) {
  let module = this.root
  return path.reduce((namespace, key) => {
    module = module.getChild(key)
    return namespace + (module.namespaced ? key + '/' : '')
  }, '')
}

又使用reduce方法来累加module的名字。这里的module.namespaced是定义module的时候的参数，例如：

复制代码export default {
  state,
  getters,
  actions,
  mutations,
  namespaced: true
}

所以像下面这样定义的store，得到的selectLabelRule的namespace就是’selectLabelRule/‘

复制代码export default new Vuex.Store({
  state,
  actions,
  getters,
  mutations,
  modules: {
    selectLabelRule
  },
  strict: debug
})

接着看installModule方法：

复制代码// register in namespace map
  if (module.namespaced) {
    store._modulesNamespaceMap[namespace] = module
  }

传入了namespaced为true的话，将module根据其namespace放到内部变量_modulesNamespaceMap对象上。

然后

复制代码// set state
if (!isRoot && !hot) {
  const parentState = getNestedState(rootState, path.slice(0, -1))
  const moduleName = path[path.length - 1]
  store._withCommit(() => {
    Vue.set(parentState, moduleName, module.state)
  })
}

getNestedState跟前面的getNamespace类似，也是用reduce来获得当前父module的state，最后调用Vue.set将state添加到父module的state上。

看下这里的_withCommit方法：

复制代码_withCommit (fn) {
  const committing = this._committing
  this._committing = true
  fn()
  this._committing = committing
}

this._committing在Store的构造函数里声明过，初始值为false。这里由于我们是在修改 state，Vuex 中所有对 state 的修改都会用 _withCommit函数包装，保证在同步修改 state 的过程中 this._committing 的值始终为true。这样当我们观测 state 的变化时，如果 this._committing 的值不为 true，则能检查到这个状态修改是有问题的。

看到这里，可能会有点困惑，举个例子来直观感受一下，以 Vuex 源码中的 example/shopping-cart 为例，打开 store/index.js，有这么一段代码：

复制代码export default new Vuex.Store({
  actions,
  getters,
  modules: {
    cart,
    products
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

这里有两个子 module，cart 和 products，我们打开 store/modules/cart.js，看一下 cart 模块中的 state 定义，代码如下：

复制代码const state = {
  added: [],
  checkoutStatus: null
}

运行这个项目，打开浏览器，利用 Vue 的调试工具来看一下 Vuex 中的状态，如下图所示：

来看installModule方法的最后：

复制代码const local = module.context = makeLocalContext(store, namespace, path)

module.forEachMutation((mutation, key) => {
  const namespacedType = namespace + key
  registerMutation(store, namespacedType, mutation, local)
})

module.forEachAction((action, key) => {
  const namespacedType = namespace + key
  registerAction(store, namespacedType, action, local)
})

module.forEachGetter((getter, key) => {
  const namespacedType = namespace + key
  registerGetter(store, namespacedType, getter, local)
})

module.forEachChild((child, key) => {
  installModule(store, rootState, path.concat(key), child, hot)
})

local为接下来几个方法的入参，我们又要跑偏去看一下makeLocalContext这个方法了：

复制代码/**
 * make localized dispatch, commit, getters and state
 * if there is no namespace, just use root ones
 */
function makeLocalContext (store, namespace, path) {
  const noNamespace = namespace === ''

  const local = {
    dispatch: noNamespace ? store.dispatch : (_type, _payload, _options) => {
      const args = unifyObjectStyle(_type, _payload, _options)
      const { payload, options } = args
      let { type } = args

      if (!options || !options.root) {
        type = namespace + type
        if (!store._actions[type]) {
          console.error(`[vuex] unknown local action type: ${args.type}, global type: ${type}`)
          return
        }
      }

      return store.dispatch(type, payload)
    },

    commit: noNamespace ? store.commit : (_type, _payload, _options) => {
      const args = unifyObjectStyle(_type, _payload, _options)
      const { payload, options } = args
      let { type } = args

      if (!options || !options.root) {
        type = namespace + type
        if (!store._mutations[type]) {
          console.error(`[vuex] unknown local mutation type: ${args.type}, global type: ${type}`)
          return
        }
      }

      store.commit(type, payload, options)
    }
  }

  // getters and state object must be gotten lazily
  // because they will be changed by vm update
  Object.defineProperties(local, {
    getters: {
      get: noNamespace
        ? () => store.getters
        : () => makeLocalGetters(store, namespace)
    },
    state: {
      get: () => getNestedState(store.state, path)
    }
  })

  return local
}

就像方法的注释所说的，方法用来得到局部的dispatch，commit，getters 和 state，如果没有namespace的话，就用根store的dispatch, commit等等

以local.dispath为例：
没有namespace为’’的时候，直接使用this.dispatch。有namespace的时候，就在type前加上namespace再dispath。

local参数说完了，接来是分别注册mutation，action和getter。以注册mutation为例说明：

复制代码module.forEachMutation((mutation, key) => {
  const namespacedType = namespace + key
  registerMutation(store, namespacedType, mutation, local)
})

复制代码function registerMutation (store, type, handler, local) {
  const entry = store._mutations[type] || (store._mutations[type] = [])
  entry.push(function wrappedMutationHandler (payload) {
    handler(local.state, payload)
  })
}

根据mutation的名字找到内部变量_mutations里的数组。然后，将mutation的回到函数push到里面。
例如有这样一个mutation：

复制代码mutation: {
  increment (state, n) {
    state.count += n
  }
}

就会在_mutations[increment]里放入其回调函数。

commit

前面说到mutation被放到了_mutations对象里。接下来看一下，Store构造函数里最开始的将Store类的dispatch和commit放到当前实例上，那commit一个mutation的执行情况是什么呢?

复制代码  commit (_type, _payload, _options) {
    // check object-style commit
    const {
      type,
      payload,
      options
    } = unifyObjectStyle(_type, _payload, _options)

    const mutation = { type, payload }
    const entry = this._mutations[type]
    if (!entry) {
      console.error(`[vuex] unknown mutation type: ${type}`)
      return
    }
    this._withCommit(() => {
      entry.forEach(function commitIterator (handler) {
        handler(payload)
      })
    })
    this._subscribers.forEach(sub => sub(mutation, this.state))

    if (options && options.silent) {
      console.warn(
        `[vuex] mutation type: ${type}. Silent option has been removed. ` +
        'Use the filter functionality in the vue-devtools'
      )
    }
  }

方法的最开始用unifyObjectStyle来获取参数，这是因为commit的传参方式有两种：

1
2
3

复制代码store.commit('increment', {
  amount: 10
})

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

复制代码store.commit({
  type: 'increment',
  amount: 10
})

复制代码function unifyObjectStyle (type, payload, options) {
  if (isObject(type) && type.type) {
    options = payload
    payload = type
    type = type.type
  }

  assert(typeof type === 'string', `Expects string as the type, but found ${typeof type}.`)

  return { type, payload, options }
}

如果传入的是对象，就做参数转换。
然后判断需要commit的mutation是否注册过了，this._mutations[type]，没有就抛错。
然后循环调用_mutations里的每一个mutation回调函数。
然后执行每一个mutation的subscribe回调函数。

Vuex辅助函数

Vuex提供的辅助函数有4个：

以mapGetters为例，看下mapGetters的用法：

代码在src/helpers.js里：

复制代码export const mapGetters = normalizeNamespace((namespace, getters) => {
  const res = {}
  normalizeMap(getters).forEach(({ key, val }) => {
    val = namespace + val
    res[key] = function mappedGetter () {
      if (namespace && !getModuleByNamespace(this.$store, 'mapGetters', namespace)) {
        return
      }
      if (!(val in this.$store.getters)) {
        console.error(`[vuex] unknown getter: ${val}`)
        return
      }
      return this.$store.getters[val]
    }
    // mark vuex getter for devtools
    res[key].vuex = true
  })
  return res
})


function normalizeMap (map) {
  return Array.isArray(map)
    ? map.map(key => ({ key, val: key }))
    : Object.keys(map).map(key => ({ key, val: map[key] }))
}

function normalizeNamespace (fn) {
  return (namespace, map) => {
    if (typeof namespace !== 'string') {
      map = namespace
      namespace = ''
    } else if (namespace.charAt(namespace.length - 1) !== '/') {
      namespace += '/'
    }
    return fn(namespace, map)
  }
}

normalizeNamespace方法使用函数式编程的方式，接收一个方法，返回一个方法。
mapGetters接收的参数是一个数组或者一个对象：

复制代码computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
  ...mapGetters([
    'doneTodosCount',
    'anotherGetter',
    // ...
  ])
}

复制代码mapGetters({
  // 映射 this.doneCount 为 store.getters.doneTodosCount
  doneCount: 'doneTodosCount'
})

这里是没有传namespace的情况，看下方法的具体实现。
normalizeNamespace开始进行了参数跳转，传入的数组或对象给map，namespace为’’ , 然后执行fn(namespace, map)
接着是normalizeMap方法，返回一个数组，这种形式：

复制代码{
  key: doneCount,
  val: doneTodosCount
}

然后往res对象上塞方法，得到如下形式的对象：

复制代码{
  doneCount: function() {
    return this.$store.getters[doneTodosCount]
  }
}

也就是最开始mapGetters想要的效果：

完

by kaola/fangwentian

本文转载自: 掘金

开发者博客 – 和开发相关的这里全都有

10 分钟内快速构建能够承载海量数据的 nginx 日志分析

发表于 2017-08-15

nginx 是现代 Web 服务栈中最重要的组件之一，绝大部分互联网公司都会通过分析监控 nginx 日志来定位业务性能瓶颈和故障诊断等。

通常，如果想构建一套具有实时数据监控、日志搜索和分析功能的大数据平台：首先需要选择数据收集工具，如目前比较流行的 logstash(filebeat)、fluntd、flume 等；然后依托 Prometheus 或 InfluxDB 实现数据的实时监控，并结合可视化工具（如 Grafana ）实现数据的可视化展示；与此同时，为了达到高效日志搜索的目的，还需要运用 Elasticsearch 技术搭建搜索和分析引擎，并结合 Kibana 进行页面展示。而实现以上功能不仅需要有资深大数据背景的技术团队和漫长的开发周期，上线后还要投入精力持续维护迭代。当数据量持续上升时，还需要考虑横向扩展能力，否则就不得不面对众多开源组件崩盘的风险。

七牛大数据平台 Pandora 是一套面向海量数据，能够让基础技术人员轻松管理大数据传输、计算、存储和分析的大数据 PaaS 平台，核心服务及功能包括大数据工作流引擎、时序数据库、日志检索服务、Spark 服务、报表工作室。

基于七牛大数据平台 Pandora，不到 10 分钟就可以完全实现一套可承载海量数据的 nginx 日志分析与报警平台，无需考虑部署运维难题，更有海量离线数据分析等众多大数据分析工具支持。

以下是操作详情

系统功能要求

海量数据支撑
快速接入，无侵入式配置，快速部署使用
多种类型分析、分词、加工、变换
实时监控，数据可视化（ Grafana 用户无障碍迁移）
离线分析，发现数据更大价值
计算结果导出到用户自身，快速回流

监控内容

nginx 的访问日志( access.log )

快速开始

1、数据接入

根据您机器的操作系统版本下载 logkit（ logkit 是七牛云推出的一款开源数据收集工具）

下载地址：github.com/qiniu/logki…

解压后您可以看到：

1
2
3

复制代码logkit
logkit.conf
confs/default.conf

其中 logkit.conf 为主配置文件，用于配置监听的子配置文件夹，修改主配置文件需要重启 logkit。

您需要将其中的 confs_path 地址设置要监听的子配置文件夹路径。confs 文件夹就是一个示例的子配置文件夹，子配置文件的更新无需重启 logkit，会被 logkit 实时监听，我们在子配置文件中设置实际要收集的各种配置文件。

下面我们将为您介绍如何配置子配置文件以收集 nginx 的日志。

明确本机的 nginx 配置文件 log_format 位置如图 1

图 1

假设该配置文件路径为： /opt/nginx_logs/logs/access.log

明确服务使用的 nginx 日志样式，如图 2

图 2

假设我们使用的 nginx 日志样式为 main

根据我们明确的 nginx 配置文件，填写 nginx 日志收集的 logkit 配置文件，如图 3，填写内容覆盖到 confs/default.conf 即可

图 3

复制代码  {
  "name":"nginx_runner",
  "reader":{
   "mode":"file",
    "meta_path":"meta",
    "log_path":"/opt/nginx_logs/logs/access.log"
  },
  "parser":{
    "name":"nginx_parser",
    "type":"nginx",
    "nginx_log_format_path":"/opt/nginx/conf/nginx.conf",
    "nginx_log_format_name":"main",
    "nginx_schema":"time_local date,bytes_sent long,request_timefloat,body_bytes_sent long",
    "labels":"machine {machineNumber},team {opTeam}"
},
  "senders":[{
    "name":"pandora_sender",
    "sender_type":"pandora",
    "pandora_ak":"your_ak",
    "pandora_sk":"your_sk",
    "pandora_host":"https://pipeline.qiniu.com",
    "pandora_repo_name":"my_nginx_log",
    "pandora_region":"nb",
    "pandora_schema_free":"true",
    "pandora_gzip": "true",
    "pandora_enable_logdb":"true",
    "fault_tolerant":"true",
    "ft_save_log_path":"./ft_log",
    "ft_strategy":"always_save",
    "ft_procs":"2"
}]
}

除了 nginx 日志，logkit 还支持收集其他日志，更多 logkit 的高级用法，参见 logkit wiki文档

运行 logkit

nohup ./logkit -f logkit.conf > logkit.log 2>&1

2、数据加工

登录七牛官方网站，在大数据工作流引擎中即可看到已经创建的数据传输通道，如图 4

图 4

在日志检索界面查询数据，如图 5-1 所示

图 5-1

至此，您已经可以通过搜索玩转您本地的数据啦。

除了默认导出一份到日志检索之外，您也可以回到大数据工作流引擎，根据您的需要任意创建针对实时数据流的自定义计算并导出，如图 5-2 所示。

图 5-2

经过多种实时计算变换的数据，除了导出到 Pandora 已有的日志检索、时序数据库以及对象存储以外，还可以根据需要，导出到您本地假设的 http 服务器上，即在 Pandora 进行数据计算后将结果回流到您的平台落地，如图 5-3 所示。

图 5-3

当然，导出到对象存储的数据，还可以在工作流引擎中创建离线计算工作流，再次进行数据加工聚合计算并导出，如图 5-4 所示。

图 5-4

在离线计算的工作流引擎，你可以根据需要周期性的运行您的计算任务，如定时分析一天的数据、一周的数据，出一份日报、周报等。

####3、实时数据展示与监控

我们提供创建并配置 Grafana 进行监控。
创建 Grafana App，如图 6 所示

图 6

配置 Grafana LogDB 数据源，如图 7 所示，点击 logdb 使用指南，可以按照使用指南的指导在 Grafana 配置数据源。

图 7

注意事项

Default Query Settings中， Group by interval 填写时间 10s，注意单位为 s, m 等，不能漏掉，必须小写。
Time Field Name 处填写您的 logdb 时间字段，填您 nginx 配置的命名，在上述的截图示例中，是 time_local , 没有默认的 $ 符号
Index name中，模式固定为 Daily , 串固定为 [reponame-]YYYY.MM.DD , 将reponame 字符串改为您的数据源名称即可。
Version 固定为 2.x

载入现成的 Grafana 配置

下载 json op26gaeek.bkt.clouddn.com/logdbgrafan… Grafana 界面导入 json，并选择数据源。最终您将看到的效果，如图 8-1 所示

图 8-1

仅仅以 nginx 日志为例，您可以看到哪些十分有价值的数据呢？实时总用户访问量(请求数统计)，如图 8-2 所示

图 8-2

机器请求数随时间变化趋势，如图 8-3 所示

图 8-3

实时请求状态码占比，如图 8-4 所示

图 8-4

实时请求 TOP 排名，如图 8-5 所示

图 8-5

实时请求来源 IP TOP 排名，如图 8-6 所示

图 8-6

响应时间随时间变化趋势图，如图 8-7 所示

图 8-7

实时用户请求的客户端 TOP 排名，如图 8-8 所示

图 8-8

实时根据不同情况进行具体数据的查询，包括状态码、响应时间范围进行筛选等，如图 8-9 所示

图 8-9

其他更多自定义配置…自定义的 Grafana DashBoard 配置示例，如图 9 所示

图 9

在此，您可以通过 Grafana，通过您的 nginx 日志完整而详尽地了解您业务的流量入口的各类情况。

报警
除此之外，我们还为您创建的 Grafana 提供了完善多样的报警功能。
首先设置下 Grafana 报警的 Channel，如图 10 所示。

图 10

点击 New Channel 按钮，您可以在 Type 那边选择包括 Slack， Email 邮箱，Webhook 等十来种报警方式。

设置好报警的 Channel 以后，回到 Dashboard 界面，您就可以愉快的设置报警啦。比如说如图 11，我们设置了一个响应时间大于 1000ms 的报警

图 11

LogDB 采用的是基于 Elasticsearch 协议的报警，这个 Grafana 的功能是七牛独家哦！
那么您可以看到报警形式是怎么样的呢？

图 12

看到图 12 Slack 上的报警了吗？除了基本的文字，还会带上酷炫的报警图片！图片都会被存储到您七牛云存储的 bucket( grafana-alert-images ) 里面！

图 13

邮件报警内容也一样酷炫！

离线分析

除了实时的分析外，您还可以创建离线的XSpark，分析更多更久的海量数据，详见 [XSpark使用入门]。

本文转载自: 掘金

开发者博客 – 和开发相关的这里全都有

JS正则表达式完整教程（略长）

发表于 2017-07-12

注：本文已经整理成电子书：《JavaScript正则迷你书》

引言

亲爱的读者朋友，如果你点开了这篇文章，说明你对正则很感兴趣。

想必你也了解正则的重要性，在我看来正则表达式是衡量程序员水平的一个侧面标准。

关于正则表达式的教程，网上也有很多，相信你也看了一些。

与之不同的是，本文的目的是希望所有认真读完的童鞋们，都有实质性的提高。

本文内容共有七章，用JavaScript语言完整地讨论了正则表达式的方方面面。

如果觉得文章某块儿没有说明白清楚，欢迎留言，能力范围之内，老姚必做详细解答。

具体章节如下：

引言
第一章正则表达式字符匹配攻略
第二章正则表达式位置匹配攻略
第三章正则表达式括号的作用
第四章正则表达式回溯法原理
第五章正则表达式的拆分
第六章正则表达式的构建
第七章正则表达式编程
后记

下面简单地说说每一章都讨论了什么？

正则是匹配模式，要么匹配字符，要么匹配位置。

第1章和第2章以这个角度去讲解了正则的基础。

在正则中可以使用括号捕获数据，要么在API中进行分组引用，要么在正则里进行反向引用。

这是第3章的主题，讲解了正则中括号的作用。

学习正则表达式，是需要了解其匹配原理的。

第4章，讲解了正则了正则表达式的回溯法原理。另外在第6章里，也讲解了正则的表达式的整体工作原理。

不仅能看懂别人的正则，还要自己会写正则。

第5章，是从读的角度，去拆分一个正则表达式，而第6章是从写的角度，去构建一个正则表达式。

学习正则，是为了在真实世界里应用的。

第7章讲解了正则的用法，和相关API需要注意的地方。

如何阅读本文？

我的建议是阅读两遍。第一遍，不求甚解地快速阅读一遍。阅读过程中遇到的问题不妨记录下来，也许阅读完毕后就能解决很多。然后有时间的话，再带着问题去精读第二遍。

深呼吸，开始我们的正则表达式旅程吧。我在终点等你。

第一章正则表达式字符匹配攻略

正则表达式是匹配模式，要么匹配字符，要么匹配位置。请记住这句话。

然而关于正则如何匹配字符的学习，大部分人都觉得这块比较杂乱。

毕竟元字符太多了，看起来没有系统性，不好记。本章就解决这个问题。

内容包括：

两种模糊匹配
字符组
量词
分支结构
案例分析

1 两种模糊匹配

如果正则只有精确匹配是没多大意义的，比如/hello/，也只能匹配字符串中的”hello”这个子串。

1
2
3

复制代码var regex = /hello/;
console.log( regex.test("hello") ); 
// => true

正则表达式之所以强大，是因为其能实现模糊匹配。

而模糊匹配，有两个方向上的“模糊”：横向模糊和纵向模糊。

1.1 横向模糊匹配

横向模糊指的是，一个正则可匹配的字符串的长度不是固定的，可以是多种情况的。

其实现的方式是使用量词。譬如{m,n}，表示连续出现最少m次，最多n次。

比如/ab{2,5}c/表示匹配这样一个字符串：第一个字符是“a”，接下来是2到5个字符“b”，最后是字符“c”。测试如下：

复制代码var regex = /ab{2,5}c/g;
var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
console.log( string.match(regex) ); 
// => ["abbc", "abbbc", "abbbbc", "abbbbbc"]

注意：案例中用的正则是/ab{2,5}c/g，后面多了g，它是正则的一个修饰符。表示全局匹配，即在目标字符串中按顺序找到满足匹配模式的所有子串，强调的是“所有”，而不只是“第一个”。g是单词global的首字母。

1.2 纵向模糊匹配

纵向模糊指的是，一个正则匹配的字符串，具体到某一位字符时，它可以不是某个确定的字符，可以有多种可能。

其实现的方式是使用字符组。譬如[abc]，表示该字符是可以字符“a”、“b”、“c”中的任何一个。

比如/a[123]b/可以匹配如下三种字符串：”a1b”、”a2b”、”a3b”。测试如下：

复制代码var regex = /a[123]b/g;
var string = "a0b a1b a2b a3b a4b";
console.log( string.match(regex) ); 
// => ["a1b", "a2b", "a3b"]

以上就是本章讲的主体内容，只要掌握横向和纵向模糊匹配，就能解决很大部分正则匹配问题。

接下来的内容就是展开说了，如果对此都比较熟悉的话，可以跳过，直接看本章案例那节。

2. 字符组

需要强调的是，虽叫字符组（字符类），但只是其中一个字符。例如[abc]，表示匹配一个字符，它可以是“a”、“b”、“c”之一。

2.1 范围表示法

如果字符组里的字符特别多的话，怎么办？可以使用范围表示法。

比如[123456abcdefGHIJKLM]，可以写成[1-6a-fG-M]。用连字符-来省略和简写。

因为连字符有特殊用途，那么要匹配“a”、“-”、“z”这三者中任意一个字符，该怎么做呢？

不能写成[a-z]，因为其表示小写字符中的任何一个字符。

可以写成如下的方式：[-az]或[az-]或[a\-z]。即要么放在开头，要么放在结尾，要么转义。总之不会让引擎认为是范围表示法就行了。

2.2 排除字符组

纵向模糊匹配，还有一种情形就是，某位字符可以是任何东西，但就不能是”a”、”b”、”c”。

此时就是排除字符组（反义字符组）的概念。例如[^abc]，表示是一个除”a”、”b”、”c”之外的任意一个字符。字符组的第一位放^（脱字符），表示求反的概念。

当然，也有相应的范围表示法。

2.3 常见的简写形式

有了字符组的概念后，一些常见的符号我们也就理解了。因为它们都是系统自带的简写形式。

\d就是[0-9]。表示是一位数字。记忆方式：其英文是digit（数字）。

\D就是[^0-9]。表示除数字外的任意字符。

\w就是[0-9a-zA-Z_]。表示数字、大小写字母和下划线。记忆方式：w是word的简写，也称单词字符。

\W是[^0-9a-zA-Z_]。非单词字符。

\s是[ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。记忆方式：s是space character的首字母。

\S是[^ \t\v\n\r\f]。非空白符。

.就是[^\n\r\u2028\u2029]。通配符，表示几乎任意字符。换行符、回车符、行分隔符和段分隔符除外。记忆方式：想想省略号…中的每个点，都可以理解成占位符，表示任何类似的东西。

如果要匹配任意字符怎么办？可以使用[\d\D]、[\w\W]、[\s\S]和[^]中任何的一个。

3. 量词

量词也称重复。掌握{m,n}的准确含义后，只需要记住一些简写形式。

3.1 简写形式

**{m,}** 表示至少出现m次。

**{m}** 等价于{m,m}，表示出现m次。

**?** 等价于{0,1}，表示出现或者不出现。记忆方式：问号的意思表示，有吗？

**+** 等价于{1,}，表示出现至少一次。记忆方式：加号是追加的意思，得先有一个，然后才考虑追加。

***** 等价于{0,}，表示出现任意次，有可能不出现。记忆方式：看看天上的星星，可能一颗没有，可能零散有几颗，可能数也数不过来。

3.2 贪婪匹配和惰性匹配

看如下的例子：

复制代码var regex = /\d{2,5}/g;
var string = "123 1234 12345 123456";
console.log( string.match(regex) ); 
// => ["123", "1234", "12345", "12345"]

其中正则/\d{2,5}/，表示数字连续出现2到5次。会匹配2位、3位、4位、5位连续数字。

但是其是贪婪的，它会尽可能多的匹配。你能给我6个，我就要5个。你能给我3个，我就3要个。反正只要在能力范围内，越多越好。

我们知道有时贪婪不是一件好事（请看文章最后一个例子）。而惰性匹配，就是尽可能少的匹配：

复制代码var regex = /\d{2,5}?/g;
var string = "123 1234 12345 123456";
console.log( string.match(regex) ); 
// => ["12", "12", "34", "12", "34", "12", "34", "56"]

其中/\d{2,5}?/表示，虽然2到5次都行，当2个就够的时候，就不在往下尝试了。

通过在量词后面加个问号就能实现惰性匹配，因此所有惰性匹配情形如下：

**{m,n}?**
**{m,}?**
**??**
**+?**
***?**

对惰性匹配的记忆方式是：量词后面加个问号，问一问你知足了吗，你很贪婪吗？

4. 多选分支

一个模式可以实现横向和纵向模糊匹配。而多选分支可以支持多个子模式任选其一。

具体形式如下：(p1|p2|p3)，其中p1、p2和p3是子模式，用|（管道符）分隔，表示其中任何之一。

例如要匹配”good”和”nice”可以使用/good|nice/。测试如下：

复制代码var regex = /good|nice/g;
var string = "good idea, nice try.";
console.log( string.match(regex) ); 
// => ["good", "nice"]

但有个事实我们应该注意，比如我用/good|goodbye/，去匹配”goodbye”字符串时，结果是”good”：

复制代码var regex = /good|goodbye/g;
var string = "goodbye";
console.log( string.match(regex) ); 
// => ["good"]

而把正则改成/goodbye|good/，结果是：

复制代码var regex = /goodbye|good/g;
var string = "goodbye";
console.log( string.match(regex) ); 
// => ["goodbye"]

也就是说，分支结构也是惰性的，即当前面的匹配上了，后面的就不再尝试了。

5. 案例分析

匹配字符，无非就是字符组、量词和分支结构的组合使用罢了。

下面找几个例子演练一下（其中，每个正则并不是只有唯一写法）：

5.1 匹配16进制颜色值

要求匹配：

#ffbbad

#Fc01DF

#FFF

#ffE

分析：

表示一个16进制字符，可以用字符组[0-9a-fA-F]。

其中字符可以出现3或6次，需要是用量词和分支结构。

使用分支结构时，需要注意顺序。

正则如下：

复制代码var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
var string = "#ffbbad #Fc01DF #FFF #ffE";
console.log( string.match(regex) ); 
// => ["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]

5.2 匹配时间

以24小时制为例。

要求匹配：

23:59

02:07

分析：

共4位数字，第一位数字可以为[0-2]。

当第1位为2时，第2位可以为[0-3]，其他情况时，第2位为[0-9]。

第3位数字为[0-5]，第4位为[0-9]

正则如下：

复制代码var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;
console.log( regex.test("23:59") ); 
console.log( regex.test("02:07") ); 
// => true
// => true

如果也要求匹配7:9，也就是说时分前面的0可以省略。

此时正则变成：

复制代码var regex = /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;
console.log( regex.test("23:59") ); 
console.log( regex.test("02:07") ); 
console.log( regex.test("7:9") ); 
// => true
// => true
// => true

5.3 匹配日期

比如yyyy-mm-dd格式为例。

要求匹配：

2017-06-10

分析：

年，四位数字即可，可用[0-9]{4}。

月，共12个月，分两种情况01、02、……、09和10、11、12，可用(0[1-9]|1[0-2])。

日，最大31天，可用(0[1-9]|[12][0-9]|3[01])。

正则如下：

1
2
3

复制代码var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
console.log( regex.test("2017-06-10") ); 
// => true

5.4 window操作系统文件路径

要求匹配：

F:\study\javascript\regex\regular expression.pdf

F:\study\javascript\regex\

F:\study\javascript

F:\

分析：

整体模式是: 盘符:\文件夹\文件夹\文件夹\

其中匹配F:\，需要使用[a-zA-Z]:\\，其中盘符不区分大小写，注意\字符需要转义。

文件名或者文件夹名，不能包含一些特殊字符，此时我们需要排除字符组[^\\:*<>|"?\r\n/]来表示合法字符。另外不能为空名，至少有一个字符，也就是要使用量词+。因此匹配“文件夹\”，可用[^\\:*<>|"?\r\n/]+\\。

另外“文件夹\”，可以出现任意次。也就是([^\\:*<>|"?\r\n/]+\\)*。其中括号提供子表达式。

路径的最后一部分可以是“文件夹”，没有\，因此需要添加([^\\:*<>|"?\r\n/]+)?。

最后拼接成了一个看起来比较复杂的正则：

复制代码var regex = /^[a-zA-Z]:\\([^\\:*<>|"?\r\n/]+\\)*([^\\:*<>|"?\r\n/]+)?$/;
console.log( regex.test("F:\\study\\javascript\\regex\\regular expression.pdf") ); 
console.log( regex.test("F:\\study\\javascript\\regex\\") ); 
console.log( regex.test("F:\\study\\javascript") ); 
console.log( regex.test("F:\\") ); 
// => true
// => true
// => true
// => true

其中，JS中字符串表示\时，也要转义。

5.5 匹配id

要求从

提取出id=”container”。

可能最开始想到的正则是：

复制代码var regex = /id=".*"/
var string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]); 
// => id="container" class="main"

因为.是通配符，本身就匹配双引号的，而量词*又是贪婪的，当遇到container后面双引号时，不会停下来，会继续匹配，直到遇到最后一个双引号为止。

解决之道，可以使用惰性匹配：

复制代码var regex = /id=".*?"/
var string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]); 
// => id="container"

当然，这样也会有个问题。效率比较低，因为其匹配原理会涉及到“回溯”这个概念（这里也只是顺便提一下，第四章会详细说明）。可以优化如下：

复制代码var regex = /id="[^"]*"/
var string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]); 
// => id="container"

第1章小结

字符匹配相关的案例，挺多的，不一而足。

掌握字符组和量词就能解决大部分常见的情形，也就是说，当你会了这二者，JS正则算是入门了。

第二章正则表达式位置匹配攻略

正则表达式是匹配模式，要么匹配字符，要么匹配位置。请记住这句话。

然而大部分人学习正则时，对于匹配位置的重视程度没有那么高。

本章讲讲正则匹配位置的总总。

内容包括：

什么是位置？
如何匹配位置？
位置的特性
几个应用实例分析

1. 什么是位置呢？

位置是相邻字符之间的位置。比如，下图中箭头所指的地方：

2. 如何匹配位置呢？

在ES5中，共有6个锚字符：

**^** **$** **\b** **\B** **(?=p)** **(?!p)**

2.1 ^和$

^（脱字符）匹配开头，在多行匹配中匹配行开头。

$（美元符号）匹配结尾，在多行匹配中匹配行结尾。

比如我们把字符串的开头和结尾用”#”替换（位置可以替换成字符的！）：

1
2
3

复制代码var result = "hello".replace(/^|$/g, '#');
console.log(result); 
// => "#hello#"

多行匹配模式时，二者是行的概念，这个需要我们的注意：

复制代码var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
console.log(result);
/*
#I#
#love#
#javascript#
*/

2.2 \b和\B

\b是单词边界，具体就是\w和\W之间的位置，也包括\w和^之间的位置，也包括\w和$之间的位置。

比如一个文件名是”[JS] Lesson_01.mp4”中的\b，如下：

1
2
3

复制代码var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result); 
// => "[#JS#] #Lesson_01#.#mp4#"

为什么是这样呢？这需要仔细看看。

首先，我们知道，\w是字符组[0-9a-zA-Z_]的简写形式，即\w是字母数字或者下划线的中任何一个字符。而\W是排除字符组[^0-9a-zA-Z_]的简写形式，即\W是\w以外的任何一个字符。

此时我们可以看看”[#JS#] #Lesson_01#.#mp4#”中的每一个”#”，是怎么来的。

第一个”#”，两边是”[“与”J”，是\W和\w之间的位置。
第二个”#”，两边是”S”与”]”，也就是\w和\W之间的位置。
第三个”#”，两边是空格与”L”，也就是\W和\w之间的位置。
第四个”#”，两边是”1”与”.”，也就是\w和\W之间的位置。
第五个”#”，两边是”.”与”m”，也就是\W和\w之间的位置。
第六个”#”，其对应的位置是结尾，但其前面的字符”4”是\w，即\w和$之间的位置。

知道了\b的概念后，那么\B也就相对好理解了。

\B就是\b的反面的意思，非单词边界。例如在字符串中所有位置中，扣掉\b，剩下的都是\B的。

具体说来就是\w与\w、\W与\W、^与\W，\W与$之间的位置。

比如上面的例子，把所有\B替换成”#”：

1
2
3

复制代码var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');
console.log(result); 
// => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"

2.3 (?=p)和(?!p)

(?=p)，其中p是一个子模式，即p前面的位置。

比如(?=l)，表示’l’字符前面的位置，例如：

1
2
3

复制代码var result = "hello".replace(/(?=l)/g, '#');
console.log(result); 
// => "he#l#lo"

而(?!p)就是(?=p)的反面意思，比如：

复制代码var result = "hello".replace(/(?!l)/g, '#');

console.log(result); 
// => "#h#ell#o#"

二者的学名分别是positive lookahead和negative lookahead。

中文翻译分别是正向先行断言和负向先行断言。

ES6中，还支持positive lookbehind和negative lookbehind。

具体是(?<=p)和(?<!p)。

也有书上把这四个东西，翻译成环视，即看看右边或看看左边。

但一般书上，没有很好强调这四者是个位置。

比如(?=p)，一般都理解成：要求接下来的字符与p匹配，但不能包括p的那些字符。

而在本人看来(?=p)就与^一样好理解，就是p前面的那个位置。

3. 位置的特性

对于位置的理解，我们可以理解成空字符””。

比如”hello”字符串等价于如下的形式：

1	复制代码"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "o" + "";

也等价于：

1	复制代码"hello" == "" + "" + "hello"

因此，把/^hello$/写成/^^hello?$/，是没有任何问题的：

1
2
3

复制代码var result = /^^hello?$/.test("hello");
console.log(result); 
// => true

甚至可以写成更复杂的:

1
2
3

复制代码var result = /(?=he)^^he(?=\w)llo$\b\b$/.test("hello");
console.log(result); 
// => true

也就是说字符之间的位置，可以写成多个。

把位置理解空字符，是对位置非常有效的理解方式。

4. 相关案例

4.1 不匹配任何东西的正则

让你写个正则不匹配任何东西

easy，/.^/

因为此正则要求只有一个字符，但该字符后面是开头。

4.2 数字的千位分隔符表示法

比如把”12345678”，变成”12,345,678”。

可见是需要把相应的位置替换成”,”。

思路是什么呢？

4.2.1 弄出最后一个逗号

使用(?=\d{3}$)就可以做到：

1
2
3

复制代码var result = "12345678".replace(/(?=\d{3}$)/g, ',')
console.log(result); 
// => "12345,678"

4.2.2 弄出所有的逗号

因为逗号出现的位置，要求后面3个数字一组，也就是\d{3}至少出现一次。

此时可以使用量词+：

1
2
3

复制代码var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')
console.log(result); 
// => "12,345,678"

4.2.3 匹配其余案例

写完正则后，要多验证几个案例，此时我们会发现问题：

1
2
3

复制代码var result = "123456789".replace(/(?=(\d{3})+$)/g, ',')
console.log(result); 
// => ",123,456,789"

因为上面的正则，仅仅表示把从结尾向前数，一但是3的倍数，就把其前面的位置替换成逗号。因此才会出现这个问题。

怎么解决呢？我们要求匹配的到这个位置不能是开头。

我们知道匹配开头可以使用^，但要求这个位置不是开头怎么办？

easy，(?!^)，你想到了吗？测试如下：

复制代码var string1 = "12345678",
string2 = "123456789";
reg = /(?!^)(?=(\d{3})+$)/g;

var result = string1.replace(reg, ',')
console.log(result); 
// => "12,345,678"

result = string2.replace(reg, ',');
console.log(result); 
// => "123,456,789"

4.2.4 支持其他形式

如果要把”12345678 123456789”替换成”12,345,678 123,456,789”。

此时我们需要修改正则，把里面的开头^和结尾$，替换成\b：

复制代码var string = "12345678 123456789",
reg = /(?!\b)(?=(\d{3})+\b)/g;

var result = string.replace(reg, ',')
console.log(result); 
// => "12,345,678 123,456,789"

其中(?!\b)怎么理解呢？

要求当前是一个位置，但不是\b前面的位置，其实(?!\b)说的就是\B。

因此最终正则变成了：/\B(?=(\d{3})+\b)/g。

4.3 验证密码问题

密码长度6-12位，由数字、小写字符和大写字母组成，但必须至少包括2种字符。

此题，如果写成多个正则来判断，比较容易。但要写成一个正则就比较困难。

那么，我们就来挑战一下。看看我们对位置的理解是否深刻。

4.3.1 简化

不考虑“但必须至少包括2种字符”这一条件。我们可以容易写出：

1	复制代码var reg = /^[0-9A-Za-z]{6,12}$/;

4.3.2 判断是否包含有某一种字符

假设，要求的必须包含数字，怎么办？此时我们可以使用(?=.*[0-9])来做。

因此正则变成：

1	复制代码var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;

4.3.3 同时包含具体两种字符

比如同时包含数字和小写字母，可以用(?=.*[0-9])(?=.*[a-z])来做。

因此正则变成：

1	复制代码var reg = /(?=.[0-9])(?=.[a-z])^[0-9A-Za-z]{6,12}$/;

4.3.4 解答

我们可以把原题变成下列几种情况之一：

同时包含数字和小写字母
同时包含数字和大写字母
同时包含小写字母和大写字母
同时包含数字、小写字母和大写字母

以上的4种情况是或的关系（实际上，可以不用第4条）。

最终答案是：

复制代码var reg = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9A-Za-z]{6,12}$/;
console.log( reg.test("1234567") ); // false 全是数字
console.log( reg.test("abcdef") ); // false 全是小写字母
console.log( reg.test("ABCDEFGH") ); // false 全是大写字母
console.log( reg.test("ab23C") ); // false 不足6位
console.log( reg.test("ABCDEF234") ); // true 大写字母和数字
console.log( reg.test("abcdEF234") ); // true 三者都有

4.3.5 解惑

上面的正则看起来比较复杂，只要理解了第二步，其余就全部理解了。

/(?=.*[0-9])^[0-9A-Za-z]{6,12}$/

对于这个正则，我们只需要弄明白(?=.*[0-9])^即可。

分开来看就是(?=.*[0-9])和^。

表示开头前面还有个位置（当然也是开头，即同一个位置，想想之前的空字符类比）。

(?=.*[0-9])表示该位置后面的字符匹配.*[0-9]，即，有任何多个任意字符，后面再跟个数字。

翻译成大白话，就是接下来的字符，必须包含个数字。

4.3.6 另外一种解法

“至少包含两种字符”的意思就是说，不能全部都是数字，也不能全部都是小写字母，也不能全部都是大写字母。

那么要求“不能全部都是数字”，怎么做呢？(?!p)出马！

对应的正则是：

1	复制代码var reg = /(?!^[0-9]{6,12}$)^[0-9A-Za-z]{6,12}$/;

三种“都不能”呢？

最终答案是：

复制代码var reg = /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;
console.log( reg.test("1234567") ); // false 全是数字
console.log( reg.test("abcdef") ); // false 全是小写字母
console.log( reg.test("ABCDEFGH") ); // false 全是大写字母
console.log( reg.test("ab23C") ); // false 不足6位
console.log( reg.test("ABCDEF234") ); // true 大写字母和数字
console.log( reg.test("abcdEF234") ); // true 三者都有

第二章小结

位置匹配相关的案例，挺多的，不一而足。

掌握匹配位置的这6个锚字符，给我们解决正则问题一个新工具。

第三章正则表达式括号的作用

不管哪门语言中都有括号。正则表达式也是一门语言，而括号的存在使这门语言更为强大。

对括号的使用是否得心应手，是衡量对正则的掌握水平的一个侧面标准。

括号的作用，其实三言两语就能说明白，括号提供了分组，便于我们引用它。

引用某个分组，会有两种情形：在JavaScript里引用它，在正则表达式里引用它。

本章内容虽相对简单，但我也要写长点。

内容包括：

分组和分支结构
捕获分组
反向引用
非捕获分组
相关案例

1. 分组和分支结构

这二者是括号最直觉的作用，也是最原始的功能。

1.1 分组

我们知道/a+/匹配连续出现的“a”，而要匹配连续出现的“ab”时，需要使用/(ab)+/。

其中括号是提供分组功能，使量词+作用于“ab”这个整体，测试如下：

复制代码var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) ); 
// => ["abab", "ab", "ababab"]

1.2 分支结构

而在多选分支结构(p1|p2)中，此处括号的作用也是不言而喻的，提供了子表达式的所有可能。

比如，要匹配如下的字符串：

I love JavaScript

I love Regular Expression

可以使用正则：

复制代码var regex = /^I love (JavaScript|Regular Expression)$/;
console.log( regex.test("I love JavaScript") );
console.log( regex.test("I love Regular Expression") );
// => true
// => true

如果去掉正则中的括号，即/^I love JavaScript|Regular Expression$/，匹配字符串是”I love JavaScript”和”Regular Expression”，当然这不是我们想要的。

2. 引用分组

这是括号一个重要的作用，有了它，我们就可以进行数据提取，以及更强大的替换操作。

而要使用它带来的好处，必须配合使用实现环境的API。

以日期为例。假设格式是yyyy-mm-dd的，我们可以先写一个简单的正则：

1	复制代码var regex = /\d{4}-\d{2}-\d{2}/;

然后再修改成括号版的：

1	复制代码var regex = /(\d{4})-(\d{2})-(\d{2})/;

为什么要使用这个正则呢？

2.1 提取数据

比如提取出年、月、日，可以这么做：

复制代码var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( string.match(regex) ); 
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

match返回的一个数组，第一个元素是整体匹配结果，然后是各个分组（括号里）匹配的内容，然后是匹配下标，最后是输入的文本。（注意：如果正则是否有修饰符g，match返回的数组格式是不一样的）。

另外也可以使用正则对象的exec方法：

复制代码var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( regex.exec(string) ); 
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

同时，也可以使用构造函数的全局属性$1至$9来获取：

复制代码var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";

regex.test(string); // 正则操作即可，例如
//regex.exec(string);
//string.match(regex);

console.log(RegExp.$1); // "2017"
console.log(RegExp.$2); // "06"
console.log(RegExp.$3); // "12"

2.2 替换

比如，想把yyyy-mm-dd格式，替换成mm/dd/yyyy怎么做？

复制代码var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); 
// => "06/12/2017"

其中replace中的，第二个参数里用$1、$2、$3指代相应的分组。等价于如下的形式：

复制代码var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function() {
	return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;
});
console.log(result); 
// => "06/12/2017"

也等价于：

复制代码var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function(match, year, month, day) {
	return month + "/" + day + "/" + year;
});
console.log(result); 
// => "06/12/2017"

3. 反向引用

除了使用相应API来引用分组，也可以在正则本身里引用分组。但只能引用之前出现的分组，即反向引用。

还是以日期为例。

比如要写一个正则支持匹配如下三种格式：

2016-06-12

2016/06/12

2016.06.12

最先可能想到的正则是:

复制代码var regex = /\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // true

其中/和.需要转义。虽然匹配了要求的情况，但也匹配”2016-06/12”这样的数据。

假设我们想要求分割符前后一致怎么办？此时需要使用反向引用：

复制代码var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false

注意里面的\1，表示的引用之前的那个分组(-|\/|\.)。不管它匹配到什么（比如-），\1都匹配那个同样的具体某个字符。

我们知道了\1的含义后，那么\2和\3的概念也就理解了，即分别指代第二个和第三个分组。

看到这里，此时，恐怕你会有三个问题。

3.1 括号嵌套怎么办？

以左括号（开括号）为准。比如：

复制代码var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
var string = "1231231233";
console.log( regex.test(string) ); // true
console.log( RegExp.$1 ); // 123
console.log( RegExp.$2 ); // 1
console.log( RegExp.$3 ); // 23
console.log( RegExp.$4 ); // 3

我们可以看看这个正则匹配模式：

第一个字符是数字，比如说1，
第二个字符是数字，比如说2，
第三个字符是数字，比如说3，
接下来的是\1，是第一个分组内容，那么看第一个开括号对应的分组是什么，是123，
接下来的是\2，找到第2个开括号，对应的分组，匹配的内容是1，
接下来的是\3，找到第3个开括号，对应的分组，匹配的内容是23，
最后的是\4，找到第3个开括号，对应的分组，匹配的内容是3。

这个问题，估计仔细看一下，就该明白了。

3.2 \10表示什么呢？

另外一个疑问可能是，即\10是表示第10个分组，还是\1和0呢？

答案是前者，虽然一个正则里出现\10比较罕见。测试如下：

复制代码var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
var string = "123456789# ######"
console.log( regex.test(string) );
// => true

3.3 引用不存在的分组会怎样？

因为反向引用，是引用前面的分组，但我们在正则里引用了不存在的分组时，此时正则不会报错，只是匹配反向引用的字符本身。例如\2，就匹配”\2”。注意”\2”表示对”2”进行了转意。

1
2
3

复制代码var regex = /\1\2\3\4\5\6\7\8\9/;
console.log( regex.test("\1\2\3\4\5\6\7\8\9") ); 
console.log( "\1\2\3\4\5\6\7\8\9".split("") );

chrome浏览器打印的结果：

4. 非捕获分组

之前文中出现的分组，都会捕获它们匹配到的数据，以便后续引用，因此也称他们是捕获型分组。

如果只想要括号最原始的功能，但不会引用它，即，既不在API里引用，也不在正则里反向引用。此时可以使用非捕获分组(?:p)，例如本文第一个例子可以修改为：

复制代码var regex = /(?:ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) ); 
// => ["abab", "ab", "ababab"]

5. 相关案例

至此括号的作用已经讲完了，总结一句话，就是提供了可供我们使用的分组，如何用就看我们的了。

5.1 字符串trim方法模拟

trim方法是去掉字符串的开头和结尾的空白符。有两种思路去做。

第一种，匹配到开头和结尾的空白符，然后替换成空字符。如：

复制代码function trim(str) {
	return str.replace(/^\s+|\s+$/g, '');
}
console.log( trim("  foobar   ") ); 
// => "foobar"

第二种，匹配整个字符串，然后用引用来提取出相应的数据：

复制代码function trim(str) {
	return str.replace(/^\s*(.*?)\s*$/g, "$1");
}
console.log( trim("  foobar   ") ); 
// => "foobar"

这里使用了惰性匹配*?，不然也会匹配最后一个空格之前的所有空格的。

当然，前者效率高。

5.2 将每个单词的首字母转换为大写

复制代码function titleize(str) {
	return str.toLowerCase().replace(/(?:^|\s)\w/g, function(c) {
		return c.toUpperCase();
	});
}
console.log( titleize('my name is epeli') ); 
// => "My Name Is Epeli"

思路是找到每个单词的首字母，当然这里不使用非捕获匹配也是可以的。

5.3 驼峰化

复制代码function camelize(str) {
	return str.replace(/[-_\s]+(.)?/g, function(match, c) {
		return c ? c.toUpperCase() : '';
	});
}
console.log( camelize('-moz-transform') ); 
// => "MozTransform"

其中分组(.)表示首字母。单词的界定是，前面的字符可以是多个连字符、下划线以及空白符。正则后面的?的目的，是为了应对str尾部的字符可能不是单词字符，比如str是’-moz-transform ‘。

5.4 中划线化

复制代码function dasherize(str) {
	return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase();
}
console.log( dasherize('MozTransform') ); 
// => "-moz-transform"

驼峰化的逆过程。

5.5 html转义和反转义

复制代码// 将HTML特殊字符转换成等值的实体
function escapeHTML(str) {
	var escapeChars = {
	  '¢' : 'cent',
	  '£' : 'pound',
	  '¥' : 'yen',
	  '€': 'euro',
	  '©' :'copy',
	  '®' : 'reg',
	  '<' : 'lt',
	  '>' : 'gt',
	  '"' : 'quot',
	  '&' : 'amp',
	  '\'' : '#39'
	};
	return str.replace(new RegExp('[' + Object.keys(escapeChars).join('') +']', 'g'), function(match) {
		return '&' + escapeChars[match] + ';';
	});
}
console.log( escapeHTML('<div>Blah blah blah</div>') );
// => "&lt;div&gt;Blah blah blah&lt;/div&gt";

其中使用了用构造函数生成的正则，然后替换相应的格式就行了，这个跟本章没多大关系。

倒是它的逆过程，使用了括号，以便提供引用，也很简单，如下：

复制代码// 实体字符转换为等值的HTML。
function unescapeHTML(str) {
	var htmlEntities = {
	  nbsp: ' ',
	  cent: '¢',
	  pound: '£',
	  yen: '¥',
	  euro: '€',
	  copy: '©',
	  reg: '®',
	  lt: '<',
	  gt: '>',
	  quot: '"',
	  amp: '&',
	  apos: '\''
	};
	return str.replace(/\&([^;]+);/g, function(match, key) {
		if (key in htmlEntities) {
			return htmlEntities[key];
		}
		return match;
	});
}
console.log( unescapeHTML('&lt;div&gt;Blah blah blah&lt;/div&gt;') );
// => "<div>Blah blah blah</div>"

通过key获取相应的分组引用，然后作为对象的键。

5.6 匹配成对标签

要求匹配：

regular expression
laoyao bye bye

不匹配：

wrong!<p></p>

匹配一个开标签，可以使用正则<[^>]+>，

匹配一个闭标签，可以使用<\/[^>]+>，

但是要求匹配成对标签，那就需要使用反向引用，如：

复制代码var regex = /<([^>]+)>[\d\D]*<\/\1>/;
var string1 = "<title>regular expression</title>";
var string2 = "<p>laoyao bye bye</p>";
var string3 = "<title>wrong!</p>";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // false

其中开标签<[^>]+>改成<([^>]+)>，使用括号的目的是为了后面使用反向引用，而提供分组。闭标签使用了反向引用，<\/\1>。

另外[\d\D]的意思是，这个字符是数字或者不是数字，因此，也就是匹配任意字符的意思。

第三章小结

正则中使用括号的例子那可是太多了，不一而足。

重点理解括号可以提供分组，我们可以提取数据，应该就可以了。

例子中的代码，基本没做多少分析，相信你都能看懂的。

第4章正则表达式回溯法原理

学习正则表达式，是需要懂点儿匹配原理的。

而研究匹配原理时，有两个字出现的频率比较高：“回溯”。

听起来挺高大上，确实还有很多人对此不明不白的。

因此，本章就简单扼要地说清楚回溯到底是什么东西。

内容包括：

没有回溯的匹配
有回溯的匹配
常见的回溯形式

1. 没有回溯的匹配

假设我们的正则是/ab{1,3}c/，其可视化形式是：

而当目标字符串是”abbbc”时，就没有所谓的“回溯”。其匹配过程是：

其中子表达式b{1,3}表示“b”字符连续出现1到3次。

2. 有回溯的匹配

如果目标字符串是”abbc”，中间就有回溯。

图中第5步有红颜色，表示匹配不成功。此时b{1,3}已经匹配到了2个字符“b”，准备尝试第三个时，结果发现接下来的字符是“c”。那么就认为b{1,3}就已经匹配完毕。然后状态又回到之前的状态（即第6步，与第4步一样），最后再用子表达式c，去匹配字符“c”。当然，此时整个表达式匹配成功了。

图中的第6步，就是“回溯”。

你可能对此没有感觉，这里我们再举一个例子。正则是：

目标字符串是”abbbc”，匹配过程是：

其中第7步和第10步是回溯。第7步与第4步一样，此时b{1,3}匹配了两个”b”，而第10步与第3步一样，此时b{1,3}只匹配了一个”b”，这也是b{1,3}的最终匹配结果。

这里再看一个清晰的回溯，正则是：

目标字符串是：”acd”ef，匹配过程是：

图中省略了尝试匹配双引号失败的过程。可以看出.*是非常影响效率的。

为了减少一些不必要的回溯，可以把正则修改为/"[^"]*"/。

3. 常见的回溯形式

正则表达式匹配字符串的这种方式，有个学名，叫回溯法。

回溯法也称试探法，它的基本思想是：从问题的某一种状态（初始状态）出发，搜索从这种状态出发所能达到的所有“状态”，当一条路走到“尽头”的时候（不能再前进），再后退一步或若干步，从另一种可能“状态”出发，继续搜索，直到所有的“路径”（状态）都试探过。这种不断“前进”、不断“回溯”寻找解的方法，就称作“回溯法”。（copy于百度百科）。

本质上就是深度优先搜索算法。其中退到之前的某一步这一过程，我们称为“回溯”。从上面的描述过程中，可以看出，路走不通时，就会发生“回溯”。即，尝试匹配失败时，接下来的一步通常就是回溯。

道理，我们是懂了。那么JS中正则表达式会产生回溯的地方都有哪些呢？

3.1 贪婪量词

之前的例子都是贪婪量词相关的。比如b{1,3}，因为其是贪婪的，尝试可能的顺序是从多往少的方向去尝试。首先会尝试”bbb”，然后再看整个正则是否能匹配。不能匹配时，吐出一个”b”，即在”bb”的基础上，再继续尝试。如果还不行，再吐出一个，再试。如果还不行呢？只能说明匹配失败了。

虽然局部匹配是贪婪的，但也要满足整体能正确匹配。否则，皮之不存，毛将焉附？

此时我们不禁会问，如果当多个贪婪量词挨着存在，并相互有冲突时，此时会是怎样？

答案是，先下手为强！因为深度优先搜索。测试如下：

复制代码var string = "12345";
var regex = /(\d{1,3})(\d{1,3})/;
console.log( string.match(regex) );
// => ["12345", "123", "45", index: 0, input: "12345"]

其中，前面的\d{1,3}匹配的是”123”，后面的\d{1,3}匹配的是”45”。

3.2 惰性量词

惰性量词就是在贪婪量词后面加个问号。表示尽可能少的匹配，比如：

复制代码var string = "12345";
var regex = /(\d{1,3}?)(\d{1,3})/;
console.log( string.match(regex) );
// => ["1234", "1", "234", index: 0, input: "12345"]

其中\d{1,3}?只匹配到一个字符”1”，而后面的\d{1,3}匹配了”234”。

虽然惰性量词不贪，但也会有回溯的现象。比如正则是：

目标字符串是”12345”，匹配过程是：

知道你不贪、很知足，但是为了整体匹配成，没办法，也只能给你多塞点了。因此最后\d{1,3}?匹配的字符是”12”，是两个数字，而不是一个。

3.3 分支结构

我们知道分支也是惰性的，比如/can|candy/，去匹配字符串”candy”，得到的结果是”can”，因为分支会一个一个尝试，如果前面的满足了，后面就不会再试验了。

分支结构，可能前面的子模式会形成了局部匹配，如果接下来表达式整体不匹配时，仍会继续尝试剩下的分支。这种尝试也可以看成一种回溯。

比如正则：

目标字符串是”candy”，匹配过程：

上面第5步，虽然没有回到之前的状态，但仍然回到了分支结构，尝试下一种可能。所以，可以认为它是一种回溯的。

第四章小结

其实回溯法，很容易掌握的。

简单总结就是，正因为有多种可能，所以要一个一个试。直到，要么到某一步时，整体匹配成功了；要么最后都试完后，发现整体匹配不成功。

贪婪量词“试”的策略是：买衣服砍价。价钱太高了，便宜点，不行，再便宜点。
惰性量词“试”的策略是：卖东西加价。给少了，再多给点行不，还有点少啊，再给点。
分支结构“试”的策略是：货比三家。这家不行，换一家吧，还不行，再换。

既然有回溯的过程，那么匹配效率肯定低一些。相对谁呢？相对那些DFA引擎。

而JS的正则引擎是NFA，NFA是“非确定型有限自动机”的简写。

大部分语言中的正则都是NFA，为啥它这么流行呢？

答：你别看我匹配慢，但是我编译快啊，而且我还有趣哦。

第5章正则表达式的拆分

对于一门语言的掌握程度怎么样，可以有两个角度来衡量：读和写。

不仅要求自己能解决问题，还要看懂别人的解决方案。代码是这样，正则表达式也是这样。

正则这门语言跟其他语言有一点不同，它通常就是一大堆字符，而没有所谓“语句”的概念。

如何能正确地把一大串正则拆分成一块一块的，成为了破解“天书”的关键。

本章就解决这一问题，内容包括：

结构和操作符
注意要点
案例分析

1. 结构和操作符

编程语言一般都有操作符。只要有操作符，就会出现一个问题。当一大堆操作在一起时，先操作谁，又后操作谁呢？为了不产生歧义，就需要语言本身定义好操作顺序，即所谓的优先级。

而在正则表达式中，操作符都体现在结构中，即由特殊字符和普通字符所代表的一个个特殊整体。

JS正则表达式中，都有哪些结构呢？

字符字面量、字符组、量词、锚字符、分组、选择分支、反向引用。

具体含义简要回顾如下（如懂，可以略去不看）：

字面量，匹配一个具体字符，包括不用转义的和需要转义的。比如a匹配字符”a”，又比如\n匹配换行符，又比如\.匹配小数点。

字符组，匹配一个字符，可以是多种可能之一，比如[0-9]，表示匹配一个数字。也有\d的简写形式。另外还有反义字符组，表示可以是除了特定字符之外任何一个字符，比如[^0-9]，表示一个非数字字符，也有\D的简写形式。

量词，表示一个字符连续出现，比如a{1,3}表示“a”字符连续出现3次。另外还有常见的简写形式，比如a+表示“a”字符连续出现至少一次。

锚点，匹配一个位置，而不是字符。比如^匹配字符串的开头，又比如\b匹配单词边界，又比如(?=\d)表示数字前面的位置。

分组，用括号表示一个整体，比如(ab)+，表示”ab”两个字符连续出现多次，也可以使用非捕获分组(?:ab)+。

分支，多个子表达式多选一，比如abc|bcd，表达式匹配”abc”或者”bcd”字符子串。

反向引用，比如\2，表示引用第2个分组。

其中涉及到的操作符有：

1.转义符 \
2.括号和方括号 (...)、(?:...)、(?=...)、(?!...)、[...]
3.量词限定符 {m}、{m,n}、{m,}、?、*、+
4.位置和序列 ^ 、$、 \元字符、 一般字符
5. 管道符（竖杠）|

上面操作符的优先级从上至下，由高到低。

这里，我们来分析一个正则：

/ab?(c|de*)+|fg/

由于括号的存在，所以，(c|de*)是一个整体结构。
在(c|de*)中，注意其中的量词*，因此e*是一个整体结构。
又因为分支结构“|”优先级最低，因此c是一个整体、而de*是另一个整体。
同理，整个正则分成了 a、b?、(...)+、f、g。而由于分支的原因，又可以分成ab?(c|de*)+和fg这两部分。

希望你没被我绕晕，上面的分析可用其可视化形式描述如下：

2. 注意要点

关于结构和操作符，还是有几点需要强调：

2.1 匹配字符串整体问题

因为是要匹配整个字符串，我们经常会在正则前后中加上锚字符^和$。

比如要匹配目标字符串”abc”或者”bcd”时，如果一不小心，就会写成/^abc|bcd$/。

而位置字符和字符序列优先级要比竖杠高，故其匹配的结构是：

应该修改成:

2.2 量词连缀问题

假设，要匹配这样的字符串：

每个字符为a、b、c任选其一

字符串的长度是3的倍数

此时正则不能想当然地写成/^[abc]{3}+$/，这样会报错，说+前面没什么可重复的：

此时要修改成：

2.3 元字符转义问题

所谓元字符，就是正则中有特殊含义的字符。

所有结构里，用到的元字符总结如下：

**^**``**$**``**.**``*****``**+**``**?**``**|**``**\**``**/**``**(**``**)**``**[**``**]**``**{**``**}**``**=**``**!**``**:**``**-**``**,**

当匹配上面的字符本身时，可以一律转义：

复制代码var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,/;
console.log( regex.test(string) ); 
// => true

其中string中的\字符也要转义的。

另外，在string中，也可以把每个字符转义，当然，转义后的结果仍是本身：

复制代码var string = "^$.*+?|\\/[]{}=!:-,";
var string2 = "\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,";
console.log( string == string2 ); 
// => true

现在的问题是，是不是每个字符都需要转义呢？否，看情况。

2.3.1 字符组中的元字符

跟字符组相关的元字符有[]、^、-。因此在会引起歧义的地方进行转义。例如开头的^必须转义，不然会把整个字符组，看成反义字符组。

复制代码var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /[\^$.*+?|\\/\[\]{}=!:\-,]/g;
console.log( string.match(regex) );
// => ["^", "$", ".", "*", "+", "?", "|", "\", "/", "[", "]", "{", "}", "=", "!", ":", "-", ","]

2.3.2 匹配“[abc]”和“{3,5}”

我们知道[abc]，是个字符组。如果要匹配字符串”[abc]”时，该怎么办？

可以写成/\[abc\]/，也可以写成/\[abc]/，测试如下：

复制代码var string = "[abc]";
var regex = /\[abc]/g;
console.log( string.match(regex)[0] ); 
// => "[abc]"

只需要在第一个方括号转义即可，因为后面的方括号构不成字符组，正则不会引发歧义，自然不需要转义。

同理，要匹配字符串”{3,5}”，只需要把正则写成/\{3,5}/即可。

另外，我们知道量词有简写形式{m,}，却没有{,n}的情况。虽然后者不构成量词的形式，但此时并不会报错。当然，匹配的字符串也是”{,n}”，测试如下：

复制代码var string = "{,3}";
var regex = /{,3}/g;
console.log( string.match(regex)[0] ); 
// => "{,3}"

2.3.3 其余情况

比如= ! : - ,等符号，只要不在特殊结构中，也不需要转义。

但是，括号需要前后都转义的，如/$123$/。

至于剩下的^ $ . * + ? | \ /等字符，只要不在字符组内，都需要转义的。

3. 案例分析

接下来分析两个例子，一个简单的，一个复杂的。

3.1 身份证

正则表达式是：

/^(\d{15}|\d{17}[\dxX])$/

因为竖杠“|”,的优先级最低，所以正则分成了两部分\d{15}和\d{17}[\dxX]。

\d{15}表示15位连续数字。
\d{17}[\dxX]表示17位连续数字，最后一位可以是数字可以大小写字母”x”。

可视化如下：

3.2 IPV4地址

正则表达式是：

/^((0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])\.){3}(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])$/

这个正则，看起来非常吓人。但是熟悉优先级后，会立马得出如下的结构：

((...)\.){3}(...)

上面的两个(...)是一样的结构。表示匹配的是3位数字。因此整个结构是

3位数.3位数.3位数.3位数

然后再来分析(...)：

(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])

它是一个多选结构，分成5个部分：

0{0,2}\d，匹配一位数，包括0补齐的。比如，9、09、009；
0?\d{2}，匹配两位数，包括0补齐的，也包括一位数；
1\d{2}，匹配100到199;
2[0-4]\d，匹配200-249；
25[0-5]，匹配250-255。

最后来看一下其可视化形式：

第五章小结

掌握正则表达式中的优先级后，再看任何正则应该都有信心分析下去了。

至于例子，不一而足，没有写太多。

这里稍微总结一下，竖杠的优先级最低，即最后运算。

只要知道这一点，就能读懂大部分正则。

另外关于元字符转义问题，当自己不确定与否时，尽管去转义，总之是不会错的。

第6章正则表达式的构建

对于一门语言的掌握程度怎么样，可以有两个角度来衡量：读和写。

不仅要看懂别人的解决方案，也要能独立地解决问题。代码是这样，正则表达式也是这样。

与“读”相比，“写”往往更为重要，这个道理是不言而喻的。

对正则的运用，首重就是：如何针对问题，构建一个合适的正则表达式？

本章就解决该问题，内容包括：

平衡法则
构建正则前提
准确性
效率

1. 平衡法则

构建正则有一点非常重要，需要做到下面几点的平衡：

匹配预期的字符串
不匹配非预期的字符串
可读性和可维护性
效率

2. 构建正则前提

2.1 是否能使用正则

正则太强大了，以至于我们随便遇到一个操作字符串问题时，都会下意识地去想，用正则该怎么做。但我们始终要提醒自己，正则虽然强大，但不是万能的，很多看似很简单的事情，还是做不到的。

比如匹配这样的字符串：1010010001….

虽然很有规律，但是只靠正则就是无能为力。

2.2 是否有必要使用正则

要认识到正则的局限，不要去研究根本无法完成的任务。同时，也不能走入另一个极端：无所不用正则。能用字符串API解决的简单问题，就不该正则出马。

比如，从日期中提取出年月日，虽然可以使用正则：

复制代码var string = "2017-07-01";
var regex = /^(\d{4})-(\d{2})-(\d{2})/;
console.log( string.match(regex) );
// => ["2017-07-01", "2017", "07", "01", index: 0, input: "2017-07-01"]

其实，可以使用字符串的split方法来做，即可：

复制代码var string = "2017-07-01";
var result = string.split("-");
console.log( result );
// => ["2017", "07", "01"]

比如，判断是否有问号，虽然可以使用：

1
2
3

复制代码var string = "?id=xx&act=search";
console.log( string.search(/\?/) );
// => 0

其实，可以使用字符串的indexOf方法：

1
2
3

复制代码var string = "?id=xx&act=search";
console.log( string.indexOf("?") );
// => 0

比如获取子串，虽然可以使用正则：

1
2
3

复制代码var string = "JavaScript";
console.log( string.match(/.{4}(.+)/)[1] );
// => Script

其实，可以直接使用字符串的substring或substr方法来做：

1
2
3

复制代码var string = "JavaScript";
console.log( string.substring(4) );
// => Script

2.3 是否有必要构建一个复杂的正则

比如密码匹配问题，要求密码长度6-12位，由数字、小写字符和大写字母组成，但必须至少包括2种字符。

在第2章里，我们写出了正则是：

/(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/

其实可以使用多个小正则来做：

复制代码var regex1 = /^[0-9A-Za-z]{6,12}$/;
var regex2 = /^[0-9]{6,12}$/;
var regex3 = /^[A-Z]{6,12}$/;
var regex4 = /^[a-z]{6,12}$/;
function checkPassword(string) {
	if (!regex1.test(string)) return false;
	if (regex2.test(string)) return false;
	if (regex3.test(string)) return false;
	if (regex4.test(string)) return false;
	return true;
}

3. 准确性

所谓准确性，就是能匹配预期的目标，并且不匹配非预期的目标。

这里提到了“预期”二字，那么我们就需要知道目标的组成规则。

不然没法界定什么样的目标字符串是符合预期的，什么样的又不是符合预期的。

下面将举例说明，当目标字符串构成比较复杂时，该如何构建正则，并考虑到哪些平衡。

3.1 匹配固定电话

比如要匹配如下格式的固定电话号码：

055188888888

0551-88888888

(0551)88888888

第一步，了解各部分的模式规则。

上面的电话，总体上分为区号和号码两部分（不考虑分机号和+86的情形）。

区号是0开头的3到4位数字，对应的正则是：0\d{2,3}

号码是非0开头的7到8位数字，对应的正则是：[1-9]\d{6,7}

因此，匹配055188888888的正则是：/^0\d{2,3}[1-9]\d{6,7}$/

匹配0551-88888888的正则是：/^0\d{2,3}-[1-9]\d{6,7}$/

匹配(0551)88888888的正则是：/^$0\d{2,3}$[1-9]\d{6,7}$/

第二步，明确形式关系。

这三者情形是或的关系，可以构建分支：

/^0\d{2,3}[1-9]\d{6,7}$|^0\d{2,3}-[1-9]\d{6,7}$|^$0\d{2,3}$[1-9]\d{6,7}$/

提取公共部分：

/^(0\d{2,3}|0\d{2,3}-|$0\d{2,3}$)[1-9]\d{6,7}$/

进一步简写：

/^(0\d{2,3}-?|$0\d{2,3}$)[1-9]\d{6,7}$/

其可视化形式：

上面的正则构建过程略显罗嗦，但是这样做，能保证正则是准确的。

上述三种情形是或的关系，这一点很重要，不然很容易按字符是否出现的情形把正则写成：

/^$?0\d{2,3}$?-?[1-9]\d{6,7}$/

虽然也能匹配上述目标字符串，但也会匹配(0551-88888888这样的字符串。当然，这不是我们想要的。

其实这个正则也不是完美的，因为现实中，并不是每个3位数和4位数都是一个真实的区号。

这就是一个平衡取舍问题，一般够用就行。

3.2 匹配浮点数

要求匹配如下的格式：

1.23、+1.23、-1.23

10、+10、-10

.2、+.2、-.2

可以看出正则分为三部分。

符号部分：[+-]

整数部分：\d+

小数部分：\.\d+

上述三个部分，并不是全部都出现。如果此时很容易写出如下的正则：

/^[+-]?(\d+)?(\.\d+)?$/

此正则看似没问题，但这个正则也会匹配空字符””。

因为目标字符串的形式关系不是要求每部分都是可选的。

要匹配1.23、+1.23、-1.23，可以用/^[+-]?\d+\.\d+$/

要匹配10、+10、-10，可以用/^[+-]?\d+$/

要匹配.2、+.2、-.2，可以用/^[+-]?\.\d+$/

因此整个正则是这三者的或的关系，提取公众部分后是：

/^[+-]?(\d+\.\d+|\d+|\.\d+)$/

其可视化形式是：

如果要求不匹配+.2和-.2，此时正则变成：

当然，/^[+-]?(\d+\.\d+|\d+|\.\d+)$/也不是完美的，我们也是做了些取舍，比如：

它也会匹配012这样以0开头的整数。如果要求不匹配的话，需要修改整数部分的正则。
一般进行验证操作之前，都要经过trim和判空。那样的话，也许那个错误正则也就够用了。
也可以进一步改写成：/^[+-]?(\d+)?(\.)?\d+$/，这样我们就需要考虑可读性和可维护性了。

4. 效率

保证了准确性后，才需要是否要考虑要优化。大多数情形是不需要优化的，除非运行的非常慢。什么情形正则表达式运行才慢呢？我们需要考察正则表达式的运行过程（原理）。

正则表达式的运行分为如下的阶段：

编译
设定起始位置
尝试匹配
匹配失败的话，从下一位开始继续第3步
最终结果：匹配成功或失败

下面以代码为例，来看看这几个阶段都做了什么：

复制代码var regex = /\d+/g;
console.log( regex.lastIndex, regex.exec("123abc34def") );
console.log( regex.lastIndex, regex.exec("123abc34def") );
console.log( regex.lastIndex, regex.exec("123abc34def") );
console.log( regex.lastIndex, regex.exec("123abc34def") );
// => 0 ["123", index: 0, input: "123abc34def"]
// => 3 ["34", index: 6, input: "123abc34def"]
// => 8 null
// => 0 ["123", index: 0, input: "123abc34def"]

具体分析如下：

1	复制代码var regex = /\d+/g;

当生成一个正则时，引擎会对其进行编译。报错与否出现这这个阶段。

1	复制代码regex.exec("123abc34def")

当尝试匹配时，需要确定从哪一位置开始匹配。一般情形都是字符串的开头，即第0位。

但当使用test和exec方法，且正则有g时，起始位置是从正则对象的lastIndex属性开始。

因此第一次exec是从第0位开始，而第二次是从3开始的。

设定好起始位置后，就开始尝试匹配了。

比如第一次exec，从0开始，去尝试匹配，并且成功地匹配到3个数字。此时结束时的下标是2，因此下一次的起始位置是3。

而第二次，起始下标是3，但第3个字符是“a”，并不是数字。但此时并不会直接报匹配失败，而是移动到下一位置，即从第4位开始继续尝试匹配，但该字符是b，也不是数字。再移动到下一位，是c仍不行，再移动一位是数字3，此时匹配到了两位数字34。此时，下一次匹配的位置是d的位置，即第8位。

第三次，是从第8位开始匹配，直到试到最后一位，也没发现匹配的，因此匹配失败，返回null。同时设置lastIndex为0，即，如要再尝试匹配的话，需从头开始。

从上面可以看出，匹配会出现效率问题，主要出现在上面的第3阶段和第4阶段。

因此，主要优化手法也是针对这两阶段的。

4.1 使用具体型字符组来代替通配符，来消除回溯

而在第三阶段，最大的问题就是回溯。

例如，匹配双引用号之间的字符。如，匹配字符串123”abc”456中的”abc”。

如果正则用的是：/".*"/，，会在第3阶段产生4次回溯（粉色表示.*匹配的内容）：

如果正则用的是：/".*?"/，会产生2次回溯（粉色表示.*?匹配的内容）：

因为回溯的存在，需要引擎保存多种可能中未尝试过的状态，以便后续回溯时使用。注定要占用一定的内存。

此时要使用具体化的字符组，来代替通配符.，以便消除不必要的字符，此时使用正则/"[^"]*"/，即可。

4.2 使用非捕获型分组

因为括号的作用之一是，可以捕获分组和分支里的数据。那么就需要内存来保存它们。

当我们不需要使用分组引用和反向引用时，此时可以使用非捕获分组。例如：

/^[+-]?(\d+\.\d+|\d+|\.\d+)$/

可以修改成：

/^[+-]?(?:\d+\.\d+|\d+|\.\d+)$/

4.3 独立出确定字符

例如/a+/，可以修改成/aa*/。

因为后者能比前者多确定了字符a。这样会在第四步中，加快判断是否匹配失败，进而加快移位的速度。

4.4 提取分支公共部分

比如/^abc|^def/，修改成/^(?:abc|def)/。

又比如/this|that/，修改成/th(?:is|at)/。

这样做，可以减少匹配过程中可消除的重复。

4.5 减少分支的数量，缩小它们的范围

/red|read/，可以修改成/rea?d/。此时分支和量词产生的回溯的成本是不一样的。但这样优化后，可读性会降低的。

第六章小结

本章涉及的内容并不多。

一般情况下，针对某问题能写出一个满足需求的正则，基本上就可以了。

至于准确性和效率方面的追求，纯属看个人要求了。我觉得够用就行了。

关于准确性，本章关心的是最常用的解决思路：

针对每种情形，分别写出正则，然用分支把他们合并在一起，再提取分支公共部分，就能得到准确的正则。

至于优化，本章没有为了凑数，去写一大堆。了解了匹配原理，常见的优化手法也就这么几种。

第七章正则表达式编程

什么叫知识，能指导我们实践的东西才叫知识。

学习一样东西，如果不能使用，最多只能算作纸上谈兵。正则表达式的学习，也不例外。

掌握了正则表达式的语法后，下一步，也是关键的一步，就是在真实世界中使用它。

那么如何使用正则表达式呢？有哪些关键的点呢？本章就解决这个问题。

内容包括：

正则表达式的四种操作
相关API注意要点
真实案例

1. 正则表达式的四种操作

正则表达式是匹配模式，不管如何使用正则表达式，万变不离其宗，都需要先“匹配”。

有了匹配这一基本操作后，才有其他的操作：验证、切分、提取、替换。

进行任何相关操作，也需要宿主引擎相关API的配合使用。当然，在JS中，相关API也不多。

1.1 验证

验证是正则表达式最直接的应用，比如表单验证。

在说验证之前，先要说清楚匹配是什么概念。

所谓匹配，就是看目标字符串里是否有满足匹配的子串。因此，“匹配”的本质就是“查找”。

有没有匹配，是不是匹配上，判断是否的操作，即称为“验证”。

这里举一个例子，来看看如何使用相关API进行验证操作的。

比如，判断一个字符串中是否有数字。

使用search

复制代码var regex = /\d/;
var string = "abc123";
console.log( !!~string.search(regex) );
// => true

使用test

复制代码var regex = /\d/;
var string = "abc123";
console.log( regex.test(string) );
// => true

使用match

复制代码var regex = /\d/;
var string = "abc123";
console.log( !!string.match(regex) );
// => true

使用exec

复制代码var regex = /\d/;
var string = "abc123";
console.log( !!regex.exec(string) );
// => true

其中，最常用的是test。

1.2 切分

匹配上了，我们就可以进行一些操作，比如切分。

所谓“切分”，就是把目标字符串，切成一段一段的。在JS中使用的是split。

比如，目标字符串是”html,css,javascript”，按逗号来切分：

复制代码var regex = /,/;
var string = "html,css,javascript";
console.log( string.split(regex) );
// => ["html", "css", "javascript"]

又比如，如下的日期格式：

2017/06/26

2017.06.26

2017-06-26

可以使用split“切出”年月日：

复制代码var regex = /\D/;
console.log( "2017/06/26".split(regex) );
console.log( "2017.06.26".split(regex) );
console.log( "2017-06-26".split(regex) );
// => ["2017", "06", "26"]
// => ["2017", "06", "26"]
// => ["2017", "06", "26"]

1.3 提取

虽然整体匹配上了，但有时需要提取部分匹配的数据。

此时正则通常要使用分组引用（分组捕获）功能，还需要配合使用相关API。

这里，还是以日期为例，提取出年月日。注意下面正则中的括号：

match

复制代码var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
console.log( string.match(regex) );
// =>["2017-06-26", "2017", "06", "26", index: 0, input: "2017-06-26"]

exec

复制代码var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
console.log( regex.exec(string) );
// =>["2017-06-26", "2017", "06", "26", index: 0, input: "2017-06-26"]

test

复制代码var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
regex.test(string);
console.log( RegExp.$1, RegExp.$2, RegExp.$3 );
// => "2017" "06" "26"

search

复制代码var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
string.search(regex);
console.log( RegExp.$1, RegExp.$2, RegExp.$3 );
// => "2017" "06" "26"

replace

复制代码var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
var date = [];
string.replace(regex, function(match, year, month, day) {
	date.push(year, month, day);
});
console.log(date);
// => ["2017", "06", "26"]

其中，最常用的是match。

1.4 替换

找，往往不是目的，通常下一步是为了替换。在JS中，使用replace进行替换。

比如把日期格式，从yyyy-mm-dd替换成yyyy/mm/dd：

复制代码var string = "2017-06-26";
var today = new Date( string.replace(/-/g, "/") );
console.log( today );
// => Mon Jun 26 2017 00:00:00 GMT+0800 (中国标准时间)

这里只是简单地应用了一下replace。但，replace方法是强大的，是需要重点掌握的。

2. 相关API注意要点

从上面可以看出用于正则操作的方法，共有6个，字符串实例4个，正则实例2个：

String#search

String#split

String#match

String#replace

RegExp#test

RegExp#exec

本文不打算详细地讲解它们的方方面面细节，具体可以参考《JavaScript权威指南》的第三部分。本文重点列出一些容易忽视的地方，以飨读者。

2.1 search和match的参数问题

我们知道字符串实例的那4个方法参数都支持正则和字符串。

但search和match，会把字符串转换为正则的。

复制代码var string = "2017.06.27";

console.log( string.search(".") );
// => 0
//需要修改成下列形式之一
console.log( string.search("\\.") );
console.log( string.search(/\./) );
// => 4
// => 4

console.log( string.match(".") );
// => ["2", index: 0, input: "2017.06.27"]
//需要修改成下列形式之一
console.log( string.match("\\.") );
console.log( string.match(/\./) );
// => [".", index: 4, input: "2017.06.27"]
// => [".", index: 4, input: "2017.06.27"]

console.log( string.split(".") );
// => ["2017", "06", "27"]

console.log( string.replace(".", "/") );
// => "2017/06.27"

2.2 match返回结果的格式问题

match返回结果的格式，与正则对象是否有修饰符g有关。

复制代码var string = "2017.06.27";
var regex1 = /\b(\d+)\b/;
var regex2 = /\b(\d+)\b/g;
console.log( string.match(regex1) );
console.log( string.match(regex2) );
// => ["2017", "2017", index: 0, input: "2017.06.27"]
// => ["2017", "06", "27"]

没有g，返回的是标准匹配格式，即，数组的第一个元素是整体匹配的内容，接下来是分组捕获的内容，然后是整体匹配的第一个下标，最后是输入的目标字符串。

有g，返回的是所有匹配的内容。

当没有匹配时，不管有无g，都返回null。

2.3 exec比match更强大

当正则没有g时，使用match返回的信息比较多。但是有g后，就没有关键的信息index了。

而exec方法就能解决这个问题，它能接着上一次匹配后继续匹配：

复制代码var string = "2017.06.27";
var regex2 = /\b(\d+)\b/g;
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
// => ["2017", "2017", index: 0, input: "2017.06.27"]
// => 4
// => ["06", "06", index: 5, input: "2017.06.27"]
// => 7
// => ["27", "27", index: 8, input: "2017.06.27"]
// => 10
// => null
// => 0

其中正则实例lastIndex属性，表示下一次匹配开始的位置。

比如第一次匹配了“2017”，开始下标是0，共4个字符，因此这次匹配结束的位置是3，下一次开始匹配的位置是4。

从上述代码看出，在使用exec时，经常需要配合使用while循环：

复制代码var string = "2017.06.27";
var regex2 = /\b(\d+)\b/g;
var result;
while ( result = regex2.exec(string) ) {
	console.log( result, regex2.lastIndex );
}
// => ["2017", "2017", index: 0, input: "2017.06.27"] 4
// => ["06", "06", index: 5, input: "2017.06.27"] 7
// => ["27", "27", index: 8, input: "2017.06.27"] 10

2.4 修饰符g，对exex和test的影响

上面提到了正则实例的lastIndex属性，表示尝试匹配时，从字符串的lastIndex位开始去匹配。

字符串的四个方法，每次匹配时，都是从0开始的，即lastIndex属性始终不变。

而正则实例的两个方法exec、test，当正则是全局匹配时，每一次匹配完成后，都会修改lastIndex。下面让我们以test为例，看看你是否会迷糊：

复制代码var regex = /a/g;
console.log( regex.test("a"), regex.lastIndex );
console.log( regex.test("aba"), regex.lastIndex );
console.log( regex.test("ababc"), regex.lastIndex );
// => true 1
// => true 3
// => false 0

注意上面代码中的第三次调用test，因为这一次尝试匹配，开始从下标lastIndex即3位置处开始查找，自然就找不到了。

如果没有g，自然都是从字符串第0个字符处开始尝试匹配：

复制代码var regex = /a/;
console.log( regex.test("a"), regex.lastIndex );
console.log( regex.test("aba"), regex.lastIndex );
console.log( regex.test("ababc"), regex.lastIndex );
// => true 0
// => true 0
// => true 0

2.5 test整体匹配时需要使用^和$

这个相对容易理解，因为test是看目标字符串中是否有子串匹配正则，即有部分匹配即可。

如果，要整体匹配，正则前后需要添加开头和结尾：

复制代码console.log( /123/.test("a123b") );
// => true
console.log( /^123$/.test("a123b") );
// => false
console.log( /^123$/.test("123") );
// => true

2.6 split相关注意事项

split方法看起来不起眼，但要注意的地方有两个的。

第一，它可以有第二个参数，表示结果数组的最大长度：

1
2
3

复制代码var string = "html,css,javascript";
console.log( string.split(/,/, 2) );
// =>["html", "css"]

第二，正则使用分组时，结果数组中是包含分隔符的：

1
2
3

复制代码var string = "html,css,javascript";
console.log( string.split(/(,)/) );
// =>["html", ",", "css", ",", "javascript"]

2.7 replace是很强大的

《JavaScript权威指南》认为exec是这6个API中最强大的，而我始终认为replace才是最强大的。因为它也能拿到该拿到的信息，然后可以假借替换之名，做些其他事情。

总体来说replace有两种使用形式，这是因为它的第二个参数，可以是字符串，也可以是函数。

当第二个参数是字符串时，如下的字符有特殊的含义：

$1,$2,…,$99 匹配第1~99个分组里捕获的文本
$& 匹配到的子串文本
$`` 匹配到的子串的左边文本$’匹配到的子串的右边文本?` 美元符号

例如，把”2,3,5”，变成”5=2+3”：

1
2
3

复制代码var result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2");
console.log(result);
// => "5=2+3"

又例如，把”2,3,5”，变成”222,333,555”:

1
2
3

复制代码var result = "2,3,5".replace(/(\d+)/g, "$&$&$&");
console.log(result);
// => "222,333,555"

再例如，把”2+3=5”，变成”2+3=2+3=5=5”:

1
2
3

复制代码var result = "2+3=5".replace(/=/, "$&$`$&$'$&");
console.log(result);
// => "2+3=2+3=5=5"

当第二个参数是函数时，我们需要注意该回调函数的参数具体是什么：

复制代码"1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function(match, $1, $2, index, input) {
	console.log([match, $1, $2, index, input]);
});
// => ["1234", "1", "4", 0, "1234 2345 3456"]
// => ["2345", "2", "5", 5, "1234 2345 3456"]
// => ["3456", "3", "6", 10, "1234 2345 3456"]

此时我们可以看到replace拿到的信息，并不比exec少。

2.8 使用构造函数需要注意的问题

一般不推荐使用构造函数生成正则，而应该优先使用字面量。因为用构造函数会多写很多\。

复制代码var string = "2017-06-27 2017.06.27 2017/06/27";
var regex = /\d{4}(-|\.|\/)\d{2}\1\d{2}/g;
console.log( string.match(regex) );
// => ["2017-06-27", "2017.06.27", "2017/06/27"]

regex = new RegExp("\\d{4}(-|\\.|\\/)\\d{2}\\1\\d{2}", "g");
console.log( string.match(regex) );
// => ["2017-06-27", "2017.06.27", "2017/06/27"]

2.9 修饰符

ES5中修饰符，共3个：

g 全局匹配，即找到所有匹配的，单词是global

i 忽略字母大小写，单词ingoreCase

m 多行匹配，只影响^和$，二者变成行的概念，即行开头和行结尾。单词是multiline

当然正则对象也有相应的只读属性：

复制代码var regex = /\w/img;
console.log( regex.global );
console.log( regex.ignoreCase );
console.log( regex.multiline );
// => true
// => true
// => true

2.10 source属性

正则实例对象属性，除了global、ingnoreCase、multiline、lastIndex属性之外，还有一个source属性。

它什么时候有用呢？

比如，在构建动态的正则表达式时，可以通过查看该属性，来确认构建出的正则到底是什么：

复制代码var className = "high";
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
console.log( regex.source )
// => (^|\s)high(\s|$) 即字符串"(^|\\s)high(\\s|$)"

2.11 构造函数属性

构造函数的静态属性基于所执行的最近一次正则操作而变化。除了是$1,…,$9之外，还有几个不太常用的属性（有兼容性问题）：

RegExp.input 最近一次目标字符串，简写成RegExp["$_"]
RegExp.lastMatch 最近一次匹配的文本，简写成RegExp["$&"]
RegExp.lastParen 最近一次捕获的文本，简写成RegExp["$+"]
RegExp.leftContext 目标字符串中lastMatch之前的文本，简写成RegExp["$“]RegExp.rightContext目标字符串中lastMatch之后的文本，简写成RegExp[“$’”]`

测试代码如下：

复制代码var regex = /([abc])(\d)/g;
var string = "a1b2c3d4e5";
string.match(regex);

console.log( RegExp.input );
console.log( RegExp["$_"]);
// => "a1b2c3d4e5"

console.log( RegExp.lastMatch );
console.log( RegExp["$&"] );
// => "c3"

console.log( RegExp.lastParen );
console.log( RegExp["$+"] );
// => "3"

console.log( RegExp.leftContext );
console.log( RegExp["$`"] );
// => "a1b2"

console.log( RegExp.rightContext );
console.log( RegExp["$'"] );
// => "d4e5"

3. 真实案例

3.1 使用构造函数生成正则表达式

我们知道要优先使用字面量来创建正则，但有时正则表达式的主体是不确定的，此时可以使用构造函数来创建。模拟getElementsByClassName方法，就是很能说明该问题的一个例子。

这里getElementsByClassName函数的实现思路是：

比如要获取className为”high”的dom元素；
首先生成一个正则：/(^|\s)high(\s|$)/；
然后再用其逐一验证页面上的所有dom元素的类名，拿到满足匹配的元素即可。

代码如下(可以直接复制到本地查看运行效果)：

复制代码<p class="high">1111</p>
<p class="high">2222</p>
<p>3333</p>
<script>
function getElementsByClassName(className) {
	var elements = document.getElementsByTagName("*");
	var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
	var result = [];
	for (var i = 0; i < elements.length; i++) {
		var element = elements[i];
		if (regex.test(element.className)) {
			result.push(element)
		}
	}
	return result;
}
var highs = getElementsByClassName('high');
highs.forEach(function(item) {
	item.style.color = 'red';
});
</script>

3.2 使用字符串保存数据

一般情况下，我们都愿意使用数组来保存数据。但我看到有的框架中，使用的却是字符串。

使用时，仍需要把字符串切分成数组。虽然不一定用到正则，但总感觉酷酷的，这里分享如下：

复制代码var utils = {};
"Boolean|Number|String|Function|Array|Date|RegExp|Object|Error".split("|").forEach(function(item) {
	utils["is" + item] = function(obj) {
		return {}.toString.call(obj) == "[object " + item + "]";
	};
});
console.log( utils.isArray([1, 2, 3]) );
// => true

3.3 if语句中使用正则替代&&

比如，模拟ready函数，即加载完毕后再执行回调（不兼容ie的）：

复制代码var readyRE = /complete|loaded|interactive/;

function ready(callback) {
	if (readyRE.test(document.readyState) && document.body) {
		callback()
	} 
	else {
		document.addEventListener(
			'DOMContentLoaded', 
			function () {
				callback()
			},
			false
		);
	}
};
ready(function() {
	alert("加载完毕！")
});

3.4 使用强大的replace

因为replace方法比较强大，有时用它根本不是为了替换，只是拿其匹配到的信息来做文章。

这里以查询字符串（querystring）压缩技术为例，注意下面replace方法中，回调函数根本没有返回任何东西。

复制代码function compress(source) {
	var keys = {};
	source.replace(/([^=&]+)=([^&]*)/g, function(full, key, value) {
		keys[key] = (keys[key] ? keys[key] + ',' : '') + value;
	});
	var result = [];
	for (var key in keys) {
		result.push(key + '=' + keys[key]);
	}
	return result.join('&');
}

console.log( compress("a=1&b=2&a=3&b=4") );
// => "a=1,3&b=2,4"

3.5 综合运用

最后这里再做个简单实用的正则测试器。

具体效果如下：

代码，直接贴了，相信你能看得懂：

复制代码<section>
	<div id="err"></div>
	<input id="regex" placeholder="请输入正则表达式">
	<input id="text" placeholder="请输入测试文本">
	<button id="run">测试一下</button>
	<div id="result"></div>
</section>
<style>
section{
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	height:300px;
	padding:0 200px;
}
section *{
	min-height:30px;
}
#err {
	color:red;
}
#result{
	line-height:30px;
}
.info {
	background:#00c5ff;
	padding:2px;
	margin:2px;
	display:inline-block;
}
</style>
<script>
(function() {
	// 获取相应dom元素
	var regexInput = document.getElementById("regex");
	var textInput = document.getElementById("text");
	var runBtn = document.getElementById("run");
	var errBox = document.getElementById("err");
	var resultBox = document.getElementById("result");
	
	// 绑定点击事件
	runBtn.onclick = function() {
		// 清除错误和结果
		errBox.innerHTML = "";
		resultBox.innerHTML = "";
		
		// 获取正则和文本
		var text = textInput.value;
		var regex = regexInput.value;
		
		if (regex == "") {
			errBox.innerHTML = "请输入正则表达式";
		} else if (text == "") {
			errBox.innerHTML = "请输入测试文本";
		} else {
			regex = createRegex(regex);
			if (!regex) return;
			var result, results = [];
			
			// 没有修饰符g的话，会死循环
			if (regex.global) {
				while(result = regex.exec(text)) {
					results.push(result);
				}
			} else {
				results.push(regex.exec(text));
			}
						
			if (results[0] == null) {
				resultBox.innerHTML = "匹配到0个结果";
				return;
			}
			
			// 倒序是有必要的
			for (var i = results.length - 1; i >= 0; i--) {
				var result = results[i];
				var match = result[0];
				var prefix = text.substr(0, result.index);
				var suffix = text.substr(result.index + match.length);
				text = prefix 
					+ '<span class="info">'
					+ match
					+ '</span>'
					+ suffix;
			}
			resultBox.innerHTML = "匹配到" + results.length + "个结果:<br>" + text;
		}
	};
	
	// 生成正则表达式，核心函数
	function createRegex(regex) {
		try {
			if (regex[0] == "/") {
				regex = regex.split("/");
				regex.shift();
				var flags = regex.pop();
				regex = regex.join("/");
				regex = new RegExp(regex, flags);
			} else {
				regex = new RegExp(regex, "g");
			}
			return regex;
		} catch(e) {
			errBox.innerHTML = "无效的正则表达式";
			return false;
		}
	}
})();
</script>

第七章小结

相关API的注意点，本章基本上算是一网打尽了。

至于文中的例子，都是点睛之笔，没有详细解析。如有理解不透的，建议自己敲一敲。

后记

其实本文首发于：正则表达式系列总结 - 知乎专栏

原文是一个系列。一直等到老姚成为掘金的专栏作者，经过仔细考虑，在掘金平台没有采用系列形式，而是合成为了一篇文章。这样既便于读者阅读，最起码能一气呵成地阅读。同时也便于作者统一回复留言。

文章要结束了，最后还要有几点说明。

1. 需要注意的地方

本文主要讨论的是JavaScript的正则表达式，更精确地说是ES5的正则表达式。

JavaScript的正则表达式引擎是传统型NFA的，因此本系列的讨论是适合任何一门正则引擎是传统型NFA的编程语言。当然，市面上大部分语言的正则引擎都是这种的。而JS里正则涉及到的所有语法要点，是这种引擎支持的核心子集。也就是说，要学正则表达式，不妨以JS正则为出发点。

2. 参考资料

当然本文不是无本之末。主要参考的是几本书籍。

以下书籍中核心章节都认真阅读过，甚至阅读多遍。

《JavaScript权威指南》，看完本系列，再去看书中的第10章，你就知道了什么叫字字珠玑。

《精通正则表达式》，权威且比较杂乱，我阅读的第一本正则表达式书籍。

《正则表达式必知必会》，这是我看的第二本正则，看完后，确定自己算是入门了。

《正则指引》，《精通正则表达式》的译者写的，相对清晰。

《正则表达式入门》，我看的是英文版的，对于已经入门的我，基本没多少收获了。

《正则表达式经典实例》，除了第3章，比较杂外，也有收获，以实例为主导的一本书。

《JavaScript Regular Expressions》，为数不多转讲JS正则的。页数不多，也有收获。

《高性能JavaScript 》第5章，我看的是英文版的。第5章，讲了回溯和优化。

《JavaScript忍者秘籍》第7章，大概讲了一下正则的用法，几个例子还不错。

《JavaScript高级程序设计》第5.4节，比较简短的介绍。

使用的工具：

Regulex，一款可视化工具
 ProcessOn - 免费在线作图，实时协作
 LICEcap – 灵活好用，GIF 屏幕录制工具

3. 个人感悟

要多写文章的

首先，我十分感谢读者。读者能在信息泛滥的网络里，点击我的文章进来瞧两眼，这都是对其注意力的消费。更何况，还有很多童鞋都认真读了，甚至给我挑毛病，这都是对我的帮助。不知有多少童鞋是从头读到这里的，不妨留言打卡，让我知道你是用心的读者，而并非简简单单地收藏一下，然后就再也不曾看过了。

说到要写文章，其目的是以教为学。看似为了教，其实是为了学。能教会别人才算自己真正学会了，最起码形成了文字，通过了自己的语言逻辑这一关。如果还能有人指出你的错误认知，那样收获就更大了，何乐而不为呢？

很多书中都提到类似的观点，例如《知道做到》《好好学习》《与时间做朋友》《暗时间》等。

以教为学的其他手段

当然，以教为学的手段还有很多，比如翻译一本书。我私下已经翻译了好几本（窃喜^_^）。

可以从薄点的书籍开始，比如100页左右的。基本上使用有道就可以了，也不用要求自己一词一句的翻译，能用自己的话说明白就行了。说到这里，不得不提起，我们的阮一峰大神，在我看来，他就是成功地应用这种模式的。看完外文的文章，理解明白了，用自己的话说一说，再形成自己的简练风格。

恐怕你可能说自己的英文水平不够，没信心尝试。相信我，熟悉了常用词汇（比如literal翻译成字面量）后，配合有道翻译，薄点的书，一天翻译一章是没问题的。当然前提是你懂相关领域，不然是没办法意译的。

最后一种以教为学的手段是，写一本书。写文章是基础，文章多了，自然而言就可以写成一本书。当然，写书强调的是整体架构，所以文章最好成体系。

你看看那些国内专业书籍的作者，一般都事先翻译过几本书的。最起码在前端领域，我就看到了好几位是这么干的。翻译明白了，学会了，用自己的角度去弄出一本书还是相对很容易的。

虽然，本人并未曾写过书，但上述方法，我始终相信是可行的。

最后，我们该想到，陆游诗人对前端界做出的最大贡献是：

纸上得来终觉浅，绝知此事要躬行。

本文完。

可以收藏PDF版本：《JavaScript正则迷你书》

本文转载自: 掘金

开发者博客 – 和开发相关的这里全都有

NSRunLoop的退出方式

发表于 2017-07-10

一. 启动RunLoop

　　通过[NSRunLoop currentRunLoop]或者CFRunLoopGetCurrent()方式可以获取当前线程的runloop。根据苹果文档，启动一个runloop有以下三种方法：

1
2
3

复制代码- (void)run;  
- (void)runUntilDate:(NSDate *)limitDate；
- (void)runMode:(NSString *)mode beforeDate:(NSDate *)limitDate;

　　这三种方式无论通过哪一种方式启动runloop，如果没有一个输入源或者timer附加于runloop上，runloop就会立刻退出。
　　(1) 使用第一种启动方式，runloop会一直运行下去，在此期间会处理来自输入源的数据，并且会在NSDefaultRunLoopMode模式下重复调用runMode:beforeDate:方法；
　　(2) 使用第二种启动方式，可以设置超时时间，在超时时间到达之前，runloop会一直运行，在此期间runloop会处理来自输入源的数据，并且也会在NSDefaultRunLoopMode模式下重复调用runMode:beforeDate:方法；
　　(3)
使用第三种启动方式，runloop会运行一次，超时时间到达或者第一个input source被处理，则runloop就会退出。

　　查看苹果文档得知，前两种启动方式会重复调用runMode:beforeDate:方法。感兴趣的童鞋可以进行验证，验证后你就会发现，其实是多此一举。然而“明知山有虎，偏向虎山行”，首先想到的方法是新建个NSRunLoop子类，然后在子类中重写runMode:beforeDate:方法，如果你这么做了，会发现没啥卵用。原因是上述三个方法都是在名叫NSRunLoopConveniences分类中实现的，所以只好新建一个分类通过交换方法实现进行验证，代码如下：

复制代码NSMachPort *_port; //global
NSRunLoop *_theRL;
NSThread *_thread;

- (void)viewDidLoad {
    [super viewDidLoad];
    _thread = [[NSThread alloc] initWithTarget:self selector:@selector(createRunLoopInNewThread) object:nil];
    [_thread setName:@"com.xindong.thread"];
    [_thread start];
}

- (void)createRunLoopInNewThread {
    _theRL = [NSRunLoop currentRunLoop];
    _port = (NSMachPort *)[NSMachPort port];
    // 添加一个端口作为输入源
    [_theRL addPort:_port forMode:NSDefaultRunLoopMode];

    [_theRL run];
//    [_theRL runUntilDate:[NSDate distantFuture]];
//    [_theRL runMode:NSDefaultRunLoopMode beforeDate:[NSDate distantFuture]];
}

复制代码@implementation NSRunLoop (Hook)

+ (void)load {
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        [self _swizzleImpWithOrigin:@selector(runMode:beforeDate:) swizzle:@selector(xd_runMode:beforeDate:)];
    });
}

+ (void)_swizzleImpWithOrigin:(SEL)originSelector swizzle:(SEL)swizzleSelector {

    Class _class = [self class];
    Method originMethod = class_getInstanceMethod(_class, originSelector);
    Method swizzleMethod = class_getInstanceMethod(_class, swizzleSelector);

    IMP originIMP = method_getImplementation(originMethod);
    IMP swizzleIMP = method_getImplementation(swizzleMethod);

    BOOL add = class_addMethod(_class, originSelector, swizzleIMP, method_getTypeEncoding(swizzleMethod));

    if (add) {
        class_addMethod(_class, swizzleSelector, originIMP, method_getTypeEncoding(originMethod));
    } else {
        method_exchangeImplementations(originMethod, swizzleMethod);
    }
}

- (BOOL)xd_runMode:(NSRunLoopMode)mode beforeDate:(NSDate *)limitDate {

    NSThread *thread = [NSThread currentThread];

    // 这里我们只对自己创建的线程runloop的`runMode:beforeDate:`方法进行修改.
    if ([thread.name isEqualToString:@"com.xindong.thread"]) {
        NSLog(@"runloop+hook: com.xindong.thread线程\n\n");
        return YES; //如果这里返回`NO`, runloop会立刻退出, 故要返回`YES`进行验证.
    }

    NSLog(@"runloop+hook: 其他可能未知的线程%@\n\n", thread.name);
    return [self xd_runMode:mode beforeDate:limitDate];
}

@end

结果如下：

控制台.png
线程栈.png
　　OK，验证通过。简单了解runloop的三种启动方式之后，那么如何能够正确地退出runloop呢？

二. 退出RunLoop

　　目前我想到以下几种可以尝试的方法：(1) 移除input sources或者timer；(2) 设置超时时间或者添加一个定时源；(3) 强制退出线程；(4) 通过方法CFRunLoopStop来停止runloop。想知道这四种方式是否都可行，还请继续往下看……

第一种启动方式run
　　1. 根据文档所说，如果想退出runloop，不应该使用第一种启动方式来启动runloop。但是文档也有说: If no input sources or timers are attached to the run loop, this method exits immediately. 大概意思就是说如果runloop没有input sources或者附加的timer，runloop就会退出，那么我们是不是就可以在runloop启动之后，通过移除input
sources或者timer来退出runloop呢？我们来试下，代码如下：

复制代码NSMachPort *_port; //global
NSRunLoop *_theRL;
NSThread *_thread;

- (void)viewDidLoad {
   // 开启一个新线程
   _thread = [[NSThread alloc] initWithTarget:self selector:@selector(createRunLoopInNewThread) object:nil]; 
   [_thread setName:@"com.xindong.thread"];
   [_thread start];
}

- (void)createRunLoopInNewThread {
    _theRL = [NSRunLoop currentRunLoop];
    _port = (NSMachPort *)[NSMachPort port];
    // 给runloop添加一个端口作为输入源，保证可以随时处理消息
    [_theRL addPort:_port forMode:NSDefaultRunLoopMode];

    // 该方法会在当前线程的runloop中创建一个timer，并在当前线程中执行selector
    [self performSelector:@selector(excuteInNewThread:) withObject:@"param1" afterDelay:2];
    [self performSelector:@selector(excuteInNewThread:) withObject:@"param2" afterDelay:3];

    [_theRL run];

    // 如果当前线程的runloop没有退出，则`[_theRL run]`之后的代码不会执行. 
    NSLog(@"runloop已退出"); //只有当runloop退出，这里才会执行。可以通过注册runloop观察者进行验证，这里就不贴代码了，具体代码请到demo里查看。
}

- (void)excuteInNewThread:(NSString *)param {
    NSLog(@"%@", param);
    // 将当前线程的runloop中的port移除
    [_theRL removePort:_port forMode:NSDefaultRunLoopMode];
}

控制台输出结果：

image.png
　　注：excuteInNewThread:方法已执行，表明runloop已成功开启，否则该方法不会执行。
在excuteInNewThread:方法中，将port从当前runloop中移除，在两个事件param1和param2处理完之后 (即两个timer触发完毕)，runloop就退出了。虽然可以将runloop退出，但是苹果并不建议我们这么做，因为系统内部有可能会在当前线程的runloop中添加一些输入源，所以通过手动移除input
source或者timer这种方式，并不能保证runloop一定会退出。

　　 2. 我们知道，runloop接收输入事件来自两种不同的来源：输入源 (input source) 和定时源 (timer source)。输入源传递异步事件，通常消息来自于其他线程或程序。定时源则传递同步事件，发生在特定时间或者重复的时间间隔。由于run启动方式不能设置超时时间，所以我们在runloop中添加一个定时源进行测试，对上述代码稍作修改：

复制代码- (void)createRunLoopInNewThread {
    _theRL = [NSRunLoop currentRunLoop];

    // 注意：这里repeats参数要设为`NO`.
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1.5 repeats:NO block:^(NSTimer * _Nonnull timer) {
        NSLog(@"timer block");
    }];
    // 添加一个定时源 
    [_theRL addTimer:timer forMode:NSDefaultRunLoopMode];

    [_theRL run];

    // 如果当前线程的runloop没有退出，则`[_theRL run]`之后的代码不会执行. 
    NSLog(@"runloop已退出"); //只有当runloop退出，这里才会执行。可以通过注册runloop观察者进行验证，这里就不贴代码了，具体代码请到demo里查看。
}

控制台输出结果如下：

image.png
timer触发后，由于runloop没有可监视的源，故runloop就会退出。如果不想让runloop退出，只需要将创建timer的repeats参数设置为YES即可。但是这样设置的话，有个明显的缺点就是：每隔1.5s runloop就会从休眠中唤醒，从而会引起CPU资源和系统内存不必要的消耗。通过注册runloop观察者在控制台进行打印查看：

image.png
　　3. 我们再试试通过强制退出线程的方法，看看会不会让当前线程的runloop也跟着退出？在excuteInNewThread:方法中稍作修改，代码如下：

复制代码- (void)createRunLoopInNewThread {
    _theRL = [NSRunLoop currentRunLoop];
    _port = (NSMachPort *)[NSMachPort port];
    // 给runloop添加一个端口作为输入源，保证可以随时处理消息
    [_theRL addPort:_port forMode:NSDefaultRunLoopMode];

    // 该方法会在当前线程的runloop中创建一个timer，并在当前线程中执行selector
    [self performSelector:@selector(excuteInNewThread:) withObject:@"param1" afterDelay:2];
    [self performSelector:@selector(excuteInNewThread:) withObject:@"param2" afterDelay:3];

    [_theRL run];

    // 如果当前线程的runloop没有退出，则`[_theRL run]`之后的代码不会执行. 
    NSLog(@"runloop已退出"); //只有当runloop退出，这里才会执行。可以通过注册runloop观察者进行验证，这里就不贴代码了，具体代码请到demo里查看。
}
- (void)excuteInNewThread:(NSString *)param {
    NSLog(@"%@", param);
    [NSThread exit];
}

控制台输出结果：

image.png
我们发现，只输出了param1，说明在第一次执行excuteInNewThread:方法时，当前线程确已退出，所以param2不会输出，但是NSLog(@"runloop已退出");却没有执行，说明当前线程的runloop并没有退出，再加上线程栈上的一些资源没有释放，从而引起了内存泄漏，如下图。所以，此方法并不可取。

image.png
　　４. 至此，剩下最后一种的退出方式就是Core Foundation下的CFRunLoopStop函数。那么使用CFRunLoopStop能否退出runloop呢？我们对代码稍作修改，进行测试：

复制代码- (void)createRunLoopInNewThread {

    // 注册runloop观察者
    static CFRunLoopObserverRef _observer;
    RegisterRunLoopObserver(kCFRunLoopAllActivities, _observer, 0, kCFRunLoopDefaultMode, (__bridge void*)self, RunLoopCallBack);

    _theRL = [NSRunLoop currentRunLoop];

    _port = (NSMachPort *)[NSMachPort port];
    [_theRL addPort:_port forMode:NSDefaultRunLoopMode];

    [self performSelector:@selector(excuteInNewThread:) withObject:@"param1" afterDelay:2];
    [self performSelector:@selector(excuteInNewThread:) withObject:@"param2" afterDelay:3];

    [_theRL run];

    // 如果当前线程的runloop没有退出，则`[_theRL run]`之后的代码不会执行.
    NSLog(@"runloop已退出"); //只有当runloop退出，这里才会执行。可以通过注册runloop观察者进行验证，这里就不贴代码了，具体代码请到demo里查看。
}

- (void)excuteInNewThread:(NSString *)param {
    NSLog(@"%@", param);
    CFRunLoopStop(CFRunLoopGetCurrent());
}

控制台输出结果：

image.png

通过runloop观察者的回调得知，每次执行完CFRunLoopStop方法时，runloop确实退出了，但是由于run这种启动方式会重复调用runMode:beforeDate:方法，从而在退出当前runloop之后又会重新启动runloop，所以上述代码中的NSLog(@"runloop已退出")方法也就不会执行。同理，通过第二种方式runUntilDate:启动runloop，也不能使用CFRunLoopStop方法来退出。

#####

第二种启动方式runUntilDate:
　　通过这种方式启动，可以通过设置超时时间来退出runloop。除此之外，跟第一种启动方式run类似，这里不再赘述。

#####

第三种启动方式runMode:beforeDate:
　　通过这种方式启动，runloop会运行一次，当超时时间到达或者第一个输入源被处理，runloop就会退出。测试代码如下：

复制代码- (void)createRunLoopInNewThread {
    // 注册runloop观察者
    static CFRunLoopObserverRef _observer;
    RegisterRunLoopObserver(kCFRunLoopAllActivities, _observer, 0, kCFRunLoopDefaultMode, (__bridge void*)self, RunLoopCallBack);

    _theRL = [NSRunLoop currentRunLoop];

    _port = (NSMachPort *)[NSMachPort port];
    [_theRL addPort:_port forMode:NSDefaultRunLoopMode];

    [_theRL runMode:NSDefaultRunLoopMode beforeDate:[NSDate distantFuture]];

    // 如果当前线程的runloop没有退出，则`[_theRL run]`之后的代码不会执行.
    NSLog(@"runloop已退出"); //只有当runloop退出，这里才会执行。可以通过注册runloop观察者进行验证，这里就不贴代码了，具体代码请到demo里查看。
}

#pragma mark - Touch

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UIColor *color = self.view.backgroundColor;
    self.view.backgroundColor = color == [UIColor redColor] ? [UIColor yellowColor] : [UIColor redColor];

    // 线程间的通信 (这里是main thread)
    [self performSelector:@selector(communicateToNewThreadFromMainThread) onThread:_thread withObject:nil waitUntilDone:NO];
}

- (void)communicateToNewThreadFromMainThread {
    NSLog(@"communicate successfully\n\n"); //这里是com.xindong.thread. 这里执行完，表示第一个输入源事件被处理.
}

控制台输出如下：

image.png
当我们触摸屏幕时，communicateToNewThreadFromMainThread方法被执行，即输入源事件被处理，然后runloop退出。如果我们想控制runloop的退出时机，而不是在处理完一个输入源事件之后就退出，那么就要重复调用runMode:beforeDate:，具体可以参考苹果文档给出的方案，如下：

1
2
3

复制代码BOOL shouldKeepRunning = YES; // global
NSRunLoop *theRL = [NSRunLoop currentRunLoop];
while (shouldKeepRunning && [theRL runMode:NSDefaultRunLoopMode beforeDate:[NSDate distantFuture]]);

接着我们对代码进行修改，以便我们可以控制runloop的退出时机，改后如下：

复制代码- (void)createRunLoopInNewThread {
    // 注册runloop观察者
    static CFRunLoopObserverRef _observer;
    RegisterRunLoopObserver(kCFRunLoopAllActivities, _observer, 0, kCFRunLoopDefaultMode, (__bridge void*)self, RunLoopCallBack);

    _theRL = [NSRunLoop currentRunLoop];

    _port = (NSMachPort *)[NSMachPort port];
    [_theRL addPort:_port forMode:NSDefaultRunLoopMode];

    while (shouldKeepRunning && [_theRL runMode:NSDefaultRunLoopMode beforeDate:[NSDate distantFuture]]);

    // 如果当前线程的runloop没有退出，则`[_theRL run]`之后的代码不会执行.
    NSLog(@"runloop已退出"); //只有当runloop退出，这里才会执行。可以通过注册runloop观察者进行验证，这里就不贴代码了，具体代码请到demo里查看。   
}

#pragma mark - Touch

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UIColor *color = self.view.backgroundColor;
    self.view.backgroundColor = color == [UIColor redColor] ? [UIColor yellowColor] : [UIColor redColor];

    // 线程间的通信 (这里是main thread)
    [self performSelector:@selector(communicateToNewThreadFromMainThread) onThread:_thread withObject:nil waitUntilDone:NO];
}

- (void)communicateToNewThreadFromMainThread {
    NSLog(@"communicate successfully\n\n"); //这里是com.xindong.thread
    [self quitRunLoop];
}

- (void)quitRunLoop {
    shouldKeepRunning = NO;
    CFRunLoopStop(CFRunLoopGetCurrent());
}

通过上述方式启动和退出runloop，没有引起内存泄漏，也没有造成内存增长，并且对runloop的退出时机可以自由控制。相对来说，使用此方案更好一些。

三. 总结

　　如果不想退出runloop可以使用第一种方式启动runloop；如果使用第二种方式启动runloop，可以通过设置超时时间来退出；如果使用第三种方式启动runloop，可以通过设置超时时间或者使用CFRunLoopStop方法来退出。demo请戳这里…
　　文章中若有不对之处，还望各位朋友不吝指正。毕竟能力水平有限，不敢保证准确无误。

参考资料:

bestswifter.com/runloop-and…
blog.ibireme.com/2015/05/18/…
blog.csdn.net/yxh265/arti…
www.dreamingwish.com/frontui/art…

本文转载自: 掘金

开发者博客 – 和开发相关的这里全都有

Vuex 源码解析（如何阅读源代码实践篇）

发表于 2017-07-10

上一篇文章说的是如何阅读框架源代码，收到了“如果更详细一点就好了”的反馈，不如就以 Vuex 为切入点进行一次实践吧，不矫揉不造作，说走咱就走~~

一、前提

本文假定你已经对 Vue 的使用上有一定的概念，不要求轻车熟路（使用过 Vuex 当然是最好的），但至少要了解基本的事件绑定方式，以及 Mixin 的用法，官方文档从此去

二、Vuex 解决了什么问题

官方的说法：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
这里首先要搞清楚什么是状态，状态就是数据，也就是说： Vuex 提供了一套 Vue 应用统一的数据源管理模式，除了定义数据源，还定义了数据的管理模式

这其中，Store 所包含的两个核心部分 State 和 Actions 分别代表了数据源，和数据的管理（操作）模式，同时作为一个全局的 VM，其有效的协调了 Vue 各组件间的通信

三、Vuex 的设计思想

如果读 Vue 文档的时候足够留心，兴许你能在插件一节找到蛛丝马迹:

插件的功能包括，通过全局 mixin 方法添加一些组件选项，如：vuex

也就是说，Vuex 不过是 Vue 的一个插件，通过 Mixin 的方式给每个组件注入一个 $store 对象，由于每个组件的 $store 指向的是同一个 store 对象（后面通过详读代码可以知道，这个 $store 其实是一个 VM 对象），所以 store 是全局的，这就印证了之前在我们为什么需要 Vuex中的一个结论，Vuex 类似于一个事件总线

四、详读代码

通过 Mixin 注入 Store

从入口文件 index.js 开始，代码不多，可以直接贴出来

复制代码export default {
  Store,
  install,
  version: '__VERSION__',
  mapState,
  mapMutations,
  mapGetters,
  mapActions
}

如果你一眼就看出这里的关键是 install，那么你应该领略到读源码先了解设计思想的独特魅力了，没错，作为 Vue 的 Plugin，install 方法就是入口

循着 install 方法进入 store.js，还是符合预期，这个方法主要干得是事情就是 mixin

复制代码export function install (_Vue) {
  ...
  Vue = _Vue
  applyMixin(Vue)
}

// auto install in dist mode
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

并且还有一个小细节，浏览器环境下并且 Vue 不为空的时候，引入 Vuex 之后是会自动注册的

具体来看看 mixin.js 这个文件，划重点（注意看注释）：

复制代码// 通过钩子 init / beforeCreate 执行 vuexInit
const usesInit = Vue.config._lifecycleHooks.indexOf('init') > -1
Vue.mixin(usesInit ? { init: vuexInit } : { beforeCreate: vuexInit })

// 组件初始化的时候注入 $store
function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      this.$store = options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
}

Store 对象

Vuex 的最佳实践中，一般这样使用（带着目标去阅读，效果更佳）：

复制代码// create store
const store = new Vuex.Store({
  actions: {
    ...
  },
  modules: {
    ...
  }
})
import App from './comps/app.vue'
new Vue(Vue.util.extend({ el: '#root', store }, App))

我们需要新建一个 Store，在创建 Vue 实例的时候，作为参数传入，在上一节的 vuexInit 函数中，是从 this.$options 中取出 store 赋值给组件的 $store 的，如此，便能无缝联系上了

接下来的重点，就是 Store 这个类了，还是 store.js 这个文件，怀着入参为 ations 和 modules 的预期，来读 constructor 方法，倒是有一个语句是用来处理 modules 的

1	复制代码this._modules = new ModuleCollection(options)

但真的是寻寻觅觅寻不到从 options 中取出 actions 进行处理的方法，当然后面仔细阅读了 ModuleCollection 中的代码之后，才找到了答案，actions 参数也是在这里面提取的。毕竟让我纠结迷茫了良久，如果是我来写的话，我可能不会这么写，方法的命名需要有语义性，而且一个方法也应当只做一件事情

原则上为了尽快理清主流程，有些细节需要暂时略过（所以语义化的命名、合理的函数拆分，对阅读者来说是多么的重要），假设已经知道前面的步骤已经从 options 中读到了 actions 和 modules，那么下一个核心节点就是：

1	复制代码installModule(this, state, [], this._modules.root)

这一步再进行分解（注意看注释）

复制代码  // 注册 mutation
  module.forEachMutation((mutation, key) => {
    const namespacedType = namespace + key
    registerMutation(store, namespacedType, mutation, local)
  })

  // 注册 action
  module.forEachAction((action, key) => {
    const namespacedType = namespace + key
    registerAction(store, namespacedType, action, local)
  })

  // 注册 getter (computed)
  module.forEachGetter((getter, key) => {
    const namespacedType = namespace + key
    registerGetter(store, namespacedType, getter, local)
  })

  // 遍历子模块
  module.forEachChild((child, key) => {
    installModule(store, rootState, path.concat(key), child, hot)
  })

出于篇幅以及希望阅读的同学亲自实践的目的，具体的注册方式这里不再展开

进入下一个重要环节 resetStoreVM，创建 VM，实现数据监听(注意看注释)

复制代码function resetStoreVM (store, state, hot) {

  // bind store public getters
  // getters 其实就是 computed
  store.getters = {}
  const wrappedGetters = store._wrappedGetters
  const computed = {}
  forEachValue(wrappedGetters, (fn, key) => {
    // use computed to leverage its lazy-caching mechanism
    computed[key] = () => fn(store)
    Object.defineProperty(store.getters, key, {
      get: () => store._vm[key],
      enumerable: true // for local getters
    })
  })

  // 创建一个 Vue 实例，作为 Store 的 VM
  store._vm = new Vue({
    data: {
      ?state: state
    },
    computed
  })
  ...
}

五、小结

至此，Vuex 的主流程代码基本上算是走了一遍，看似神奇，可是代码量并不大，还是那句话，希望阅读的同学能够按照这个套路自己走一遍

本文在公众号菲麦前端同步发行：

本文转载自: 掘金

开发者博客 – 和开发相关的这里全都有

如何阅读框架源代码

发表于 2017-07-03

不管对于那个段位的 Developer 来说，读源码都是一件好处颇多的事情，特别于初学者而言，这能迅速的吸纳优秀框架精华代码营养，迅速成长。不巧的是，晦涩难懂的源码，很容易让人心生怯意。今天分享就来谈一谈读源码的方法，希望能帮到一些有心读源码的朋友

一、了解框架解决了什么问题

这不光对读源码有帮助，对整个学习都很有帮助。思考一个问题：你学习 Vue\React 的原因，除了它们如日中天，再不学习都不好意思找工作了，还掺杂了一些它们的某些优秀特性能给我带来某某好处的思考么？

新潮的框架，开发者需要而且也应该去了解，用人单位需要当然是本能的驱动力，什么火学什么也无可厚非，但是在闷声学习之前，需要加上一层思考，相比之前的技术体系，这个框架到底解决了什么问题，优势在哪，怀着目的去学习才不至于迷茫，例如 Vue\React 最大的优点是什么呢？组件化吧，带着框架是如何解决这个问题的疑问去学习，定能事半功倍

对于读源码来说，这一步就更关键了，如果都不了解代码是要干什么的，怎么会清楚它为什么这么写呢？再细分一下，在仔细阅读某个模块的文件的时候，也应当对模块的功能有个整体的把握

二、了解框架的设计思想

这一步尤为关键，我们看不懂源码（或者看起来举步维艰），并不是因为不懂某一句语法，而是不明白作者的思路。举一个简单的例子：

复制代码    //这个方法可以获得point2顶角的弧度值
    function getAngle(point1, point2, point3) {
        var bb = (point2.y - point1.y)*(point2.y - point1.y) + (point2.x - point1.x)*(point2.x - point1.x);
        var aa = (point3.y - point1.y)*(point3.y - point1.y) + (point3.x - point1.x)*(point3.x - point1.x);
        var cc = (point3.y - point2.y)*(point3.y - point2.y) + (point3.x - point2.x)*(point3.x - point2.x);
        var cosa = (bb + cc - aa)/(2*Math.sqrt(bb)*Math.sqrt(cc));
        return Math.acos(cosa);
    }

getAngle方法接收三个坐标参数，可以计算出 point2 顶角的弧度值，如果不告诉你这使用了运用三角形的余弦定理，恐怕你看半天也看不出来这是怎么算出来的

那么我们可以通过什么渠道去了解框架的设计思想：

到框架的官网看文档，开源的框架，甭管详不详细，这肯定是第一手权威资料
到网上搜别人的分析总结(源码分析也不会少)，大多数情况下，都会有大神已经研究过了，站在巨人的肩膀上，能省不少事

另外，设计思想是整个框架层面的，对于每一个实现细节，又会使用不少设计模式，例如函数式编程（Js 中最为常用）、单例模式、代理模式、工厂模式等等，这就需要平时的积累了。有一定代码量的积累之后，建议阅读一些设计模式类的书籍，对自己的代码设计，以及阅读别人的源码，都很有益处。

三、搭建调试环境，摸清执行主脉络

第一节我们提到，细分到每个模块，要对模块功能有个整体的把握，如何去做到这个“把握”？除了官方文档和网上查阅的资料，最好的办法就是写一个简单的 Demo，搭建好测试环境，增加一些调试信息，自然能理清除框架的生命周期中，每一步需要调用那个模块（对于目录结构很清晰的优秀框架，有时候也可以凭直觉猜测，打印日志确认）

四、分清主次

框架源码就是一颗枝繁叶茂的参天大树，而你要做的事情是从根部网上爬。树要这么多分支，时间又是这么昂贵，阅读的策略很重要。我们的阅读路径，要以主要流程为主（也就是树的主驱赶，这样才能尽可能快的到达顶点），对于一些细枝末节，再这之后再来慢慢啃（或者有必要的时候）
例如，要去阅读 Vue 的源码，有个目录是解析模板，生成语法树 AST 从而最终生成 Render Function 的, 其实这一步最关键的是这个 Render Function 的生成结果，对于如何去解析模板、生成语法树，可以先放一放，回头需要的时候再回头看。否则你很容易卡死在某个点上出不来，从而产生放弃的念头

五、坚持不放弃

技术策略得当，遇到棘手过不去的问题也很正常，这个时候考验的就是毅力了，继续调试、搜索资料、或者找个大神来问一问都行，只要不放弃就好~~

本文转载自: 掘金

开发者博客 – 和开发相关的这里全都有

RSA 算法和另类攻击方式

发表于 2017-06-07

原文: RSA算法流程和计时攻击

RSA 算法一种常见的非对称加密算法, 常用来对一些在网络上传输的敏感信息进行加密, 本文将概述RSA算法的流程以及一种意想不到的”旁门左道”的攻击方式.

RSA

RSA 算法流程如下,

找到互质的两个数, p 和 q, 计算 N = p*q
确定一个数 e, 使得 e 与 (p-1)(q-1) 互质, 此时公钥为 (N, e), 告诉给对方
确定私钥 d, 使得 e*d-1能够被(p-1)(q-1)整除
消息传输方传输消息 M, 加密密文C为: $C = M^e \mod N$
消息接受方通过收到密文消息 C, 解密消息 M: $M= C^d \mod N$

RSA算法依赖于欧拉定理, 一个简化版本为大致为 a 和 p 互质, 那么有,

$ a^{p-1} \equiv 1 \mod p$, a 的 p-1 次方对 p 取余为1, (a 的 p-1次方减去1可以整除 p).

欧拉定理的证明比较复杂，本来有一个绝妙的证明方式的, 但由于微信公众号字数有限, 这里就省略了(什么? 这跟费马有什么关系? 实在要看的可以看文末参考资料)

举个例子

N = pq, 取俩素数 p=11, q = 3, N = p * q = 33, 取 e 与 (p-1)(q-1) = 20 互质的数 e = 3, 然后通过 $ed \equiv 1 \mod (p-1)(q-1)$ 确定私钥,
即取一个 d 使得 3*d -1 能 20 被整除, 假设取 d=7 或者d=67. (3*7-1=20 当然能被20整除, 3*67-1=200 也能被20整除)

因此 public key 为 (N=33, e=3), private key 为 d=7 或者d=67,
假设加密消息M=8,
通过加密算法 $C = M^e \mod N$
得到密文 C=8^3 % 33 = 17

再来看解密, 由$M= C^d \mod N$, 得到明文 M = 17^7 % 33 = 8 或者 M=17^67 % 33=8, 是不是很神奇? (这里^ 表示多少次方, 后文中的有的表示异或)

(来, 安利一个计算器的工具, bc 命令, 支持任意精度的计算, 其实 Mac简单的计算就可以通过前面介绍的 Alfred 可以方便得完成)

linux计算器

RSA 破解

如果需要破解 RSA 的话, 就是需要找到 p 和 q, 使得 pq=33, 如果知道了 p 和 q 就能通过公钥 N 和 e 反推出私钥 d 了. 然而大数分解在历史以来就一直是数学上的难题.
当然上面所述的案例较简单, 当 N 很大时, 就特别困难了. 曾经有人花了五个月时间分解了这个数39505874583265144526419767800614481996020776460304936454139376051579355626529450683609727842468219535093544305870490251995655335710209799226484977949442955603(159位数), RSA-155 (512 bits) [from wikipedia].

这条路走不通, 就有人走了”旁门左道”了, Stanford 的几个研究者用了两个小时破解了 OpenSSL 0.9.7 的 1024-bit 的 RSA 私钥 (感兴趣的同学可以看他们的论文Remote Timing Attacks are Practical),
用到的方法就是后面提到的时序攻击(或译为”计时攻击”), 主要思想是因为在进行加密时所进行的模指数运算是一个bit一个bit进行的, 而bit为1所花的运算比bit为0的运算要多很多(耗时久)，
因此可以通过得到大量消息与其加密时间, 然后基于统计的方法就可以大致反推出私钥的内容.

计时攻击(Timing Attack)

计时攻击是边信道攻击(或称”侧信道攻击”, Side Channel Attack, 简称SCA) 的一种, 主要是一种利用不同的输入会有不同的执行时间这个特点.
举个具体的例子, 这个来自playframewok 里用来验证cookie(session)中的数据是否合法(包含签名的验证), 也是我写这篇文章的由来.

复制代码def safeEquals(a: String, b: String) = {
  if (a.length != b.length) {
    false
  } else {
    var equal = 0
    for (i <- Array.range(0, a.length)) {
      equal |= a(i) ^ b(i)
    }
    equal == 0
  }
}

刚开始看到这段源码感觉挺奇怪的, 这个函数的功能是比较两个字符串是否相等, 首先长度不等肯定不等, 立即返回这个是可以理解的,
可是后面的代码得发挥下想象力了, 当然这个逻辑还是好懂: 通过异或操作1^1=0, 1^0=1, 0^0=0, 如果每一 bit 都相等的话, 两个字符串肯定相等, 最后的equal肯定为0, 否则为1.
但从效率角度上讲, 不是应该只要中途发现某一位的结果为1了就可以立即返回 false 了吗? (如下所示)

复制代码for (i <- Array.range(0, a.length)) {
  if (a(i) ^ b(i) != 0) // or a(i) != b[i]
    return false
}

结合方法名称 safeEquals 可能知道些眉目, 与安全有关, 延迟计算等提高效率的手段见过不少, 但这种延迟返回的还是很少见.
这种手段可以让调用 safeEquals("abcdefghijklmn", "xbcdefghijklmn") 和调用 safeEquals("abcdefghijklmn", "abcdefghijklmn") 的所耗费的时间一样,
防止通过大量的改变输入并通过统计运行时间来暴力破解出要比较的字符串, 这里其实都忽略了对比较字符串长度的attack问题.

举个例子, 假设某个用户设置了密码为 password, 通过从a到z(实际范围可能更广)不断枚举第一位, 最终统计发现 p0000000 的运行时间比其他从任意a~z的都短,
这样就能猜测出用户密码的第一位很可能是p, 然后再不断一位一位迭代下去最终破解出用户的密码. 如果密码通过hash加密后也能通过这种攻击方式得到hash后的密文.

当然, 从理论角度上讲这个确实容易理解, 如上文所提到的学术界已经有论文发表指出用这种计时攻击的方法破解了 OpenSSL 0.9.7 的RSA加密算法了.
然而在实际中是否存在这样的攻击问题呢?
因为好像通过统计运行时间总感觉不太靠谱, 这个运行时间对环境太敏感了, 比如网络, 内存, CPU负载等等都会影响.
尽管如此, 各个软件的实现也都采用了这种 safeEquals 的方法.

JDK 1.6.0_17 中的Release Notes中就提到了MessageDigest.isEqual 中的bug的修复

BugId	Category	Subcategory	Description
6863503	java	classes_security	SECURITY: MessageDigest.isEqual introduces timing attack vulnerabilities

这次变更的diff详细信息来源为:

MessageDigest.isEqual计时攻击

为了防止(特别是与签名/密码验证等相关的操作)被 timing attack, 目前各大语言都提供了响应的安全比较函数, 例如 “世界上最好的编程语言” – php中的:

复制代码// Compares two strings using the same time whether they're equal or not.
// This function should be used to mitigate timing attacks; for instance, when testing crypt() password hashes.
bool hash_equals ( string $known_string , string $user_string )

//This function is safe against timing attacks.
boolean password_verify ( string $password , string $hash )

各种语言版本的实现方式都与上面的版本差不多, 将两个字符串每一位取出来异或(^)并用或(|)保存, 最后通过判断结果是否为0来确定两个字符串是否相等.

参考资料:

p.s 如果你觉得这文章对你有那么一点点收获, 请不要犹豫扫描下面二维码关注我的公众号, 如果你再能帮忙转发一下就更好了. 么么哒.

本文转载自: 掘金

开发者博客 – 和开发相关的这里全都有

JavaScript专题之跟着underscore学防抖

发表于 2017-06-02

JavaScript 专题系列第一篇，讲解防抖，带你从零实现一个 underscore 的 debounce 函数

前言

在前端开发中会遇到一些频繁的事件触发，比如：

window 的 resize、scroll
mousedown、mousemove
keyup、keydown
……

为此，我们举个示例代码来了解事件如何频繁的触发：

我们写个 index.html 文件：

复制代码<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>debounce</title>
    <style>
        #container{
            width: 100%; height: 200px; line-height: 200px; text-align: center; color: #fff; background-color: #444; font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script src="debounce.js"></script>
</body>

</html>

debounce.js 文件的代码如下：

复制代码var count = 1;
var container = document.getElementById('container');

function getUserAction() {
    container.innerHTML = count++;
};


container.onmousemove = getUserAction;

我们来看看效果：

debounce

从左边滑到右边就触发了 165 次 getUserAction 函数！

因为这个例子很简单，所以浏览器完全反应的过来，可是如果是复杂的回调函数或是 ajax 请求呢？假设 1 秒触发了 60 次，每个回调就必须在 1000 / 60 = 16.67ms 内完成，否则就会有卡顿出现。

为了解决这个问题，一般有两种解决方案：

debounce 防抖
throttle 节流

防抖

今天重点讲讲防抖的实现。

防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行，真是任性呐!

第一版

根据这段表述，我们可以写第一版的代码：

复制代码// 第一版
function debounce(func, wait) {
    var timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(func, wait);
    }
}

如果我们要使用它，以最一开始的例子为例：

1	复制代码container.onmousemove = debounce(getUserAction, 1000);

现在随你怎么移动，反正你移动完 1000ms 内不再触发，我再执行事件。

顿时就从 165 次降低成了 1 次!

棒棒哒，我们接着完善它。

this

如果我们在 getUserAction 函数中 console.log(this)，在不使用 debounce 函数的时候，this 的值为：

1	复制代码<div id="container"></div>

但是如果使用我们的 debounce 函数，this 就会指向 Window 对象！

所以我们需要将 this 指向正确的对象。

我们修改下代码：

复制代码// 第二版
function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context)
        }, wait);
    }
}

现在 this 已经可以正确指向了。让我们看下个问题：

event 对象

JavaScript 在事件处理函数中会提供事件对象 event，我们修改下 getUserAction 函数：

复制代码function getUserAction(e) {
    console.log(e);
    container.innerHTML = count++;
};

如果我们不使用 debouce 函数，这里会打印 MouseEvent 对象，如图所示：

MouseEvent

但是在我们实现的 debounce 函数中，却只会打印 undefined!

所以我们再修改一下代码：

复制代码// 第三版
function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

返回值

再注意一个小点，getUserAction 函数可能是有返回值的，所以我们也要返回函数的执行结果

复制代码// 第四版
function debounce(func, wait) {
    var timeout, result;

    return function () {
        var context = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            result = func.apply(context, args)
        }, wait);

        return result;
    }
}

到此为止，我们修复了三个小问题：

this 指向
event 对象
返回值

立刻执行

这个时候，代码已经很是完善，但是为了让这个函数更加完善，我们接下来思考一个新的需求。

这个需求就是：

我不希望非要等到事件停止触发后才执行，我希望立刻执行函数，然后等到停止触发n秒后，才可以重新触发执行。

想想这个需求也是很有道理的嘛，那我们加个 immediate 参数判断是否是立刻执行。

复制代码// 第五版
function debounce(func, wait, immediate) {

    var timeout, result;

    return function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已经执行过，不再执行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                result = func.apply(context, args)
            }, wait);
        }

        return result;
    }
}

取消

最后我们再思考一个小需求，我希望能取消 debounce 函数，比如说我 debounce 的时间间隔是 10 秒钟，immediate 为 true，这样的话，我只有等 10 秒后才能重新触发事件，现在我希望有一个按钮，点击后，取消防抖，这样我再去触发，就可以又立刻执行啦，是不是很开心？

为了这个需求，我们写最后一版的代码：

复制代码// 第六版
function debounce(func, wait, immediate) {

    var timeout, result;

    var debounced = function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已经执行过，不再执行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                result = func.apply(context, args)
            }, wait);
        }
        return result;
    };

    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
    };

    return debounced;
}

演示效果如下：

debounce-cancel

至此我们已经完整实现了一个 underscore 中的 debounce 函数，恭喜，撒花！

专题系列

JavaScript专题系列目录地址：github.com/mqyqingfeng…。

JavaScript专题系列预计写二十篇左右，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等，特点是研(chao)究(xi) underscore 和 jQuery 的实现方式。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎star，对作者也是一种鼓励。

本文转载自: 掘金

开发者博客 – 和开发相关的这里全都有

为什么我们需要 Vuex

发表于 2017-05-26

一、一个错误引发的思考

在 Weex 子组件中通过 this.$parent.$emit('event') 触发父组件的事件，父组件通过 this.$on('event', handler) 接收事件，从而实现父子组件的通信。这在 Native 端表现正常，然而当使用 Vue-loader 编译代码，引入 vue-runtime 和 weex-vue-render 在浏览器端运行的时候，事件无法正常捕获，这是什么原因呢？

假设把前文所说的父组件命名为 father, 子组件命名为 child，起初, Weex 中:

1	复制代码 child.$parent === father // true

我们为了通知 father 去做某件事情，可以在 child 中使用 this.$parent.$emit，可是当解析到浏览器执行的时候，Debugger 发现：

1 2	复制代码 child.$parent === father // false child.$parent.$parent === father // false

也就是在 father 和 child 之间，多了一层组件的封装，之前的父子关系发生了改变，事件自然无法正常传达

这是因为，在 Weex 中有很多内建组件，底层基于 Native 端实现，当通过 vue-runtime 在浏览器运行的时候，需要将这些内建组件用基于浏览器的 Vue 组件代替，而这些 Vue 组件要实现类似底层 Native 组件的效果，极有可能需要封装多层，也就是会出现上述的父子关系变更的情况

可以认为是 Weex 做得不好的地方，但是我觉着，就算没有这个错误，也应该避免使用
this.$parent

二、this.$parent 背离了组件解耦的原则

上述的组件通信方式，是从哪来的奇淫巧技，我都已忘记，目前在 Vue 官网上找不到这种使用方法，也就是连官方都不推荐了更印证了不应该使用 this.$parent 的说法。

其实原因也很简单，子组件引用父组件的实例，这种强关联背离了组件的解耦原则，子组件依赖于某一特定的父组件，那么这个子组件只适用在这个父组件下，把这个子组件放到别处，就无法正常运行（或者有功能的缺失），并且一旦出现章节一中父子关系变更的情况，结果更加难以预料

那么子父组件确实是需要通信的时候，不使用 this.$parent 有什么替代方案么？答案是有的，Vue 中有个 bus 总线，子组件通过 bus.$emit把事件发到总线中，任何组件都可以监听这个事件。也就是子组件只负责触发事件，并不需要关心具体的处理组件。总线接收到事件信号后，发送到监听了该事件的组件处理

对于父到子的通信，父组件通过 props 向子组件传入参数，对于这个方向的数据流，我们却不用太担心的解耦的问题，因为父组件作为调用方只需要传递子组件需要的参数即可，子组件只需要关心参数，并不需要关心是谁在调用，同样可以顺利移植，完成解耦

从这个层面来说，从某种意义上说，单向数据流促进了组件间的解耦

三、这同样可以解释为什么我们需要 Vuex

以这个角度来观察 Vuex 以及所有单向数据流状态控制框架，是不是某种意义上的事件总线呢？

bus.png

store.png

其实 Vuex 不过是 Bus 更高级细致的实现而已，连官方文档也说了，有必要好好思考下你是否真的需要 Vuex，如果你的应用本身不复杂，其实只需要一个简单的 Bus 就够了

公众号：菲麦前端

本文转载自: 掘金

开发者博客 – 和开发相关的这里全都有

简介

MySQL Replication的发展

MySQL 半同步复制的数据一致性

源码剖析

rpl_semi_sync_master_wait_point的配置

源码剖析：

配置为WAIT_AFTER_COMMIT

配置为WAIT_AFTER_SYNC

sync_binlog的配置

源码剖析：

配置分析

sync_relay_log的配置

源码剖析

配置分析

MySQL 三节点

总结

Vuex代码结构

源码分析

入口文件

install方法

Store构造函数

Vuex的初始化核心

commit

Vuex辅助函数

完

系统功能要求

监控内容

快速开始

1、数据接入

引言

第一章 正则表达式字符匹配攻略

1 两种模糊匹配

2. 字符组

3. 量词

4. 多选分支

5. 案例分析

第1章 小结

第二章 正则表达式位置匹配攻略

1. 什么是位置呢？

2. 如何匹配位置呢？

3. 位置的特性

4. 相关案例

第二章小结

第三章 正则表达式括号的作用

1. 分组和分支结构

2. 引用分组

3. 反向引用

4. 非捕获分组

5. 相关案例

第三章小结

第4章 正则表达式回溯法原理

1. 没有回溯的匹配

2. 有回溯的匹配

3. 常见的回溯形式

第四章小结

第5章 正则表达式的拆分

1. 结构和操作符

2. 注意要点

3. 案例分析

第五章小结

第6章 正则表达式的构建

1. 平衡法则

2. 构建正则前提

3. 准确性

4. 效率

第六章小结

第七章 正则表达式编程

1. 正则表达式的四种操作

2. 相关API注意要点

3. 真实案例

第七章小结

后记

1. 需要注意的地方

2. 参考资料

3. 个人感悟

一. 启动RunLoop

二. 退出RunLoop

三. 总结

参考资料:

一、前提

第一章正则表达式字符匹配攻略

第1章小结

第二章正则表达式位置匹配攻略

第三章正则表达式括号的作用

第4章正则表达式回溯法原理

第5章正则表达式的拆分

第6章正则表达式的构建

第七章正则表达式编程