Meteor1.3七日谈 — Mantra核心简介

字数 848阅读 678

随着Meteor1.3 正式版的临近,我们再来回顾一下Mantra,并讲一下使用它的原因。Mantra是Meteor 1.3+React的一种应用架构规范,它包含了一系列的规范和约定,如果你遵循Mantra规范,那么你的应用将更加容易构建和扩展。

当我们最初看到Mantra的时候,会觉得它给Meteor应用增加了不少复杂度。为什么我们需要这么多额外的目录和文件呢?随着你认识的深入,你会逐渐意识到这些模块化组织结构的优势所在,它能让我们方便地了解应用的内部机制。同时,它也将让我们更方便地修改应用或者添加新的功能特性。

Mantra只要分为两大部分:模块(Modules)和组件(Components)。组件进一步分为容器组件(Container Components)和UI组件(UI Components)。我们来逐一看一下这些东西。

  1. 模块 - 模块构建了我们的应用主体部分。每个应用都应该有一个核心模块(Core Module),这个模块会处理应用的核心功能。如果只是一个小型应用的话,只需要一个核心模块即可。一旦我们的应用有多个主函数后,我们需要把它们拆分成不同模块。举个例子,一个items模块可以是TodoList应用的模块,所有与items相关的功能都会放到这个模块中。

  2. 组件 - 组件是模块的独立部分。比方说,在items模块里面,我们可能会有ItemListNewItemItemEditItem这几个组件。每个组件都有两部分构成:一个容器组件和一个UI组件。容器组件负责获取数据,通过props传入子组件来渲染UI组件。我们可以使用React-Komposer来使这个过程更简单。如何创建容器组件和UI组件可以参见这篇文章

这些就是Mantra的基本构件,我们基于这些基本构件来创建应用。

另一个关于Mantra的重点,你一开始可能会困惑,就是所有的代码关系都通过imports和exports来构建,并且以单一入口的形式。所以我们创建模块、组件和动作(actions)后都要导出它们,然后导入到index.js文件中,这些index.js再被导入到main.js中去。客户端和服务器端分别只有一个main.js文件。它们是整个应用的真实入口。

下面,我们谈谈动作(actions)。动作是Mantra中应用逻辑书写的地方。动作位于模块里面,和组件并列。任何实际上交互的组件,除了仅仅渲染数据的组件外,都应有一个对应的动作。所以我们的EditItemNewItem组件,都会有一个对应的动作来处理数据操作。这些动作会调用服务器端的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

推荐阅读更多精彩内容