現代Web開發(fā)與應用課件 第五章-Web前端框架_第1頁
現代Web開發(fā)與應用課件 第五章-Web前端框架_第2頁
現代Web開發(fā)與應用課件 第五章-Web前端框架_第3頁
現代Web開發(fā)與應用課件 第五章-Web前端框架_第4頁
現代Web開發(fā)與應用課件 第五章-Web前端框架_第5頁
已閱讀5頁,還剩72頁未讀 繼續(xù)免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

Web前端框架現代Web開發(fā)與應用Web前端框架概述前端框架主要類型MVVM前框框架UI框架工具庫框架移動Web

MVVM框架前端MV*框架

AngularJS,AngularReactvueBackbone.jsEmber.jsKnockoutJS

MVVM框架Angular由Google維護的一個成熟、功能完備的前端框架一個基于組件的框架,用于構建可伸縮的Web應用一組庫,涵蓋各種功能,包括路由、表單管理、客戶端-服務器通信等

依賴注入以HTML的擴展版本為基礎實現模板由@angular/router提供路由功能利用@angular/http實現Ajax請求利用@angular/forms創(chuàng)建表單CSS組件化XSS防御單元測試組件Angular文檔:/MVVM框架Angular

英雄實例指南:/tutorialMVVM框架Angular默認使用TypeScriptJavaScript的一個超集,擴展了JavaScript的語法。提供了可選的靜態(tài)類型和基于類的面向對象編程。在靜態(tài)類型的編程語言中,使用接口來定義子系統之間的界限。JavaScript缺少接口這一概念。靜態(tài)代碼分析器;智能IDE支持。Angular支持ES5,ES6和Dart。

MVVM框架Angular組件(Component)Angular應用的基礎和核心,是一個模板的控制類用于處理應用和邏輯頁面的視圖部分。包含三個部分:帶有@Component()裝飾器的JavaScript\TypeScript類HTML模板樣式文件

MVVM框架Angular組件(Component)每個組件可以定義自己的輸入、輸出屬性,這些屬性成為了組件對外的接口,負責與上下游的組件進行交互。每個Angular應用至少有一個根組件。

從@angular/core中引入Component修飾器。建立一個普通的類,并用@Component修飾它。在@Component中,設置selector

CSS選擇器,用于定義如何在模板中使用組件,以及template

模板,用于指示Angular如何渲染此組件。MVVM框架Angular模塊(Module)Angular應用是模塊化的,其模塊系統為NgModules。每個Angular應用至少需要一個根模塊,AppModule

。Angular模塊是一個帶有@NgModule裝飾器的類,它接收一個用來描述模塊屬性的元數據對象。

declarations(聲明)

-視圖類屬于這個模塊。exports

-聲明的子集,可用于其它模塊中的組件模板。imports

-本模塊組件模板中需要由其它模塊的導出類。providers

-服務的創(chuàng)建者,加入全局的服務表中,任何部分都可被訪問到。bootstrap

-應用的根組件。只有根模塊需要設置bootstrap屬性。MVVM框架Angular模塊(Module)開發(fā)過程通常在main.ts文件中來引導根模塊來啟動應用。

MVVM框架Angular模板(Template)通過組件的自帶的模板來定義組件視圖。使用模板來定義組件的視圖,告訴Angular如何渲染組件。通過簡單而強大的模板語法,快速創(chuàng)建UI視圖。Angular模板的默認語言就是HTML。

默認使用的是雙大括號作為插值語法,大括號中間的值通常是一個組件屬性的變量名。MVVM框架Angular元數據(Metadata)元數據告訴Angular如何處理一個類。比如把元數據附加到這個類上來告訴Angular,ListComponent是一個組件。元數據用裝飾器的方式來附加元數據。

selector

一個css選擇器,告訴Angular在父級HTML中尋找一個<mylist>標簽,然后創(chuàng)建該組件,并插入此標簽中。templateUrl;組件HTML模板的地址。directives

:一個數組,包含此模板需要依賴的組件或指令。providers

:一個數組,包含組件所依賴的服務所需要的依賴注入提供者。MVVM框架Angular數據綁定(DataBinding)數據綁定為應用程序提供了一種簡單而一致的方法來顯示數據以及數據交互,是管理應用程序里面數據的一種機制。數據綁定給模板和組件提供數據交互的方式,往模板HTML中添加綁定標記,告訴Angular如何把二者聯系起來。

