Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: localization for zh-cn #167

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@

A library for finite state machines.

一个有限状态机库.

查看[中文文档](README_zh-cn.md)

![matter state machine](examples/matter.png)

<br>
Expand All @@ -14,6 +18,9 @@ A library for finite state machines.
> **VERSION 3.0** Is a significant rewrite from earlier versions.
Existing 2.x users should be sure to read the [Upgrade Guide](docs/upgrading-from-v2.md).

> 值得注意的是**VERSION 3.0** 已经重写了。
现有2.x用户应该阅读[升级指南](docs/upgrading-from-v2.md).

<br>

# Installation
Expand Down
151 changes: 151 additions & 0 deletions README_zh-cn.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
# Javascript State Machine

[![NPM version](https://badge.fury.io/js/javascript-state-machine.svg)](https://badge.fury.io/js/javascript-state-machine)
[![Build Status](https://travis-ci.org/jakesgordon/javascript-state-machine.svg?branch=master)](https://travis-ci.org/jakesgordon/javascript-state-machine)

一个有限状态机库.

![matter state machine](examples/matter.png)

<br>

### 现有用户注意

> 值得关注的是**VERSION 3.0** 已经重写了。
现有2.x用户应该阅读[升级指南](docs/upgrading-from-v2.md).

<br>

# 安装

在浏览器中使用:

```html
<script src='state-machine.js'></script>
```

> 在下载[js文件](dist/state-machine.js)或者[压缩版js文件](dist/state-machine.min.js)之后引用。

在Node中使用npm安装:

```shell
npm install --save-dev javascript-state-machine
or
npm install --save javascript-state-machine
```

在Node的js文件中导入:

```javascript
var StateMachine = require('javascript-state-machine');
```

# 用法

一个状态机可以这样构建:

```javascript
var fsm = new StateMachine({
init: 'solid',
transitions: [
{ name: 'melt', from: 'solid', to: 'liquid' },
{ name: 'freeze', from: 'liquid', to: 'solid' },
{ name: 'vaporize', from: 'liquid', to: 'gas' },
{ name: 'condense', from: 'gas', to: 'liquid' }
],
methods: {
onMelt: function() { console.log('I melted') },
onFreeze: function() { console.log('I froze') },
onVaporize: function() { console.log('I vaporized') },
onCondense: function() { console.log('I condensed') }
}
});
```

... 创建的对象上有包含当前状态的的属性:

* `fsm.state`

... 创建的对象上有转换到不同状态的方法:

* `fsm.melt()`
* `fsm.freeze()`
* `fsm.vaporize()`
* `fsm.condense()`

... 观察方法在生命周期中自动被调用:

* `onMelt()`
* `onFreeze()`
* `onVaporize()`
* `onCondense()`

... 还有下面的帮助方法:

|方法|注释|
|---|---|
|fsm.is(s)|如果当前状态`s`是当前状态则返回true|
|fsm.can(t)|如果转换`t`在当前状态下`可以`发生则返回true|
|fsm.cannot(t)|如果转换`t`在当前状态下`不可以`发生则返回true|
|fsm.transitions()|返回当前状态下可以发生的转换的列表|
|fsm.allTransitions()|返回所有可以发生的转换的列表|
|fsm.allStates()|返回所有可以出现的状态的列表|

# 术语

一个状态机由一组[**States状态**](docs/states-and-transitions.md)组成

* solid
* liquid
* gas

一个状态机可以通过[**Transitions转换**](docs/states-and-transitions.md)改变状态

* melt
* freeze
* vaporize
* condense

一个状态机在转换期间可以通过观察[**Lifecycle Events生命周期事件**](docs/lifecycle-events.md)执行操作

* onBeforeMelt
* onAfterMelt
* onLeaveSolid
* onEnterLiquid
* ...

一个状态机可以有任意的[**Data 数据 and Methods 方法**](docs/data-and-methods.md).

多个状态机实例可以通过使用[**State Machine Factory**](docs/state-machine-factory.md)来创建.

# 文档

阅读更多有关的文档

* [States and Transitions状态和转换](docs/zh-cn/states-and-transitions.md)
* [Data and Methods数据和方法](docs/zh-cn/data-and-methods.md)
* [Lifecycle Events生命周期事件](docs/zh-cn/lifecycle-events.md)
* [Asynchronous Transitions异步转换](docs/zh-cn/async-transitions.md)
* [Initialization初始化](docs/zh-cn/initialization.md)
* [Error Handling错误处理](docs/zh-cn/error-handling.md)
* [State History状态历史](docs/zh-cn/state-history.md)
* [Visualization可视化](docs/zh-cn/visualization.md)
* [State Machine Factory状态机工厂](docs/state-machine-factory.md)
* [Upgrading from 2.x从2.x升级](docs/zh-cn/upgrading-from-v2.md)

# 贡献(〜^㉨^)〜

你可以通过创建issues或者pr来给项目[贡献](docs/contributing.md)

# 发行记录

查看 [发行记录](RELEASE_NOTES.md) 文件.

# 协议

查看[MIT协议](https://github.com/jakesgordon/javascript-state-machine/blob/master/LICENSE) 文件.

# 联系

如果你有想法, 反馈, 需求 或者bugs报告, 你可以联系我
[[email protected]](mailto:[email protected]), 或通过我的网站: [Code inComplete](http://codeincomplete.com/)
54 changes: 54 additions & 0 deletions docs/zh-cn/async-transitions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# 异步转换

在阅读本文之前,您应该先熟悉状态机[生命周期事件](lifecycle-events.md)。

有时,您需要在状态转换期间执行一些异步代码,并确保直到代码完成,才进入下一状态。

例如:希望逐渐淡化UI组件后改变状态,在动画完成前不要转换到下一个状态,在动画完成后转换到下一个状态。
你可以通过从任意[生命周期事件](lifecycle-events.md)中返回[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/._Objects/Promise)对象

从生命周期事件返回`Promise`将导致该转变的生命周期暂停。它可以通过解决`Promise`来继续,或者通过拒绝`Promise`来取消。

例如(使用jQuery的效果):

```javascript
var fsm = new StateMachine({

init: 'menu',

transitions: [
{ name: 'play', from: 'menu', to: 'game' },
{ name: 'quit', from: 'game', to: 'menu' }
],

methods: {

onEnterMenu: function() {
return new Promise(function(resolve, reject) {
$('#menu').fadeIn('fast', resolve)
})
},

onEnterGame: function() {
return new Promise(function(resolve, reject) {
$('#game').fadeIn('fast', resolve)
})
},

onLeaveMenu: function() {
return new Promise(function(resolve, reject) {
$('#menu').fadeOut('fast', resolve)
})
},

onLeaveGame: function() {
return new Promise(function(resolve, reject) {
$('#game').fadeOut('fast', resolve)
})
}
}

})
```

> 确保你最终总是解决(或拒绝)你的`Promise`,否则状态机将永远停留在那个挂起的转换中。
59 changes: 59 additions & 0 deletions docs/zh-cn/contributing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# Contributing

The `javascript-state-machine` library is built using:

* [Webpack 2](https://webpack.js.org/concepts/) - for bundling javascript modules together
* [UglifyJS2](https://github.com/mishoo/UglifyJS2) - for minifying bundled javascript files
* [Ava](https://github.com/avajs/ava) - for testing

The directory structure includes:

```shell
/bin # - build scripts
/dist # - minified bundles for distribution
/docs # - documentation
/examples # - example visualizations
/lib # - bundled source code for npm
/src # - source code
/test # - unit tests

package.json # - npm configuration
webpack.config.js # - webpack configuration

LICENSE # - the project licensing terms
README.md # - the project readme
RELEASE_NOTES.md # - the project release notes

```

Build time dependencies can be installed using npm:

```shell
> npm install
```

A number of npm scripts are available:

```shell
> npm run test # run unit tests
> npm run build # bundle and minify files for distribution
> npm run watch # run tests if source files change
```

## Source Code

The source code is written in es5 syntax and should be supported by all [es5 compatible browsers](http://caniuse.com/#feat=es5).
[Babel](https://babeljs.io/) is **NOT** used for this project. Webpack is used to
bundle modules together for distribution.

## Submitting Pull Requests

Generally speaking, please raise an issue first and lets discuss the problem and the
proposed solution. The next step would be a pull-request - fantastic and thank you for helping out - but
please try to...

* ensure the tests pass (`npm test`).
* rebuild distribution files (`npm run build`).
* include tests for your changes.
* include documentation for your changes.
* include a great commit message.
62 changes: 62 additions & 0 deletions docs/zh-cn/data-and-methods.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
# 数据和函数

除了[状态和转换](states-and-transitions.md),一个状态机也可以包含任意的数据和方法。

```javascript
var fsm = new StateMachine({
init: 'A',
transitions: [
{ name: 'step', from: 'A', to: 'B' }
],
data: {
color: 'red'
},
methods: {
describe: function() {
console.log('I am ' + this.color);
}
}
});

fsm.state; // 'A'
fsm.color; // 'red'
fsm.describe(); // 'I am red'
```

## 数据和状态机工厂

如果你想通过[状态机工厂](state-machine-factory.md)创建多个实例,那么`data`对象将会在多个实例之间共享,这可能不是你想要的。为确保每一个实例获得唯一的`data`你应该使用`data`函数代替。

```javascript
var FSM = StateMachine.factory({
init: 'A',
transitions: [
{ name: 'step', from: 'A', to: 'B' }
],
data: function(color) { // <-- use a method that can be called for each instance
return {
color: color
}
},
methods: {
describe: function() {
console.log('I am ' + this.color);
}
}
});

var a = new FSM('red'),
b = new FSM('blue');

a.state; // 'A'
b.state; // 'A'

a.color; // 'red'
b.color; // 'blue'

a.describe(); // 'I am red'
b.describe(); // 'I am blue'
```

> 注意: 在构造每个实例时使用的参数直接传递到“data”函数。

Loading