HTML5系列技术培训

1、HTML5系列技术培训 PPT模板下载： 行业PPT模板： 节日PPT模板： PPT素材下载： PPT图表下载： 优秀PPT下载： PPT教程： Word教程： Excel教程： 资料下载： PPT课件下载： 范文下载： 试卷下载： 教案下载： 2345大纲 系系统结构统结构BlockBlock设计设计WidgetWidget设计设计技技术术点点1开发开发工具工具开发开发工具大纲WebStrom: 前端开发工具： Nodejs : 使用Nodejs 集成的NPM 命令安装JS插件,包管理和分发工具 Bower: 是一个针对Web开发的包管理器。 NPM主要运用于Node.js项目的内部依赖包管

2、理，安装的模块位于项目根目录下的node_modules文件夹内。而 Bower大部分情况下用于前端开发，对于CSS/JS/模板等内容进行依赖管理，依赖的下载目录结构可以自定义JSHint: 规范团队的JavaScript代码Vs2015: 后台业务逻辑开发 系统结构统结构 SPA MVC App (Backbone.js) CSS Framework (Bootstrap) Component support AMD (requirejs)URL Router (Web API)ASP.NET MVC Plug-in manage (Block Manage) Logic & Dat

3、a managePublic ServicesIn the future, may be IIS be replaced with nodejsBlock设计设计 Xml SettingsController libWeb filesBlock XmlService lib3rd party libBlock xml fileController libService libWeb filesWidget 设计 Mock data *.jsonTest JS File *.jsWidgetX_model.jsWidgetX_view.jsWidgetX.js (Controller)Langu

4、age filesImages/css/fontsController: integrate with widget define in one file. Handle life cycle & events of widget.Model: data definition of Widget, responsible for REST API Operation.Template: contain the html basic style for renderView: get data from model, use template and data to render UI.

5、Backbone 技术点Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESTful JSON接口连接到应用程序。Backbone将数据呈现为模型, 你可以创建模型、对模型进行验证和销毁，甚至将它保存到服务器。 当UI的变化引起模型属性改变时，模型会触发change事件； 所有显示模型数据的视图会接收到该事件的通知，继而视图重新渲染。 你无需查找DOM来搜索指定id的元素去手动更新HTML。 旦模型改变

6、了，视图便会自动变化。主要组成：主要组成：1.model：创建数据，进行数据验证，销毁或者保存到服务器上2.collection：可以增加元素，删除元素，获取长度，排序，比较等一系列工具方法3.view：绑定html模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等优势优势：1. 将数据和界面很好的分离开来。2. 将事件的绑定很好的剥离出来，便于管理和迭代。3. 使得Javascript程序的模块化更加清晰、明了。应用场景应用场景：最适合的应用场景是单页面应用，并且页面上有大量数据模型，模型之间需要进行复杂的信息沟通。lbackbone的模块Events : 事件驱

7、动方法Model : 数据模型Collection : 模型集合器Router : 路由器(hash)History : 开启历史管理Sync : 同步服务器方式View : 视图(含事件行为和渲染页面)中文地址：http:/ Marionette的核心价值在于: 模块化，事件驱动的架构提供特定的view类型，少view呈现的套路化代码用Application及附着在其上的模块实现模块化架构借助Region和Layout，在运行时组合应用的显示效果在可见区域内的嵌套式视图和布局内置的内存管理功能，可以杀死 views, regions 和 layouts 中的僵尸对象灵活, 用啥装啥 架构Ma

8、rionette的思想师承 Backbone，它提供的组件也是那种即可独立使用互不干扰，又可相互合作共同发力。但它没像Backbone那样停留在结构化的组件上，在应用层面上提供了很多组件(component)和构件(building block)。其核心组件包括：而是Marionette.ApplicationMarionette.Application: 可以用它创建一个通过initializers启动应用的 application 对象，不过不光如此，它还有很多能力Marionette.Application.moduleMarionette.Application.module: 用来在

9、应用内创建模块和子模块Marionette.AppRouterMarionette.AppRouter: 路由定义就应该只是配置Marionette.ViewMarionette.View: 让其它Marionette views扩展的基本View类型Marionette.ItemViewMarionette.ItemView: 用来显示一条数据项的viewMarionette.CollectionViewMarionette.CollectionView: 用来遍历集合，显示每个模型对应的ItemView实例Marionette.CompositeViewMarionette.Composi

10、teView: collection view 和 item view的组合, 用来显示 分支/组合 模型的层级数据Marionette.RegionMarionette.Region: 管理应用中的可见区域，包括内容的显示和移除。Marionette.LayoutMarionette.Layout: 用来画布局的view，还会创建区域管理器来管理其内部的regions。Marionette.EventBinderMarionette.EventBinder: 事件绑定管理器，实现事件的绑定和unbindingMarionette.RendererMarionette.Renderer: 以一

11、致和通用的方式来渲染带或不带数据的模板MarionetteRequireJS是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。它的模块管理遵守AMD规范（Asynchronous Module Definition）。RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载RequireJSNVD3 图表控件HTML5学习指导HTML：http:/ 了解HTML5中新增加的一些标签和特性CSS ：基础知识(http:/ Bootstrap样式框架（页面布局、常用控件样式) (http:/ (http:/ Jquery (熟练掌握DOM操作) (http:/ R