Navigation

Posted on Aug 10 2014 | Edited on Mar 24 2015 | In ionic

Symbols count in article: 7k | Reading time ≈ 6 mins.

ion-nav-view

当用户浏览整个应用程序，Ionic能够跟踪他们的浏览历史。通过了解他们的历史、视图之间的转换正确滑动或左或右，或没有过渡的。另一个优点是Ionic的导航系统是其管理多个历史能力。

Ionic使用AngularUI Router模块，所以app的接口可以组织为”states”。和Angular的核心$route服务一样,URLs可以用来控制视图。然而，AngularUI Router提供了更加强大的状态管理功能，状态与name绑定,并且有嵌套或并行的视图，在一个页面允许多个视图。并且，每个状态没有一定需要绑定URL，可以更加灵活的将数据附加至状态。

在你的应用程序用，ionNavView指示器用来渲染模板，每个模板都是一个状态的一部分。状态通常映射至URL，并且通过angular-ui-router来定义。（记住在示例中将ui-view替换为ion-nav-view）

用法

在这个例子中，我们将创建一个包含我们的不同状态的应用程序中的导航视图。

要做到这一点，在我们的标记，我们使用ionNavView顶级的指令。要显示一个标题栏，我们使用ionNavBar指令，更新，因为我们通过导航堆栈导航。

在navView的animation中，你可以使用任何animation的类。

推荐的效果: ‘slide-left-right’, ‘slide-left-right-ios7’, ‘slide-in-up’.

<ion-nav-bar></ion-nav-bar>
<ion-nav-view animation="slide-left-right">
  <!-- Center content -->
</ion-nav-view>

接下来，我们需要设置状态

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

当程序启动时，stateProvider会查看url，匹配index state，则会尝试去加载home.html至

页面通过给定的URLs加载。在Angulr中创建templates的一个简单的办法就直接通过<script type="text/ng-template">语法在页面中创建。

<script id="home" type="text/ng-template">
  <!-- The title of the ion-view will be shown on the navbar -->
  <ion-view title="'Home'">
    <ion-content ng-controller="HomeCtrl">
      <!-- The content of the page -->
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>

这样的好处是因为缓存加载会非常快，而不是通过异步加载。

ion-view

Child of ionNavView

用法

下面是一个例子，我们的页面将包含“My Page”为标题导航栏加载。

<ion-nav-bar></ion-nav-bar>
<ion-nav-view class="slide-left-right">
  <ion-view title="My Page">
    <ion-content>
      Hello!
    </ion-content>
  </ion-view>
</ion-nav-view>

API

属性	类型	详细说明
title(可选)	string	显示在`ionNavBar`的标题
hide-back-button(可选)	boolean	是否隐藏`ionNavBar`默认的后退按钮
hide-nav-bar(可选)	boolean	是否隐藏默认的`ionNavBar`

Delegate: $ionicNavBarDelegate

如果我们已经有了ionNavView,我们同样可以创建<ion-nav-bar>来更新程序的状态。

我们可以在其中放置ionNavBackButton来添加返回按钮

我们可以根据当前的可见视图使用ionNavButtons添加按钮

通过在animation属性中添加animation class来达到title变化的动画效果。(推荐: ‘nav-title-slide-ios7’).

注意：ion-nav-bar仅仅在ionView中存在的情况下才起效果

用法

<body ng-app="starter">
  <!-- The nav bar that will be updated as we navigate -->
  <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- where the initial view template will be rendered -->
  <ion-nav-view>
    <ion-view>
      <ion-content>Hello!</ion-content>
    </ion-view>
  </ion-nav-view>
</body>

API

属性	类型	详细说明
delegate-handle(可选)	stirng	用来被`$ionicNavBarDelegate`识别
align-title(可选)	string	‘left’, ‘right’, ‘center’. 默认为’center’.
no-tap-scroll(可选)	boolean	默认的，点击的时候，会自动将内容滚动至顶部。通过设置为false可禁用这一行为。

另外用法

你可能在每个视图中放置ion-nav-bar，这就要求你拥有整个nvabar，不仅仅contents、transition、view。

这与在ion-view中使用header bar相似，但他有一个导航栏的功能。

如果你这么做，很简单的就是在navbar放置nav buttons；不要使用<ion-nav-buttons>

