Programming on

孟宁

2011 年 4 月

Quick Start

♦ 安装 JRE 1.6 ，下载 JavascriptMVC 3.0.5-http://javascriptmvc.com/

♦ >js jquery/generate/app path/to/app [OPTIONS]♦ >js jquery/generate/scaffold App.Models.ModelName [O

PTIONS]– js jquery/generate/controller App.Controllers.Name [OPTIONS]– js jquery/generate/model App.Models.Name [TYPE] [OPTIONS]– js jquery/generate/model path/to/app path/to/page.html

♦ >js jquery/generate/plugin path/to/plugin [OPTIONS]♦ >js path/to/app/scripts/build.js♦ 具体操作命令范例参考： http://teampal.ustcsz.edu.cn/

projects/mengning/wiki/JavascriptMVC

Folder Structure

C 语言的编程模式

外部函数库 / 模块

内部函数库 / 模块

程序执行起点

JavascriptMVC 编程模式

外部函数库 / 模块

内部函数库 / 模块

程序执行起点

Controller & Model

Static 部分被类的所有实例共享，而 Prototype 部分属于每个实例私有的。

Controller 的函数和事件处理

♦ 实例化类时先执行 setup ，后执行 init ，他们都属于构造函数

♦ 自动绑定事件

事件汇总

窗口 / 文档级事件

标签 / 局部级事件

Models & Fixtures

♦ Models wrap an application's data layer.♦ Fixtures 提供模拟服务器返回的数据（ Du

mmy content ）

Controller 与 Model 协作方式

Controller 与 View 协作方式

<%for(var i = 0; i < contentbrowsers.length ; i++){%> <tr <%= contentbrowsers[i]%>> <%= $.View('//ump/views/contentbrowser/show',contentbrowsers[i])%> </tr><%}%>

$.View('//ump/views/contentbrowser/list',{contentbrowsers: contentbrowsers});

<%for(var attribute in this.Class.attributes){%>

</td><%}%>

<%=this[attribute]%>

<td class='<%= attribute%>'><%if(attribute == 'id') continue;%>

list.ejs

show.ejs

Plugins

♦ Everything is a plugin.– steal.plugins('jquery/model',– 'jquery/view',– 'jquery/controller',– 'yours/plugin');

♦ P.S. steal.plugins('a/b') adds a/b/b.js to your project.

Production Builds

♦ >js myapp/scripts/build.js

♦ 类似于 C 语言中的编译链接，结果如下：– xxx.html– production.css– production.js

谢谢大家 Q&A