关于nodejs的MVC模型mojito简介
发布于 9 年前 作者 ringtail 4463 次浏览 最后一次编辑是 5 年前
这个东东是今年8月份楼主刚刚接触的东西,是Yahoo!开发的一套建立在YUI3上的Javascript MVC应用框架,作为Yahoo! Cocktails技术的一部分,开发者可以使用同样的代码和同样的框架来编写客户端和服务器的程序,因为Mojito应用程序是用javascript来编写,而javascript不仅可以在客户端运行,服务器端也可以在Nodejs环境下运行。

下面说点重点的,怎么用这个东东; 创建一个Mojito应用程序的示例如下:

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

$ npm install mojito -g

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

$ mojito test

  1. 创建一个mojito应用程序

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

  1. 修改你的应用程序,修改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()) + '.');
  }

}; });

  1. 运行你的应用程序

在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等产品,仍需要社区开发人员的不断参与才能完善和壮大。

(这东西是MVC框架的,楼主觉得这个模版的结构比ejs的清晰的多,比jade好用,开源哦亲。)

2 回复

这个要支持一下!

雅虎的东西貌似都很靠谱

回到顶部