<ion-view title="myTitle">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button>
      Back
    </ion-nav-back-button>
    <div class="buttons right-buttons">
      <button class="button">
        Right Button
      </button>
    </div>
  </ion-nav-bar>
</ion-view>

ion-nav-buttons

Child of ionNavView

在ionView通过ionNavButtons来设置你ionNavBar上的按钮。

任何你声明的按钮都会被放置在nvabar对应的地方，当离开视图的时候被销毁

用法

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="left">
      <button class="button" ng-click="doSomething()">
        I'm a button on the left of the navbar!
      </button>
    </ion-nav-buttons>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

API

属性	类型	详细说明
side	sting	放置在ionNavBar的方向。’left’ or ‘right’.

ion-nav-back-button

Child of ionNavBar

在ionNavBar中创建返回的按钮.

当用户可以返回的时候会显示出来。

默认的，点击会返回。如果你希望有更多高级的功能，请看下面的例子。

用法

默认的点击行为

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

自定义点击行为，使用$ionicNavBarDelegate

<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-clear"
    ng-click="goBack()">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.goBack = function() {
    $ionicNavBarDelegate.back();
  };
}

在button上显示之前的标题，再次使用$ionicNavBarDelegate

<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-icon">
    <i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}
  </ion-nav-back-button>
</ion-nav-bar>

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.getPreviousTitle = function() {
    return $ionicNavBarDelegate.getPreviousTitle();
  };
}

nav-clear

nav-clear作为属性的指示器，应该使用在使视图发生变化的元素上，例如或者

当nav-clear作用的元素点击时，会 disable the next view transition. This directive is useful, for example, for links within a sideMenu.

用法

下面是一个在side menu中的添加了nav-clear的链接，点击的时候会禁用原来的动画效果

1	<a nav-clear menu-close href="#/home" class="item">Home</a>

$ionicNavBarDelegate

Delegate for controlling the ionNavBar directive.

用法

<body ng-controller="MyCtrl">
  <ion-nav-bar>
    <button ng-click="setNavTitle('banana')">
      Set title to banana!
    </button>
  </ion-nav-bar>
</body>

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.setNavTitle = function(title) {
    $ionicNavBarDelegate.setTitle(title);
  }
}

方法

back([event])

在视图历史中返回

参数名	类型	详细信息
event(可选)	DOMEvent	The event object (eg from a tap event)

align([direction])

设置button中title的方向

参数名	类型	详细信息
direction(可选)	string	‘left’, ‘right’, ‘center’. 默认: ‘center’.

showBackButton([show])

设置/获取ionNavBackButton是否显示

参数名	类型	详细信息
show(可选)	boolean	是否显示返回按钮

返回:boolean.是否显示返回按钮

showBar(show)

细节同上

setTitle(title)

设置ionNavBar的标题

changeTitle(title, direction)

Change the title, transitioning the new title in and the old one out in a given direction.

参数名	类型	详细信息
title	string	The new title to show.
direction	string	The direction to transition the new title in. Available: ‘forward’, ‘back’.

getTitle()

返回:string.当前navbar的标题.

getPreviousTitle()

返回:string.前一个navbar的标题.

$getByHandle(handle)

参数名	类型	详细信息
handle	string

返回:delegateInstanceReturns: A delegate instance that controls only the ionTabs directives with delegate-handle matching the given handle.

示例: $ionicNavBarDelegate.$getByHandle(‘myHandle’).setTitle(‘newTitle’)

Side Menus

Posted on Aug 10 2014 | Edited on Mar 24 2015 | In ionic

Symbols count in article: 3.7k | Reading time ≈ 3 mins.

ion-side-menus

Delegate: $ionicSideMenuDelegate

包含侧滑菜单和主内容的容器。菜单可位于左边或右边，并且允许通过拖拽主内容来切换。

为了自动关闭菜单，您可以通过添加menuClose属性。menu-close通常被添加在ion-side-menu内容中links或button上，这样就可以通过点击对应的元素自动关闭侧滑菜单。

更多信息请查看

ionSideMenuContent
ionSideMenu
menuClose

用法

使用侧滑菜单，需要添加父元素<ion-side-menus>，<ion-side-menu-content>作为中心内容区域，还有一个或多个<ion-side-menu>

