1 / 15

JavaScript MVC

JavaScript MVC. Guixue. Contents. JSMVC 简介. StealJS. jQueryMX. FuncUnit & DocumentJS. 示例. What is JSMVC?. 使用 MVC 设计模式模块化组织 JavaScript 代码的框架 组件 StealJS 压缩与构建工具 FuncUnit 测试框架 jQueryMX jQuery 扩展功能 ( 插件 ) DocumentJS 与 JSDoc 兼容的文档工具. JSMVC Source Layout. appname – 您的应用程序

alyssa
Download Presentation

JavaScript MVC

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. JavaScript MVC Guixue

  2. Contents JSMVC简介 StealJS jQueryMX FuncUnit & DocumentJS 示例 Company Logo

  3. What is JSMVC? • 使用MVC设计模式模块化组织JavaScript代码的框架 • 组件 • StealJS 压缩与构建工具 • FuncUnit 测试框架 • jQueryMX jQuery扩展功能(插件) • DocumentJS 与JSDoc兼容的文档工具 Company Logo

  4. JSMVC Source Layout • appname – 您的应用程序 • \controllers - 事件处理 • \models - 已管理的数据 • \resources - helper scripts • \test - 测试文件 • \funcunit - funcunit测试用例 • \qunit - qunit用例 • \views - html模板 • documentjs - 文档引擎 • funcunit – 测试工具 • jQuery – jQuery 与 plugins (like $.Controller) • Steal – 加载、压缩与编译工具 Company Logo

  5. Steal JS • 依赖性加载 • steal/steal.js • JS&CSS关联与压缩 • js steal/buildjs mypage.html • 日志 • steal.dev.log('something is happening') • 代码生成 • js steal/generate/app cookbook • 包管理 • js steal/getjs http://github.com/jupiterjs/mxui/ • 代码清理 • js steal/clean path/to/page.html Company Logo

  6. Steal loader JS CSS等资源依赖性加载工具： • 各种类型 • 只载一次 • 关联加载 Company Logo

  7. Steal loader step • 使用步骤 • 加载 steal.js • <script src='../public/steal/steal.js?myapp/myapp.js'> • steal.options.startFile = 'myapp/myapp.js' • 加载 myapp.js. • 加载其他脚本 • 编译app • Switching to the production build Company Logo

  8. JSMVC jQueryMX JSMVC 的核心，包含jQuery及其插件 • Class 提供OOP的基础 • MVC 框架 • Model • Controller • View Company Logo

  9. jQueryMX Class • Class库的功能： • 静态继承 • 命名空间 • 自省 • fullName（带命名空间） • shortName • Setup与Init方法 • 易创建的回调函数 • Ref翻译： • http://blog.csdn.net/oncoding/archive/2011/03/10/6235725.aspx Company Logo

  10. Static Vs Prototype • 静态（Static）Vs 原型（Prototype） • 静态 属于 类 • 原型 属于 实例 • E.g. Company Logo

  11. Class.extend • $.Class.extend(param1,param2,param3); • Param1： 类名 • Param2 ： Static域 • Param3 ： Prototype域 • E.g. $.Class.extend(‘NameSpace.MyClass', /* @static */ { ... }, /* @prototype */ { ... }); Company Logo

  12. jQueryMX MVC • Model • 数据层 • 例如：Json数据,Ajax/本地访问 • View • 显示层：数据对用户的表现形式 • 例如：HTML + Template • Controller • 控制层：用户交互采取的行为动作 • 例如：Event ,绑定Data到Dom Company Logo

  13. jQueryMX MVC Controller Model View 一个jQuery widget生成器 一种封装、组织Ajax请求和web服务数据的方式 客户端的Html以及模板引擎 Company Logo

  14. Add Your Title ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc. 开发流程 Add Your Title ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc. Add Your Title ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc. Company Logo

  15. Thank You !

More Related