MVVM框架Angular數據綁定(DataBinding)四種形式

插值

:在HTML標簽中顯示組件值。屬性綁定:把元素的屬性設置為組件中屬性的值。事件綁定:在組件方法名被點擊時觸發(fā)。雙向綁定:使用Angular里的NgModel指令可以更便捷的進行雙向綁定。MVVM框架Angular指令(directive)Angular模板是動態(tài)的

,渲染時Angular會根據指令對DOM進行修改。指令是一個帶有“指令元數據”的類,分為二種類型:屬性指令:以元素的屬性形式來使用的指令。結構指令:用來改變DOM樹的結構

MVVM框架Angular服務(Service)封裝了某一特定功能,并且可以通過注入的方式供他人使用的獨立模塊。服務包括:值、函數,或應用所需的特性。常見服務:日志服務數據服務消息總線稅款計算器應用程序配置

一個日志服務,用于把日志記錄到瀏覽器的控制臺。MVVM框架Angular依賴注入(DependencyInjection)注入器(Injector)管理所有對象的依賴,在軟件運行時負責依賴對象的替換,是提供類的新實例的一種方式。使用依賴注入來提供新組件以及組件所需的服務。大多數依賴都是服務,Angular通過查看構造函數的參數類型,來得知組件需要哪些服務。

MVVM框架Angular依賴注入(DependencyInjection)

MVVM框架Angular總體框架和應用流程

MVVM框架Angular組件實例

從Angular核心庫中導入

Component

符號裝飾器函數,指定元數據管道操作符進行數據變換插值數據綁定模板MVVM框架Angular數據綁定實例

生命周期鉤子函數雙向數據綁定MVVM框架Angular事件綁定實例

Angular會把所點擊的

<li>

上的

hero對象傳給它,這個

hero

也就是前面在

*ngFor

表達式中定義的那個。

MVVM框架Angular主從組件實例

屬性綁定語法;單向數據綁定。讓父組件HeroesComponent可以控制子組件HeroDetailComponent。

用@Input裝飾器來讓hero屬性可以在外部的HeroesComponent中綁定。MVVM框架Angular注入服務

用根注入器將服務注冊成為服務提供者。創(chuàng)建HeroesComponent時,把HeroService的單例注入到這個屬性中。使用注入的服務MVVM框架Angular路由:路由定義會告訴路由器,當用戶點擊某個鏈接或者在瀏覽器地址欄中輸入某個URL時,要顯示哪個視圖。

MVVM框架Anguar路由設計示例

