Mojito项目中的Mojits组件开发指南

Mojito项目中的Mojits组件开发指南

什么是Mojits？

在Mojito框架中，Mojits是构成应用程序的基本单元和可复用组件。我们可以将Mojit理解为Web页面上的一个矩形区域，它封装了特定的功能和展示逻辑。Mojit这个词结合了"module"(模块)和"widget"(小部件)的概念，但它既不是纯粹的模块，也不是独立的小部件。

Mojit基于YUI模块构建，但提供了更高级别的抽象。每个Mojit都遵循MVC架构模式，包含控制器(Controller)、模型(Model)和视图(View)三个核心部分。

Mojit的核心概念

Mojit定义与实例

Mojit分为定义(Definition)和实例(Instance)两个层面：

1. Mojit定义：是Mojit的"类"或"蓝图"，包含完整的MVC结构和相关配置文件
2. Mojit实例：是根据定义创建的具体"对象"，可以在应用中多次实例化

目录结构

使用mojito create mojit命令创建的Mojit会生成以下标准目录结构：

MojitName/
├── assets/            # 静态资源
│   └── index.css
├── binders/           # 客户端绑定逻辑
│   └── index.js
├── controller.server.js # 服务器端控制器
├── defaults.json      # 默认配置
├── definition.json    # 定义配置
├── models/            # 数据模型
│   └── model.server.js
├── tests/             # 测试代码
│   ├── controller.server-tests.js
│   └── models/
│       └── model.server-tests.js
└── views/             # 视图模板
    └── index.hb.html

Mojit的MVC架构

控制器(Controller)

Mojit控制器是YUI模块，通过YUI.add注册。控制器方法接收一个特殊的ActionContext对象(简称ac)，它提供了框架的核心功能。

YUI.add('github', function(Y, NAME) {
  Y.namespace('mojito.controllers')[NAME] = {
    index: function(ac) {
      // 控制器逻辑
      ac.done({data: {status: "示例数据"}});
    }
  };
}, '0.0.1', {requires: ['mojito']});

模型(Model)

模型同样作为YUI模块实现，负责数据处理：

YUI.add('github-model', function(Y, NAME) {
  Y.namespace('mojito.models')[NAME] = {
    init: function(config) {
      this.config = config;
    },
    getData: function() {
      return {key: "value"};
    }
  };
}, '0.0.1', {requires: []});

视图(View)

Mojito默认使用Handlebars模板引擎。控制器通过ac.done()方法将数据传递给模板：

<!-- index.hb.html -->
<div id="{{mojit_view_id}}">
  <h1>{{title}}</h1>
  <p>{{content}}</p>
</div>

ActionContext对象及其插件

ActionContext(ac)是Mojito框架的核心对象，提供以下功能：

1. 基本功能：

   • 渲染模板(ac.done())
   • 传递数据到视图
   • 处理HTTP请求和响应

2. 常用插件：

   • mojito-config-addon：访问配置
   • mojito-models-addon：访问模型
   • mojito-assets-addon：管理静态资源

使用插件示例：

// 在requires数组中声明依赖
YUI.add('example', function(Y, NAME) {
  // 控制器代码
}, '0.0.1', {requires: ['mojito', 'mojito-config-addon']});

// 在控制器中使用
index: function(ac) {
  var title = ac.config.get('title');
  ac.done({title: title});
}

配置管理

Mojit有两类配置文件：

1. defaults.json：定义默认配置，可被实例覆盖

{
  "settings": ["master"],
  "config": {
    "api_url": "https://api.example.com"
  }
}

2. definition.json：定义Mojit的元数据和固定配置

{
  "settings": ["master"],
  "description": "GitHub信息展示组件"
}

路由与实例化

在application.json中配置Mojit实例：

{
  "specs": {
    "github": {
      "type": "Github",
      "config": {
        "title": "我的应用"
      }
    }
  }
}

在app.js中配置路由：

app.get('/', libmojito.dispatch('github.index'));
app.get('/about', libmojito.dispatch('github.about'));

开发实践指南

命名规范

1. Mojit定义：使用大驼峰式命名(如GitHubInfo)
2. Mojit实例：使用小写命名(如githubinfo)

开发流程

1. 创建Mojit定义

mojito create mojit GitHubInfo

2. 在application.json中配置实例
3. 实现MVC组件
4. 配置路由
5. 测试运行

调试技巧

• 使用默认路由测试Mojit：/@MojitName/action/
• 检查ac对象提供的各种方法
• 利用YUI的日志功能：Y.log('调试信息')

总结

Mojits作为Mojito框架的核心构建块，提供了一种结构化的方式来开发和复用UI组件。通过清晰的MVC分离、灵活的配置系统和强大的ActionContext对象，开发者可以高效地构建模块化的Web应用。理解Mojit定义与实例的区别、掌握配置管理和路由设置是使用Mojito框架的关键。