<ion-side-menus>
  <!-- Center content -->
  <ion-side-menu-content ng-controller="ContentController">
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <!-- Right menu -->
  <ion-side-menu side="right">
  </ion-side-menu>
</ion-side-menus>

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

API

属性	类型	详细说明
delegate-handle(可选)	string	The handle used to identify this side menu with `$ionicSideMenuDelegate`

Child of ionSideMenus

主要可见内容区域的容器，与ionSideMenu平级

用法

<ion-side-menu-content
  edge-drag-threshold="true"
  drag-content="true">
</ion-side-menu-content>

更加完整的例子，请看ionSideMenus

API

属性	类型	详细说明
drag-content	boolean	内容区域是否可以被拖拽，默认为true
edge-drag-threshold	boolean,number	内容区域的拖拽是否仅在小于屏幕边距一定阈值的范围内有效。默认为false。

接受三种类型的数值

如果给定一个非零的数字，距离屏幕边距指定的像素允许拖拽
如果给定true，则默认25像素
如果给定false或者0，边距拖拽阈值无效，可以从内容区域的任何区域拖拽

Child of ionSideMenus

侧滑菜单的容器，与ionSideMenuContent平级。

用法

<ion-side-menu
  side="left"
  width="myWidthValue + 20"
  is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>

更加完整的例子，请看ionSideMenus

API

属性	类型	详细说明
side	string	菜单的位置，left或者right
is-enabled(可选)	boolean	菜单是否可用
width(可选)	number	菜单的宽度，默认275

切换给定边的侧滑菜单

用法

下方的示例是在nav bar中link。点击link就会自动打开给定的侧滑菜单

<ion-view>
  <ion-nav-buttons side="left">
   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
 ...
</ion-view>

关闭当前的侧滑菜单

用法

下面的实例是在side menu中的link中，点击这个link则会自动关闭当前打开的菜单

1	<a menu-close href="#/home" class="item">Home</a>

$ionicSideMenuDelegate

Delegate for controlling the ionSideMenus directive.

通过ionicSideMenuDelegate服务调用的函数会控制所有的side menus。通过调用$getByHandle获取ionSideMenus实例。

用法

<body ng-controller="MainCtrl">
  <ion-side-menus>
    <ion-side-menu-content>
      Content!
      <button ng-click="toggleLeftSideMenu()">
        Toggle Left Side Menu
      </button>
    </ion-side-menu-content>
    <ion-side-menu side="left">
      Left Menu!
    <ion-side-menu>
  </ion-side-menus>
</body>