<router-outlet></router-outlet>RouterOutlet為Html中標記路由內容呈現位置的占位符指令。主要是指定組件要跳轉到模板的位置。import{NgModule}from'@angular/core';import{RouterModule,Routes}from'@angular/router';constroutes:Routes=[{path:'',//初始路由重定向redirectTo:'home',pathMatch:'full'},{path:'home',loadChildren:'app/home/home.module#HomeModule'},{path:'doc',loadChildren:'app/document/doc.module#DocModule'},…];@NgModule({imports:[RouterModule.forRoot(routes,{useHash:true})],exports:[RouterModule]})exportclassAppRoutingModule{}獨立設計一名為app-routing.module的TypeScript文件來配置系統的路由。MVVM框架Angular發(fā)起Ajax請求

導入一些所需的HTTP符號把HttpClient注入到構造函數中一個名叫http的私有屬性中使用HttpClient發(fā)起get請求,并返回某個值的RxJSObservableWeb前端UI框架Web前端UI框架概述通過組件化、模塊系統和構建工具通過封裝CSS和JavaScript實現:組件樣式:使用CSS或更高級的樣式表語言(如Sass或Less)來定義。模塊化:樣式被設計成模塊化的,每個組件有自己的樣式定義。主題系統:允許開發(fā)者通過修改少量的變量來改變應用的整體外觀。響應式設計:通過媒體查詢、網格系統和靈活布局等CSS技術實現。交互邏輯:將組件的預定義交互邏輯封裝在JavaScript中。數據綁定:界面元素的某些屬性可以直接與數據模型綁定。事件處理:提供簡潔的方式來處理用戶事件。生命周期管理:組件的創(chuàng)建、更新和銷毀等生命周期事件由框架管理,

Web前端UI框架Web前端UI框架概述流行的UI框架BootstrapSemanticUIFoundationAngularMaterial(和Angular結合好)AntDesign(阿里巴巴產品,企業(yè)級UI設計語言和React組件庫)NG-ZORRO(AntDesign在Angular生態(tài)系統中的應用)ElementUI(和Vue框架結合好,由餓了么前端團隊開發(fā)。)

Web前端UI框架MaterialDesign設計規(guī)范Google提出的設計規(guī)范:https://m3.material.io/材料(Material):核心概念,指UI元素和組件被構想成由材料制成的,這種材料遵循一些物理規(guī)則,如陰影和交互效果。響應式設計:適應不同屏幕尺寸和方向,提供一致的用戶體驗。組件系統:提供了一系列常見的UI組件,以及它們的設計和交互指南。布局:提供了網格系統和響應式設計的指南。自然的動作:鼓勵使用自然的動作和反饋,使用戶界面感覺更加生動和互動。這包括觸摸反饋、滾動效果、拖放等。

Web前端UI框架符合MaterialDesign風格的UI框架ReactMaterial-UI:適合React框架。Vue.jsVuetify

:適合Vue.js框架。AngularMaterial:完全支持Angular的各種功能。

Web前端UI框架AngularMaterial由GoogleAngular團隊開發(fā)和維護的UI框架官網:https://material.angular.io提供了一套符合GoogleMaterialDesign規(guī)范的UI組件,可以與Angular框架無縫集成。

Web前端UI框架AngularMaterial安裝與基本配置安裝AngularCLI

npminstall-g@angular/cli創(chuàng)建一個新的Angular項目ngnewangular-material-demo進入該項目目錄

cdangular-material-demo安裝AngularMaterial及其依賴的動畫模塊和CDKngadd@angular/material

Web前端UI框架AngularMaterial核心組件按鈕和指示器表單控件導航組件布局組件彈出與模態(tài)數據表格進度指示器

/components/categoriesWeb前端UI框架添加AngularMaterial組件導入AngularMaterial模塊在Angular模塊文件(通常是app.module.ts),導入并添加必要的模塊到imports數組。

Web前端UI框架添加AngularMaterial組件使用AngularMaterial組件在Angular組件的HTML模板文件(ponent.html)中使用AngularMaterial組件。

Web前端UI框架添加AngularMaterial組件將組件數據進行設置和綁定在Angular組件文件(ponent.ts)中進行初始化,并處理用戶輸入和事件。并在HTML模板文件(ponent.html)中調用。

Web前端UI框架AngularSchematics(原理圖)AngularCLI的一個功能,允許開發(fā)者通過命令行接口來應用復雜的變更,例如添加新的組件、服務或者配置特定的庫。生成文件和框架代碼:生成新的組件、服務、模塊、管道、守衛(wèi)代碼更新項目結構:生成新組件時,會在適當的位置創(chuàng)建一個新目錄。修改現有代碼:自動添加新生成的模塊到根模塊或特定功能模塊的imports數組中。示例:以下使用Schematics命令生成一個任務列表組件,其中包括了一個基本的任務列表。nggenerate@angular/material:tabletask-list

Web前端UI框架組件開發(fā)工具包(CDK)一組用來構建UI組件的行為原語,提供了一系列實用的工具和行為布局工具:如BreakpointObserver支持響應式布局。行為和功能:如Overlay用于創(chuàng)建浮動層,適用于構建模態(tài)窗口。表單控件:如Focusmonitoring:用于監(jiān)控元素焦點的變化。滾動策略:如ScrollingModule:提供了虛擬滾動的實現網址:/cdk/categories

Web前端UI框架組件開發(fā)工具包(CDK)示例:拖放模塊的使用在Angular模塊中導入拖放模塊import{DragDropModule}from'@angular/cdk/drag-drop';創(chuàng)建組件并應用拖放功能

cdkDropList:將一個容器標記為放置列表,可以在其中進行拖放。cdkDrag:將元素標記為可拖動。(cdkDropListDropped):一個事件綁定,當元素在新的位置放下時觸發(fā),用于更新數組中元素的位置。moveItemInArray:這是CDK提供的一個實用函數,用于在數組中移動項目。Web前端UI框架AngularMaterial主題主題:應用的整體外觀和感覺,主要包括主題顏色和字體和文字排版。主題顏色主調色板:在所有屏幕和組件中使用最廣泛的顏色。重音調色板:用于浮動動作按鈕和交互式元素的顏色。警告調色板:用于傳達錯誤狀態(tài)的顏色。前景調色板:文字和圖標的顏色。背景調色板:用于元素背景的顏色。文字排版:基于Material設計規(guī)范,定義了多個層級,每個層級由font-size,line-height和font-weight三個樣式配置組成。

Web前端UI框架AngularMaterial主題預定義主題:如indigo-pink、deeppurple-amber、pink-bluegrey、purple-green等。使用預定義主題在項目根目錄下的style.scss里直接引用通過angular.json中的styles數組添加CSS文件

Web前端UI框架AngularMaterial主題自定義主題支持scss:在創(chuàng)建項目時選擇SCSS作為樣式文件的格式;如果項目已經創(chuàng)建,可以將現有的CSS文件轉換為SCSS文件。引入主題庫:在全局樣式文件styles.scss中,寫入以下語句:

@import'~@angular/material/theming';

主題庫支持變量、混入(mixins)、函數等scss工具,包括用于生成自定義主題的各種Sass混入和函數。這包括定義顏色調色板(mat-palette)、構建主題對象(mat-light-theme或mat-dark-theme)、以及將這些主題樣式應用到組件上(angular-material-theme混入)。Web前端UI框架AngularMaterial主題自定義主題創(chuàng)建自定義主題:設置以下幾個基本元素:主要顏色強調顏色警告顏色背景和前景色

Web前端UI框架AngularMaterial主題自定義主題應用主題:使用AngularMaterial的主題混入來包括所有樣式,將指定的主題樣式應用到AngularMaterial的所有組件上。對某些組件進行額外的個性化調整:給出更具體的樣式規(guī)則。

Web前端UI框架AngularMaterial布局AngularFlexLayout庫官方推薦的響應式布局庫。實現機制:提供了一個強大的布局API,使用FlexboxCSS特性,通過一套API來控制flex容器和項目的屬性來實現布局,而不是傳統的網格系統。安裝與引入:

Web前端UI框架AngularMaterial布局使用FlexLayout指令HTML模板文件中,可以使用FlexLayout提供的指令來定義布局。

fxLayout:定義主軸的方向(row或column)。fxLayoutAlign:定義沿主軸和交叉軸的對齊方式。fxFlex:定義元素在容器中所占的空間。Web前端UI框架AngularMaterial布局使用FlexLayout指令實現響應式布局可以根據不同的屏幕尺寸定義不同的布局屬性。

當屏幕尺寸是超小尺寸(xs)時,布局會從行變?yōu)榱?,并且兩個元素都會占滿容器的寬度。Web前端UI框架AngularMaterial布局使用FlexLayout指令實現響應式布局可以根據不同的屏幕尺寸定義不同的布局屬性。

當屏幕尺寸是超小尺寸(xs)時,布局會從行變?yōu)榱校⑶覂蓚€元素都會占滿容器的寬度。工具庫框架前端工具庫框架概述功能:提供輔助功能的框架和庫,可以用于各種前端開發(fā)任務,如DOM操作、可視化、AJAX請求、數據處理等。主要分類和流行JS庫簡化前端Web開發(fā),增強功能:jQuery,Lodash數據可視化:D3.js,Chart.js動畫庫:Animate.css,anime.js,GSAP(GreenSockAnimationPlatform)低代碼開發(fā)平臺:GoogleBlockly,MicrosoftPowerApps

