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

随着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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容