HTML5系列技術(shù)培訓(xùn)

1、HTML5系列技術(shù)培訓(xùn) PPT模板下載： 行業(yè)PPT模板： 節(jié)日PPT模板： PPT素材下載： PPT圖表下載： 優(yōu)秀PPT下載： PPT教程： Word教程： Excel教程： 資料下載： PPT課件下載： 范文下載： 試卷下載： 教案下載： 2345大綱 系系統(tǒng)結(jié)構(gòu)統(tǒng)結(jié)構(gòu)BlockBlock設(shè)計(jì)設(shè)計(jì)WidgetWidget設(shè)計(jì)設(shè)計(jì)技技術(shù)術(shù)點(diǎn)點(diǎn)1開(kāi)發(fā)開(kāi)發(fā)工具工具開(kāi)發(fā)開(kāi)發(fā)工具大綱WebStrom: 前端開(kāi)發(fā)工具： Nodejs : 使用Nodejs 集成的NPM 命令安裝JS插件,包管理和分發(fā)工具 Bower: 是一個(gè)針對(duì)Web開(kāi)發(fā)的包管理器。 NPM主要運(yùn)用于Node.js項(xiàng)目的內(nèi)部依賴(lài)包管

2、理，安裝的模塊位于項(xiàng)目根目錄下的node_modules文件夾內(nèi)。而 Bower大部分情況下用于前端開(kāi)發(fā)，對(duì)于CSS/JS/模板等內(nèi)容進(jìn)行依賴(lài)管理，依賴(lài)的下載目錄結(jié)構(gòu)可以自定義JSHint: 規(guī)范團(tuán)隊(duì)的JavaScript代碼Vs2015: 后臺(tái)業(yè)務(wù)邏輯開(kāi)發(fā) 系統(tǒng)結(jié)構(gòu)統(tǒng)結(jié)構(gòu) 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設(shè)計(jì)設(shè)計(jì) Xml SettingsController libWeb filesBlock XmlService lib3rd party libBlock xml fileController libService libWeb filesWidget 設(shè)計(jì) 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 技術(shù)點(diǎn)Backbone 為復(fù)雜Javascript應(yīng)用程序提供模型(models)、集合(collections)、視圖(views)的結(jié)構(gòu)。其中模型用于綁定鍵值數(shù)據(jù)和自定義事件；集合附有可枚舉函數(shù)的豐富API； 視圖可以聲明事件處理函數(shù)，并通過(guò)RESTful JSON接口連接到應(yīng)用程序。Backbone將數(shù)據(jù)呈現(xiàn)為模型, 你可以創(chuàng)建模型、對(duì)模型進(jìn)行驗(yàn)證和銷(xiāo)毀，甚至將它保存到服務(wù)器。 當(dāng)UI的變化引起模型屬性改變時(shí)，模型會(huì)觸發(fā)change事件； 所有顯示模型數(shù)據(jù)的視圖會(huì)接收到該事件的通知，繼而視圖重新渲染。 你無(wú)需查找DOM來(lái)搜索指定id的元素去手動(dòng)更新HTML。 旦模型改變

6、了，視圖便會(huì)自動(dòng)變化。主要組成：主要組成：1.model：創(chuàng)建數(shù)據(jù)，進(jìn)行數(shù)據(jù)驗(yàn)證，銷(xiāo)毀或者保存到服務(wù)器上2.collection：可以增加元素，刪除元素，獲取長(zhǎng)度，排序，比較等一系列工具方法3.view：綁定html模板，綁定界面元素的事件，初始的渲染，模型值改變后的重新渲染和界面元素的銷(xiāo)毀等優(yōu)勢(shì)優(yōu)勢(shì)：1. 將數(shù)據(jù)和界面很好的分離開(kāi)來(lái)。2. 將事件的綁定很好的剝離出來(lái)，便于管理和迭代。3. 使得Javascript程序的模塊化更加清晰、明了。應(yīng)用場(chǎng)景應(yīng)用場(chǎng)景：最適合的應(yīng)用場(chǎng)景是單頁(yè)面應(yīng)用，并且頁(yè)面上有大量數(shù)據(jù)模型，模型之間需要進(jìn)行復(fù)雜的信息溝通。lbackbone的模塊Events : 事件驅(qū)