工具庫框架jQuery通過簡單的CSS選擇器和方法,簡化了對DOM的操作。例如$(“p”)選擇所有<p>元素。支持更高級的選擇器,如$(“.class”)、$(“#id”)等。提供了一系列方法來操作DOM,包括添加、刪除、修改元素,以及獲取和設置屬性、內容等。

$//在#contentdiv的末尾添加一個新的<p>元素

});$("#content").append('<p>NewItem</p>’);$("#first").text("Modifiedcontent");//修改id為first的<p>元素的文本內容$("#first").remove();//刪除id為first的<p>元素$(this).attr("style","background-color:yellow;");//改變按鈕的背景顏色

工具庫框架jQuery事件處理通過on()、off()、click()等方法,可以輕松地附加和處理事件冒泡、阻止事件默認行為等。

工具庫框架jQuery動畫和效果提供了animate()、fadeIn()、fadeOut()等方法來創(chuàng)建各種動畫和效果,如淡入淡出、滑動、漸變等。

工具庫框架jQueryAjax支持$.ajax():核心Ajax函數,它接受一個包含各種選項的JavaScript對象,用于配置和執(zhí)行Ajax請求。$.get()用于執(zhí)行HTTPGET請求。$.post()用于執(zhí)行HTTPPOST請求。$.getJSON()用于獲取JSON數據。

工具庫框架GoogleBlockly一種可視化編程工具,可以導出JavaScript、Python、PHP、Lua、Dart等多種語言。在線版:/blockly/離線版:

/google/blockly

工具庫框架GoogleBlockly二次開發(fā)/blockly?hl=zh-cn

工具庫框架GoogleBlockly二次開發(fā)/blockly?hl=zh-cn

工具庫框架GoogleBlockly二次開發(fā)(CodeLab)https://blocklycodelabs.dev/

https://blocklycodelabs.dev/codelabs/getting-started/index.html?index=..%2F..index#0演示地址:http://localhost/getting-started-codelab/complete-code/index.html工具庫框架GoogleBlockly二次開發(fā)(CodeLab)添加blocklyjs庫,會加載四個默認模塊Blockly核心:主要的Blockly庫,定義了基本的Blockly用戶界面和邏輯。內置塊定義:常見的塊,如循環(huán)、邏輯、數學和字符串操作。

JavaScript生成器:將塊轉換為JavaScript,并包含所有內置塊的塊生成器英語語言文件:內置塊和Blockly用戶界面上所有消息的字符串表,使用英語。

其他添加庫的方式見:/package/blockly#blockly-generators工具庫框架GoogleBlockly二次開發(fā)(CodeLab)創(chuàng)建Blockly工作空間(workspace)工作空間包括工作區(qū)域和工具欄(toolbox

)工具欄可以進一步分類(categories)將工作空間“注入”(injection)

