Yahoo! Mojito框架介绍

Yahoo! Mojito是Yahoo!开发的一套建立在YUI3上的Javascript MVC应用框架，作为Yahoo! Cocktails技术的一部分，开发者可以使用同样的代码和同样的框架来编写客户端和服务器的程序，因为Mojito应用程序是用javascript来编写，而javascript不仅可以在客户端运行，服务器端也可以在Nodejs环境下运行。

那么什么是Mojito呢？

Mojito应用程序是基于HTML5, CSS3, Javascript, Node.js, YUI3以及YQL，Nodejs不是Mojito的一个功能，但是Mojito作为一个Nodejs模块，充分利用了Nodejs的优点（如速度和可扩展性），同时Mojito也使用了npm包。YUI3是Mojito的骨干，开发者可以通过添加YUI模块的方式扩展Mojito的功能。

下图显示了Mojito的MVC架构以及为什么它可以运行在客户端和服务器端：

创建一个Mojito应用程序的示例如下：

1. 安装了NodeJs和npm的Unix环境下，安装Mojito

$ npm install mojito -g

2. 确保mojito已经被正确安装

$ mojito test

3. 创建一个mojito应用程序

$ mojito create app hello_world
$ cd hello_world
$ mojito create mojit myMojit (创建了一个mojit)

4. 修改你的应用程序，修改mojits/myMojit/controller.server.js为如下：

YUI.add('myMojit', function(Y) {
  Y.mojito.controller = {

      index: function(ac) {
          ac.done('Hello, world. I have created my first Mojito app at ' + (new Date()) + '.');
      }

  };
});

5. 运行你的应用程序

在hello_world目录下运行 $ mojito start，去http://localhost:8666/@myMojit/index下看你的结果，控制台通过Ctrl+C可以停止。

一个Mojito应用程序的目录结构如下：

[mojito_app]/
|-- application.json
|-- assets/
|   `-- favicon.icon
|-- autoload/
|   `-- *.{affinity}.js
|-- index.js
|-- mojits/
|   `-- [mojit_name]
|       |-- actions/
|       |   `-- *.{affinity}.js
|       |-- assets/
|       |-- autoload/
|       |   `-- *.{affinity}.js
|       |-- binders/
|       |   `-- {view_name}.js
|       |-- controller.{affinity}.js
|       |-- defaults.json
|       |-- definition.json
|       |-- lang/
|       |   `-- {mojit_name}_{lang}.js
|       |-- models/
|       |   `-- {model_name}.{affinity}.js
|       |-- tests/
|       |   |-- autoload/
|       |   |   `-- {module_name}.{affinity}-tests.js
|       |   |-- binders/
|       |   |   `-- {view_name}.client-tests.js
|       |   |-- controller.{affinity}-tests.js
|       |   `-- models/
|       |      `-- {model_name}.{affinity}-tests.js
|       `-- views/
|           `-- {view_name}.{view_engine}.html
             -- {view_name}.{device}.{view_engine}.html
|-- package.json
|-- routes.json
|-- server.js

在hello_world目录下有个routes.js，在Mojito里，route可以用来映射指定URL对应的mojit action，修改成：

[{
"settings": [ "master" ],
“index_route”: {
“verbs”: ["get"],
“path”: “/index”,
“call”: “@myMojit.index”
}
}]

再运行一次mojito start，http://localhost:8666/index就访问了你创建的这个mojit

这个例子里创建了一个”mojit” myMojit，”mojit“是一个Mojito应用程序内的独立单元，它既不是一个module也不是一个widget，它有一个MVC结构并且由两部分组成：定义和实例配置。一个应用程序可能会有很多mojit，最后都会在配置文件里进行设定。”mojit“的目录结构如下：

drwxr-xr-x assets (css, img, etc)
drwxr-xr-x binders (dom events)
-rw-r--r-- controller.server.js (logic)
-rw-r--r-- definition.json (configs)
drwxr-xr-x models (data source)
drwxr-xr-x tests (unit test)
drwxr-xr-x views (device specific markup)

在mojit里每个model和controller都有”affinity“的概念，表明这个文件运行在哪个runtime，如controller.{affinity}.js中{affinity}的值可以是server, client, common，如果是server的话只能运行在服务器端，如果是common和server都有的话，则server用在服务器端，common用于client端，如果只有common的话则server和client端都用这个文件。

在Mojito里有一个很重要的模块ActionContext，在controller的函数里可以访问框架的一些功能，如上面例子中的ac.done();用于发送数据到客户端，同样可以从model中获取数据，如ac.models.myMojitModelFoo.getData(); myMojitModelFoo在models/foo.server.js中定义。

views目录里的HTML文件是Mojito中的View层，被称作view模板，默认是采用Mustache的模板渲染引擎，命名规则是：
{action}.[device].{rendering_engine}.html
如view下的index.iphone.mu.html，表示当前运行的设备是iphone时这个view模板从controller的index函数获取数据。

binders目录下文件用来处理事件，仅仅用于部署到浏览器中，binder文件主要处理以下三个功能：对mojit的dom添加事件处理，和页面中其它的mojit进行通信，执行binder附加的一些动作。

Mojito在解决多终端的情况下能够保持”One language, Two Runtime”这种设计理念的确不错，不过使用起来确实有点复杂，目前已经被应用于Yahoo!的Search Direct, Livestand等产品，仍需要社区开发人员的不断参与才能完善和壮大。