html5-img
1 / 15

Programming on

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 [OPTIONS] js jquery/generate/controller App.Controllers.Name [OPTIONS]

juro
Télécharger la présentation

Programming on

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programming on 孟宁 2011年4月

  2. 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 [OPTIONS] • 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

  3. Folder Structure

  4. C语言的编程模式 外部函数库/模块 内部函数库/模块 程序执行起点

  5. JavascriptMVC编程模式 外部函数库/模块 内部函数库/模块 程序执行起点

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

  7. Controller的函数和事件处理 • 实例化类时先执行setup，后执行init，他们都属于构造函数 • 自动绑定事件

  8. 事件汇总 标签/局部级事件 窗口/文档级事件

  9. Models & Fixtures • Models wrap an application's data layer. • Fixtures提供模拟服务器返回的数据（Dummy content）

  10. Controller与Model协作方式

  11. Controller与View协作方式 $.View('//ump/views/contentbrowser/list',{contentbrowsers: contentbrowsers}); <%for(var i = 0; i < contentbrowsers.length ; i++) {%> <tr <%= contentbrowsers[i]%>> <%= $.View('//ump/views/contentbrowser/show',contentbrowsers[i])%> </tr> <%}%> list.ejs <%for(var attribute in this.Class.attributes) {%> <%if(attribute == 'id') continue;%> <td class='<%= attribute%>'> <%=this[attribute]%> </td> <%}%> show.ejs

  12. 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.

  13. Production Builds • >js myapp/scripts/build.js • 类似于C语言中的编译链接，结果如下： • xxx.html • production.css • production.js

  14. 谢谢大家 Q&A

More Related