随着Meteor1.3 正式版的临近,我们再来回顾一下Mantra,并讲一下使用它的原因。Mantra是Meteor 1.3+React的一种应用架构规范,它包含了一系列的规范和约定,如果你遵循Mantra规范,那么你的应用将更加容易构建和扩展。
当我们最初看到Mantra的时候,会觉得它给Meteor应用增加了不少复杂度。为什么我们需要这么多额外的目录和文件呢?随着你认识的深入,你会逐渐意识到这些模块化组织结构的优势所在,它能让我们方便地了解应用的内部机制。同时,它也将让我们更方便地修改应用或者添加新的功能特性。
Mantra只要分为两大部分:模块(Modules)和组件(Components)。组件进一步分为容器组件(Container Components)和UI组件(UI Components)。我们来逐一看一下这些东西。
模块 - 模块构建了我们的应用主体部分。每个应用都应该有一个核心模块(Core Module),这个模块会处理应用的核心功能。如果只是一个小型应用的话,只需要一个核心模块即可。一旦我们的应用有多个主函数后,我们需要把它们拆分成不同模块。举个例子,一个
items
模块可以是TodoList应用的模块,所有与items相关的功能都会放到这个模块中。组件 - 组件是模块的独立部分。比方说,在
items
模块里面,我们可能会有ItemList
,NewItem
,Item
和EditItem
这几个组件。每个组件都有两部分构成:一个容器组件和一个UI组件。容器组件负责获取数据,通过props传入子组件来渲染UI组件。我们可以使用React-Komposer来使这个过程更简单。如何创建容器组件和UI组件可以参见这篇文章。
这些就是Mantra的基本构件,我们基于这些基本构件来创建应用。
另一个关于Mantra的重点,你一开始可能会困惑,就是所有的代码关系都通过imports和exports来构建,并且以单一入口的形式。所以我们创建模块、组件和动作(actions)后都要导出它们,然后导入到index.js
文件中,这些index.js
再被导入到main.js
中去。客户端和服务器端分别只有一个main.js
文件。它们是整个应用的真实入口。
下面,我们谈谈动作(actions)。动作是Mantra中应用逻辑书写的地方。动作位于模块里面,和组件并列。任何实际上交互的组件,除了仅仅渲染数据的组件外,都应有一个对应的动作。所以我们的EditItem
和NewItem
组件,都会有一个对应的动作来处理数据操作。这些动作会调用服务器端的Meteor方法。
我们来看一下mantra-sample-blog-app的目录结构:
.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── client
│ ├── configs
│ │ └── context.js
│ ├── main.js
│ └── modules
│ ├── comments
│ │ ├── actions
│ │ │ ├── comments.js
│ │ │ ├── index.js
│ │ │ └── tests
│ │ │ └── comments.js
│ │ ├── components
│ │ │ ├── comment_list.jsx
│ │ │ ├── create_comment.jsx
│ │ │ ├── style.css
│ │ │ └── tests
│ │ │ ├── comment_list.js
│ │ │ └── create_comment.js
│ │ ├── configs
│ │ │ └── method_stubs
│ │ │ ├── comments.js
│ │ │ └── index.js
│ │ ├── containers
│ │ │ ├── comment_list.js
│ │ │ ├── create_comment.js
│ │ │ └── tests
│ │ │ ├── comment_list.js
│ │ │ └── create_comment.js
│ │ └── index.js
│ └── core
│ ├── actions
│ │ ├── index.js
│ │ ├── posts.js
│ │ └── tests
│ │ └── posts.js
│ ├── components
│ │ ├── main_layout.jsx
│ │ ├── navigation.jsx
│ │ ├── newpost.jsx
│ │ ├── post.jsx
│ │ ├── postlist.jsx
│ │ ├── style.css
│ │ └── tests
│ │ ├── main_layout.js
│ │ ├── navigations.js
│ │ ├── newpost.js
│ │ ├── post.js
│ │ └── postlist.js
│ ├── configs
│ │ └── method_stubs
│ │ ├── index.js
│ │ └── posts.js
│ ├── containers
│ │ ├── newpost.js
│ │ ├── post.js
│ │ ├── postlist.js
│ │ └── tests
│ │ ├── newpost.js
│ │ ├── post.js
│ │ └── postlist.js
│ ├── index.js
│ └── routes.jsx
├── lib
│ └── collections.js
├── package.json
├── server
│ ├── configs
│ │ └── initial_adds.js
│ ├── main.js
│ ├── methods
│ │ ├── index.js
│ │ └── posts.js
│ └── publications
│ ├── index.js
│ └── posts.js
└── wallaby.js
更多信息,可以参见World of Mantra。