|
15 | 15 | </head> |
16 | 16 |
|
17 | 17 | <body> |
18 | | - <div id="root"><div data-reactroot=""><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="./"><i class="icon fa fa-graduation-cap" aria-hidden="true"></i><span class="name">Mota</span></a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><form class="navbar-form navbar-left"><div class="form-group search"><span class="separator"></span><input type="text" class="form-control" placeholder="Search by keyword ..." value=""/></div></form><ul class="nav navbar-nav navbar-right"><li><a href="//houfeng.net/mota/">文档</a></li><li><a href="//github.com/Houfeng/mota">GitHub</a></li><li><a href="//houfeng.net/dn-template-mota/example/">示例</a></li><li class="dropdown locales"><a class="dropdown-toggle" data-toggle="dropdown" role="button">中文<!-- --> <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="guide/quick.html">中文</a></li></ul></li></ul></div></div></nav><div class="container"><div class="panel panel-default"><div class="panel-body"><div class="row"><div class="col-md-3 col-side"><div class="catalog"><ul class="group"><li class="group-item"><a><i class="fa fa-bookmark" aria-hidden="true"></i>使用指南</a><ul class="doc"><li class="doc-item"><a class="active" href="zh/guide/quick.html">快速开始</a></li><li class="doc-item"><a class="" href="zh/guide/model.html">编写业务模型</a></li><li class="doc-item"><a class="" href="zh/guide/mapping.html">属性映射</a></li><li class="doc-item"><a class="" href="zh/guide/autorun.html">自执行函数</a></li><li class="doc-item"><a class="" href="zh/guide/watch.html">监听模型变化</a></li><li class="doc-item"><a class="" href="zh/guide/binding.html">数据绑定</a></li><li class="doc-item"><a class="" href="zh/guide/use_model.html">使用 Hook API</a></li><li class="doc-item"><a class="" href="zh/guide/hook_model.html">面向 Hook 的模型</a></li><li class="doc-item"><a class="" href="zh/guide/typescript.html">在 TS 中使用</a></li></ul></li></ul></div></div><div class="col-md-9 col-main"><div class="article markdown-body"><h1 id="%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B">快速开始</h1> |
19 | | -<h2 id="%E7%AE%80%E8%BF%B0">简述</h2> |
20 | | -<p>React 是一个「视图层」的 UI 框架，以常见的 MVC 来讲 React 仅是 View，而我们在编写应用时，通常还需要关注更加重要的 model，对于 React 来讲，我们常常需要一个「状态管理」库。然而，目前大多数针对 React 的状态管理库都是「强依赖」过多的侵入本应该独立的业务模型中，导致「业务逻辑」对应的代码并不能轻易在其它地方重用，往往这些框架还具有「强排它性」，但是「业务模型」应该是没有过多依赖，应该是无关框架的，它应该随时可以被用在任何合适的 JavaScript 环境中，使用 mota 你可以用原生的普通的 JavaScript 代码编写你的「业务模型」，并让你的「业务模型」在不同框架、不同运行环境下重用更为容易。</p> |
21 | | -<p>Mota 是一个响应式的 React 应用状态管理库，基于 Mota 你可以用单纯无依赖的 JavaScript 为应用编写「业务模型」，并轻易的将「业务模型」关联到 React 应用中。</p> |
22 | | -<h2 id="%E7%A4%BA%E4%BE%8B">示例</h2> |
23 | | -<p><a href="http://houfeng.net/dn-template-mota/example/">在线 TodoList 示例</a> |
24 | | -(<a href="https://github.com/Houfeng/dn-template-mota">示例源码</a>)</p> |
25 | | -<h2 id="%E5%AE%89%E8%A3%85">安装</h2> |
26 | | -<p>通过 npm 安装，如下</p> |
27 | | -<pre><code class="language-sh">$ npm i mota --save |
28 | | -</code></pre> |
29 | | -<p>或通过 <code>dawn</code> 脚手脚加创建工程，如下</p> |
30 | | -<pre><code class="language-sh">$ mkdir your_path |
31 | | -$ cd your_path |
32 | | -$ dn init -t mota |
33 | | -$ dn dev |
34 | | -</code></pre> |
35 | | -<p>需要先安装 dawn（<a href="https://alibaba.github.io/dawn/docs/">Dawn 安装及使用文档</a>）</p> |
36 | | -<h2 id="%E7%BB%93%E6%9E%84">结构</h2> |
37 | | -<p>一个 <code>mota</code> 工程的通常结构如下</p> |
38 | | -<pre><code class="language-sh">. |
39 | | -├── README.md |
40 | | -├── package.json |
41 | | -└── src |
42 | | - ├── assets |
43 | | - │ ├── common.less |
44 | | - │ ├── favicon.ico |
45 | | - │ └── index.html |
46 | | - ├── components |
47 | | - │ ├── todoApp.js |
48 | | - │ └── todoItem.js |
49 | | - ├── index.js |
50 | | - └── models |
51 | | - ├── TodoItem.js |
52 | | - ├── TodoList.js |
53 | | - └── index.js |
54 | | -</code></pre> |
55 | | -<h2 id="%E6%96%87%E6%A1%A3">文档</h2> |
56 | | -<ul> |
57 | | -<li><a href="http://houfeng.net/mota/#!/zh/guide/quick">快速开始</a></li> |
58 | | -<li><a href="http://houfeng.net/mota/#!/zh/guide/model">编写业务模型</a></li> |
59 | | -<li><a href="http://houfeng.net/mota/#!/zh/guide/mapping">将组件属性映射到模型</a></li> |
60 | | -<li><a href="http://houfeng.net/mota/#!/zh/guide/autorun">自执行函数</a></li> |
61 | | -<li><a href="http://houfeng.net/mota/#!/zh/guide/watch">监听模型变化</a></li> |
62 | | -<li><a href="http://houfeng.net/mota/#!/zh/guide/binding">将模型数据与表单绑定</a></li> |
63 | | -</ul> |
64 | | -<h2 id="%E9%93%BE%E6%8E%A5">链接</h2> |
65 | | -<ul> |
66 | | -<li><a href="https://github.com/Houfeng/mota/releases">版本发布日志</a></li> |
67 | | -<li><a href="https://tldrlegal.com/license/mit-license">MIT 开源协议</a></li> |
68 | | -</ul> |
69 | | -</div></div></div></div></div></div><footer class="footer">Powered By <!-- -->doczilla<!-- --> v<!-- -->3.2.4</footer></div></div> |
| 18 | + <div id="root"></div> |
70 | 19 | <script src="./data.js"></script> |
71 | 20 | <script src="./assets/index.js"></script> |
72 | 21 | <script src="./plugins/doczilla-highlight/index.js"></script></body> |
|
0 commit comments