7、動(dòng)方法Model : 數(shù)據(jù)模型Collection : 模型集合器Router : 路由器(hash)History : 開(kāi)啟歷史管理Sync : 同步服務(wù)器方式View : 視圖(含事件行為和渲染頁(yè)面)中文地址：http:/ Marionette的核心價(jià)值在于: 模塊化，事件驅(qū)動(dòng)的架構(gòu)提供特定的view類(lèi)型，少view呈現(xiàn)的套路化代碼用Application及附著在其上的模塊實(shí)現(xiàn)模塊化架構(gòu)借助Region和Layout，在運(yùn)行時(shí)組合應(yīng)用的顯示效果在可見(jiàn)區(qū)域內(nèi)的嵌套式視圖和布局內(nèi)置的內(nèi)存管理功能，可以殺死 views, regions 和 layouts 中的僵尸對(duì)象靈活, 用啥裝啥 架構(gòu)Ma

8、rionette的思想師承 Backbone，它提供的組件也是那種即可獨(dú)立使用互不干擾，又可相互合作共同發(fā)力。但它沒(méi)像Backbone那樣停留在結(jié)構(gòu)化的組件上，在應(yīng)用層面上提供了很多組件(component)和構(gòu)件(building block)。其核心組件包括：而是Marionette.ApplicationMarionette.Application: 可以用它創(chuàng)建一個(gè)通過(guò)initializers啟動(dòng)應(yīng)用的 application 對(duì)象，不過(guò)不光如此，它還有很多能力Marionette.Application.moduleMarionette.Application.module: 用來(lái)在

9、應(yīng)用內(nèi)創(chuàng)建模塊和子模塊Marionette.AppRouterMarionette.AppRouter: 路由定義就應(yīng)該只是配置Marionette.ViewMarionette.View: 讓其它Marionette views擴(kuò)展的基本View類(lèi)型Marionette.ItemViewMarionette.ItemView: 用來(lái)顯示一條數(shù)據(jù)項(xiàng)的viewMarionette.CollectionViewMarionette.CollectionView: 用來(lái)遍歷集合，顯示每個(gè)模型對(duì)應(yīng)的ItemView實(shí)例Marionette.CompositeViewMarionette.Composi

10、teView: collection view 和 item view的組合, 用來(lái)顯示 分支/組合 模型的層級(jí)數(shù)據(jù)Marionette.RegionMarionette.Region: 管理應(yīng)用中的可見(jiàn)區(qū)域，包括內(nèi)容的顯示和移除。Marionette.LayoutMarionette.Layout: 用來(lái)畫(huà)布局的view，還會(huì)創(chuàng)建區(qū)域管理器來(lái)管理其內(nèi)部的regions。Marionette.EventBinderMarionette.EventBinder: 事件綁定管理器，實(shí)現(xiàn)事件的綁定和unbindingMarionette.RendererMarionette.Renderer: 以一

11、致和通用的方式來(lái)渲染帶或不帶數(shù)據(jù)的模板MarionetteRequireJS是一個(gè)工具庫(kù)，主要用于客戶端的模塊管理。它可以讓客戶端的代碼分成一個(gè)個(gè)模塊，實(shí)現(xiàn)異步或動(dòng)態(tài)加載，從而提高代碼的性能和可維護(hù)性。它的模塊管理遵守AMD規(guī)范（Asynchronous Module Definition）。RequireJS的基本思想是，通過(guò)define方法，將代碼定義為模塊；通過(guò)require方法，實(shí)現(xiàn)代碼的模塊加載RequireJSNVD3 圖表控件HTML5學(xué)習(xí)指導(dǎo)HTML：http:/ 了解HTML5中新增加的一些標(biāo)簽和特性CSS ：基礎(chǔ)知識(shí)(http:/ Bootstrap樣式框架（頁(yè)面布局、常用控件樣式) (http:/ (http:/ Jquery (熟練掌握DOM操作) (http:/ R