Blockly.inject(container,options)工具庫框架GoogleBlockly二次開發(fā)(CodeLab)定義工具箱(Toolbox)

定義一個僅包含一個“循環(huán)”塊的工具箱。工具箱定義文檔:/blockly/guides/configure/web/toolbox?hl=zh-cn工具庫框架GoogleBlockly二次開發(fā)(CodeLab)自定義塊(block)然后增加到之前的工具箱中

工具庫框架GoogleBlockly二次開發(fā)(CodeLab)將設置的工作空間塊信息保存到特定的按鈕屬性中裝載和特定按鈕相關的之前保存的工作空間中的塊信息

workspaces.save將Blockly工作區(qū)導出到一個JavaScript對象,并將其存儲在按鈕的blocklySave屬性中。通過這種方式,塊序列的導出狀態(tài)與特定按鈕關聯起來。工具庫框架GoogleBlockly二次開發(fā)(CodeLab)通過語言生成器(languagegenerator

)產生特定代碼,如JavaScript文檔:/package/blockly#blockly-generators對于內置的缺省block,語言生成器知道如何生成JavaScript對于自定義塊,需要在相應的js文件中給出轉換規(guī)則

工具庫框架GoogleBlockly二次開發(fā)(CodeLab)運行生成的代碼步驟:裝載相應按鈕的工作空間內容根據該工作空間內容生成代碼運行該代碼:簡單實用eval(),生產環(huán)境中,參考以下網址:/NeilFraser/JS-Interpreter

javascript.javascriptGenerator.workspaceToCode.工具庫框架GoogleBlockly使用BlocklyDeveloperTools進行二次開發(fā)使用BlockFactory和BlockExporter創(chuàng)建自定義塊使用WorkspaceFactory構建工具箱和默認工作空間使用WorkspaceFactory配置工作空間說明文檔:/blockly/guides/create-custom-blocks/blockly-developer-tools?hl=zh-cn

工具庫框架GoogleBlockly使用BlocklyDeveloperTools進行二次開發(fā)在線網址:

/static/demos/blockfactory/index.html?hl=zh-cn工具庫框架GoogleBlockly使用BlocklyDeveloperTools進行二次開發(fā)設定新塊的顏色

工具庫框架GoogleBlockly使用BlocklyDeveloperTools進行二次開發(fā)設定新塊的輸入::valueinput(值輸入)、statementinput(聲明輸入)、dummyinput(模擬輸入)等

工具庫框架GoogleBlockly使用BlocklyDeveloperTools進行二次開發(fā)使用值輸入和聲明輸入,可以很容易地設計出編程中常用的條件語句和循環(huán)語句。

移動Web移動產品的三種實現方式NativeApp

豐富的用戶體驗

平臺指向性久經考驗的移動應用開發(fā)途徑WebApp更快的開發(fā)周期跨平臺運行實

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論