function MainCtrl($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeftSideMenu = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

方法

toggleLeft([isOpen])

如果存在左侧滑菜单，则切换。

参数名	类型	详细信息
isOpen(可选)	boolean	是否打开或关闭菜单，默认切换菜单。

toggleRight([isOpen])

用法同toggleLeft([isOpen])

getOpenRatio()

返回已打开菜单的宽度占菜单宽度的比例。

返回：float。没有任何打开则为0；左侧菜单打开或打开中为0至1之间，右侧淡菜打开或打开中为0至-1之间

isOpen()

返回：boolean。左侧或右侧菜单处于打开状态

isOpenLeft()

返回：boolean。左侧菜单处于打开状态

isOpenRight()

返回：boolean。右侧菜单处于打开状态

canDragContent([canDrag])

参数名	类型	详细信息
canDrag(可选)	boolean	设置是否可以通过拖拽打开侧滑菜单

返回：boolean。是否可以通过拖拽打开侧滑菜单

edgeDragThreshold(value)

参数名	类型	详细信息
value	boolean,number

返回：boolean。是否可以在屏幕边距阈值内使用拖拽

$getByHandle(handle)

参数名	类型	详细信息
handle	string

返回:delegateInstanceReturns: A delegate instance that controls only the ionTabs directives with delegate-handle matching the given handle.

示例: $ionicSideMenuDelegate.$getByHandle(‘my-handle’).toggleLeft();

ionic-Tabs

Posted on Aug 10 2014 | Edited on Mar 24 2015 | In ionic

Symbols count in article: 2.6k | Reading time ≈ 2 mins.

ion-tabs

Delegate：$ionicTabsDelegate

提供多tab切换的接口。

可以任意设置tabs class和animation class来定义效果。

单个的tab细节详见ionTab指示器

注意: 不要再ion-content添加ion-tabs，这样会造成css错误

用法

<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- Tab 1 content -->
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- Tab 2 content -->
  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- Tab 3 content -->
  </ion-tab>

</ion-tabs>

ion-tab

Child of ionTabs

包含了tab的content。content只有当指定的tab被选中时才出现。

每个ionTab都有自己的view history

用法

<ion-tab
  title="Tab!"
  icon="my-icon"
  href="#/tab/tab-link"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

更加完整的例子请看inoTabs

API

属性	类型	详细说明
title	string	tab的标题
href(可选)	string	The link that this tab will navigate to when tapped
icon(可选)	string	tab的图标，如果设置，则会变为icon-on和icon-off的默认图标
icon-on(可选)	string	选中时tab的图标
icon-off(可选)	string	未选中时tab的图标
badge(可选)	expression	tab上的徽章，通常为数字
badge-style(可选)	expression	tab上徽章的样式，tabs-positive等
on-select(可选)	expression	tab选中的回调函数
on-deselect(可选)	expression	tab取消选中时的回调
ng-click(可选)	expression	默认的，tab将会在click之后被选中。如果设置了ngClick，将不会被选中。你可以显示的通过`$ionicTabsDelegate.select()`切换

$ionicTabsDelegate

Delegate for controlling the ionTabs directive.

$ionicTabsDelegate服务中的函数控制所有的ionTabs指示器，通过$getByHandle获取具体的ionTabs实例。

用法

<body ng-controller="MyCtrl">
  <ion-tabs>

    <ion-tab title="Tab 1">
      Hello tab 1!
      <button ng-click="selectTabWithIndex(1)">Select tab 2!</button>
    </ion-tab>
    <ion-tab title="Tab 2">Hello tab 2!</ion-tab>

  </ion-tabs>
</body>

function MyCtrl($scope, $ionicTabsDelegate) {
  $scope.selectTabWithIndex = function(index) {
    $ionicTabsDelegate.select(index);
  }
}

方法

`select(index, [shouldChangeHistory])`

通过给定的index选中tab

参数名	类型	详细信息
index	number	选中tab的缩影
shouldChangeHistory(可选)	boolean	是否此次选中载入指定tab的历史，或者仅仅载入默认的页面。默认为false。提示：如果tab中有ionNavView，这个很可能为true

`selectedIndex`

返回：number,选中tab的索引，没有则为-1

`$getByHandle(handle)`

参数名	类型	详细信息
handle	string

返回:delegateInstanceReturns: A delegate instance that controls only the ionTabs directives with delegate-handle matching the given handle.

示例: $ionicTabsDelegate.$getByHandle(‘my-handle’).select(0);

Large Request-URI-Too-Large

Posted on Jul 24 2014 | Edited on May 5 2018 | In nginx

Symbols count in article: 1.3k | Reading time ≈ 1 mins.

客户端请求头缓冲区大小，如果请求头总长度大于小于128k，则使用此缓冲区，
请求头总长度大于128k时使用large_client_header_buffers设置的缓存区
client_header_buffer_size 128k;

large_client_header_buffers 指令参数4为个数，128k为大小，默认是8k。申请4个128k。
large_client_header_buffers 4 128k;

当http 的URI太长或者request header过大时会报414 Request URI too large或400 bad request错误。

可能原因:

cookie中写入的值太大造成的，因为header中的其他参数的size一般比较固定，只有cookie可能被写入较大的数据
请求参数太长，比如发布一个文章正文，用urlencode后，使用get方式传到后台。

GET http://www.264.cn/ HTTP/1.1
Host: www.264.cn
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8
Accept-Charset: GBK,utf-8;q=0.7,*;q=0.3
Cookie: bdshare_firstime=1363517175366; 
If-Modified-Since: Mon, 13 May 2013 13:40:02 GMT

当请求头过大时，超过large_client_header_buffer时，nginx可能返回”Request URI too large” (414)或者”Bad-request”(400)错误,

如上例HTTP请求头由多行构成，其中”GET http://www.264.cn/ HTTP/1.1”表示Request line

当Request line的长度大于large_client_header_buffer的一个buffer(128k)时，nginx会返回”Request URI too large” (414)错误，对应上面的场景2。

请求投中最长的一行也要小于large_client_header_buffer，当不是Request line的最长行大于一个buffer(128k)时，会返回”Bad-request”(400)错误，对应上面的场景1。

解决办法：这时可以调大上述两个值。

在http节点处添加

client_header_buffer_size 512k;
large_client_header_buffers 4 512k;

statejs

Posted on Jul 24 2014 | Edited on May 5 2018

Symbols count in article: 7.1k | Reading time ≈ 6 mins.

States

State 的实例封装了owner在指定时刻下的条件和行为。一个State是由methods, arbitrary data, events, guards, substates和 transition expressions的集合组成。
一个owner通常拥有多个States, 并且指向其中一个作为 current state, 在current state中owner会表现出相应的方法和行为。通过行为来触发 transition使得由一个状态转变为另外一个状态。

Object model

State objects are modeled by a set of relational references that define three distinct dimensions or “axes”.状态对象是由一组定义三个不同的维度或“轴”关系的参考蓝本。
从根本上来说，State 模型是分层次的，从 owner 拥有着唯一的root state开始，每个state都作为 superstate被 substates 继承。一个 State 可能从零个或者多个 parastates继承，提供了定义成分的关系，通过C3线性多重继承实现的一种手段。
如果owner的state树是由其他owner的prototypal继承而来，继承的owner将可以view their prototype’s States as protostates from which their own epistates inherit.

var p = {};
state(p, {
    A: state,
    B: state({
        BA: state,
        BB: state
    })
});

var o = Object.create(p);
state(o, {
    A: state({
        AA: state.extend('X, Y')
    }),
    X: state,
    Y: state
});

State S 的继承顺序如下 relation precedence:
1.S的protostate继承链
2.S的parastates，按照声明的先后顺序
3.S的superstate
其中parastate和superstate线性加载，或者并行，protostate则按照顺序加载

The root state

所有被 State 影响的 owner 都有单独的 root state。root state的名称为唯一的空字符串 ‘’.

1
2
3

owner.state().root === owner.state('');   // >>> true (invariant)
owner.state('->');
owner.state();                            // >>> State ''

默认的，owner的初始current state被设置为 root state — 除非 root state 被标记为 abstract attribute，或者另外一个 State 被标记为 initial attribute.
root state 还可以用来存储 methods 并且可以被owner的 States重写。这些方法被替换至root state。如果没有被重写，则会调用默认的方法。

Superstates and substates

owner 表现得行为由 substates 决定，这些substates 由 superstates 生成

var o = {};
state( o, {
    A: state({
        AA: state,
        AB: state
    }),
    B: state
});

var root = o.state('');                    // >>> RootState
o.state() === root;                        // >>> true
o.state('-> AA');
o.state() === o.state('AA');               // >>> true
o.state().superstate === o.state('A');     // >>> true
o.state().superstate.superstate === root;  // >>> true

Parastates and composition

除了通过 superstates 继承，State 模型还支持通过 parastate 关系实现多继承。
最孤单的就是RootState，它不承担任何关系。
Parastates 通过 state.extend 函数声明, 参数为一个或多个字符串 to parastates, along with optional parameters attributes and expression, and returns a StateExpression that can be used to produce a State with the named parastates.

var o = {};
state( o, {
    A: state({
        AA: state.extend('X, Y')
    }),
    X: state,
    Y: state
});

状态表达式(Expressions)

State 通过 state expression 数据结构以声明的方式定义。
StateExpression 通过调用不包含owner参数的 state() 函数创建，仅提供一个 expression 参数，还可以提供由空格分隔的 attributes参数。
在其内部，状态表达式的内容根据对象的 categories 设置，其中包含 data, methods, events, guards, substates 和 transitions。state() 的 expression可以根据这些 categories形成结构化，或者可以通过类型推断来简化实现一些更加简单的缩写。

结构化状态表达式(Structured state expressions)

以入门的例子为基础，我们可以写一个包含明确分类的expression，包含子状态、方法、事件等。

var longformExpression = state({
    methods: {
        greet: function () { return "Hello."; }
    },
    states: {
        Formal: {
            methods: {
                greet: function () { return "How do you do?"; }
            },
            events: {
                enter: function () { this.wearTux(); }
            }
        },
        Casual: {
            methods: {
                greet: function () { return "Hi!"; }
            },
            events: {
                enter: function () { this.wearJeans(); }
            }
        }
    }
});
// >>> StateExpression

简写(Shorthand)

明确的分类是很准确的，但是这样显得很冗余。所有 state() 同样接受更加简便的表达形式。效果同上面的一样。

var shorthandExpression = state({
    greet: function () { return "Hello."; },

    Formal: {
        enter: function () { this.wearTux(); },
        greet: function () { return "How do you do?"; }
    },
    Casual: {
        enter: function () { this.wearJeans(); },
        greet: function () { return "Hi!"; }
    }
});
// >>> StateExpression

在这个例子中，state() 根据以下规则解释：
识别缺乏键名的类别，推断 Formal 和 Casual 为状态 将 enter 识别为内置的事件类型，将关联的函数作为 enter 事件的监听器，别且在被所在的 state 触发。
*推断 greet 不是一个内置的事件类型，所以被认为是一个方法。
所有显示的定义可以通过简写来实现，但是要避免出现含糊不清的情况 (例如，创建一个名为 data 的状态，或者方法名叫做 enter。

表达式推断(Interpreting expression input)

提供给 state()的 StateExpression根据以下规则推断解释：
1.如果输入的值的类型为StateExpression或TransitionExpression并且推断如此，则使用输入的键名为它的名称，如果输入的值是state函数自身，则推断为名称为键名的空状态。
2.如果键名是类名，它的值是一个对象或null，那么它将被解释，因为它会在长期形成的结构化格式。
3.如果键名同 built-in event type 匹配，或者值是string，则推断值作为一个事件监听函数，, an array of event listeners, or a named transition target to be bound to that event type.
4.Otherwise, if an entry’s key matches a guard action (i.e., admit, release), interpret the value as a guard condition (or array of guard conditions).
5.Otherwise, if an entry’s value is an object, interpret it as a substate whose name is the entry’s key, or if the entry’s value is a function, interpret it as a method whose name is the entry’s key.

Transitions过渡

Whenever an object’s current state changes, a transition state is created, which temporarily assumes the role of the current state while the object is travelling from its origin or source state to its target state.
每当一个对象的当前状态的变化，会创建一个过渡状态，这暂时假定当前状态的角色，而对象从它的源状态变化到目标状态。

Transition expressions

A state expression may include any number of transition expressions, which define some action to be performed, either synchronously or asynchronously, along with selectors for the origin/source and target states to which the transition should apply, and guards to determine the appropriate transition to employ.
状态表达式可以包括任何数量的过渡表达式，它定义要执行的操作，同步或异步，以及选择的原产地/来源和目标状态的过渡应适用的，和警卫来确定合适的过渡聘请。
Before an object undergoes a state change, it examines the transition expressions available for the given origin and target, and selects one to be enacted. To test each expression, its origin state is validated against its admit transition guards, and its target state is validated against its release transition guards. The object then instantiates a Transition based on the first valid transition expression it encounters, or, if no transition expression is available, a generic actionless Transition.
对象经历一个状态的改变之前，它会检查过渡表达式对于源状态和目标状态是否可用，并选择一个制定。要测试每个表达式，它的起源状态进行验证针对其承认过渡卫士，并将其目标状态及其对过渡释放警卫进行了验证。该对象，然后实例化基于它遇到的第一个有效的过渡表达一个过渡，或者，如果没有过渡表达式是可用的，一个通用的无为过渡。
Where transition expressions should be situated in the state hierarchy is largely a matter of discretion. In determining the appropriate transition expression for a given origin–target pairing, the search proceeds, in order:
过渡表达式在状态层次的设置应该非常慎重。
1.at 过渡表达式的target状态(CSS3过渡是相对于类声明的方式)
2.at 过渡表达式的origin状态
progressively up the superstate chain of target
progressively up the superstate chain of origin
Transitions can therefore be organized in a variety of ways, but ambiguity resolution is regular and predictable, as demonstrated with the Zig transition in the example below:
过渡可以实现为不同的方式，但是这是有规律并且可预测的，如示例中Zig过渡

1
2