现代Web开发与应用课件 第五章-Web前端框架

Web前端框架现代Web开发与应用Web前端框架概述前端框架主要类型MVVM前框框架UI框架工具库框架移动Web

MVVM框架前端MV*框架

AngularJS，AngularReactvueBackbone.jsEmber.jsKnockoutJS

MVVM框架Angular由Google维护的一个成熟、功能完备的前端框架一个基于组件的框架，用于构建可伸缩的Web应用一组库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信等

依赖注入以HTML的扩展版本为基础实现模板由@angular/router提供路由功能利用@angular/http实现Ajax请求利用@angular/forms创建表单CSS组件化XSS防御单元测试组件Angular文档：/MVVM框架Angular

英雄实例指南：/tutorialMVVM框架Angular默认使用TypeScriptJavaScript的一个超集，扩展了JavaScript的语法。提供了可选的静态类型和基于类的面向对象编程。在静态类型的编程语言中，使用接口来定义子系统之间的界限。JavaScript缺少接口这一概念。静态代码分析器；智能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

-服务的创建者，加入全局的服务表中，任何部分都可被访问到。bootstrap

-应用的根组件。只有根模块需要设置bootstrap属性。MVVM框架Angular模块(Module)开发过程通常在main.ts文件中来引导根模块来启动应用。

MVVM框架Angular模板（Template）通过组件的自带的模板来定义组件视图。使用模板来定义组件的视图，告诉Angular如何渲染组件。通过简单而强大的模板语法，快速创建UI视图。Angular模板的默认语言就是HTML。

默认使用的是双大括号作为插值语法，大括号中间的值通常是一个组件属性的变量名。MVVM框架Angular元数据（Metadata）元数据告诉Angular如何处理一个类。比如把元数据附加到这个类上来告诉Angular，ListComponent是一个组件。元数据用装饰器的方式来附加元数据。

selector

：

一个css选择器，告诉Angular在父级HTML中寻找一个<mylist>标签，然后创建该组件，并插入此标签中。templateUrl;组件HTML模板的地址。directives

：一个数组，包含此模板需要依赖的组件或指令。providers

：一个数组，包含组件所依赖的服务所需要的依赖注入提供者。MVVM框架Angular数据绑定（DataBinding）数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及数据交互，是管理应用程序里面数据的一种机制。数据绑定给模板和组件提供数据交互的方式，往模板HTML中添加绑定标记，告诉Angular如何把二者联系起来。

MVVM框架Angular数据绑定（DataBinding）四种形式

插值

:在HTML标签中显示组件值。属性绑定:把元素的属性设置为组件中属性的值。事件绑定:在组件方法名被点击时触发。双向绑定:使用Angular里的NgModel指令可以更便捷的进行双向绑定。MVVM框架Angular指令（directive）Angular模板是动态的

，渲染时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注入服务

用根注入器将服务注册成为服务提供者。创建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发起Ajax请求

导入一些所需的HTTP符号把HttpClient注入到构造函数中一个名叫http的私有属性中使用HttpClient发起get请求，并返回某个值的RxJSObservableWeb前端UI框架Web前端UI框架概述通过组件化、模块系统和构建工具通过封装CSS和JavaScript实现：组件样式：使用CSS或更高级的样式表语言（如Sass或Less）来定义。模块化：样式被设计成模块化的，每个组件有自己的样式定义。主题系统：允许开发者通过修改少量的变量来改变应用的整体外观。响应式设计：通过媒体查询、网格系统和灵活布局等CSS技术实现。交互逻辑:将组件的预定义交互逻辑封装在JavaScript中。数据绑定：界面元素的某些属性可以直接与数据模型绑定。事件处理：提供简洁的方式来处理用户事件。生命周期管理:组件的创建、更新和销毁等生命周期事件由框架管理，

Web前端UI框架Web前端UI框架概述流行的UI框架BootstrapSemanticUIFoundationAngularMaterial（和Angular结合好）AntDesign(阿里巴巴产品，企业级UI设计语言和React组件库)NG-ZORRO（AntDesign在Angular生态系统中的应用）ElementUI（和Vue框架结合好，由饿了么前端团队开发。）

Web前端UI框架MaterialDesign设计规范Google提出的设计规范:https://m3.material.io/材料（Material）:核心概念，指UI元素和组件被构想成由材料制成的，这种材料遵循一些物理规则，如阴影和交互效果。响应式设计：适应不同屏幕尺寸和方向，提供一致的用户体验。组件系统：提供了一系列常见的UI组件，以及它们的设计和交互指南。布局：提供了网格系统和响应式设计的指南。自然的动作：鼓励使用自然的动作和反馈，使用户界面感觉更加生动和互动。这包括触摸反馈、滚动效果、拖放等。

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

:适合Vue.js框架。AngularMaterial：完全支持Angular的各种功能。

Web前端UI框架AngularMaterial由GoogleAngular团队开发和维护的UI框架官网：https://material.angular.io提供了一套符合GoogleMaterialDesign规范的UI组件，可以与Angular框架无缝集成。

Web前端UI框架AngularMaterial安装与基本配置安装AngularCLI

npminstall-g@angular/cli创建一个新的Angular项目ngnewangular-material-demo进入该项目目录

cdangular-material-demo安装AngularMaterial及其依赖的动画模块和CDKngadd@angular/material

Web前端UI框架AngularMaterial核心组件按钮和指示器表单控件导航组件布局组件弹出与模态数据表格进度指示器

/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的一个功能，允许开发者通过命令行接口来应用复杂的变更，例如添加新的组件、服务或者配置特定的库。生成文件和框架代码：生成新的组件、服务、模块、管道、守卫代码更新项目结构：生成新组件时，会在适当的位置创建一个新目录。修改现有代码：自动添加新生成的模块到根模块或特定功能模块的imports数组中。示例：以下使用Schematics命令生成一个任务列表组件，其中包括了一个基本的任务列表。nggenerate@angular/material:tabletask-list

Web前端UI框架组件开发工具包（CDK）一组用来构建UI组件的行为原语，提供了一系列实用的工具和行为布局工具：如BreakpointObserver支持响应式布局。行为和功能：如Overlay用于创建浮动层，适用于构建模态窗口。表单控件：如Focusmonitoring：用于监控元素焦点的变化。滚动策略：如ScrollingModule：提供了虚拟滚动的实现网址：/cdk/categories

Web前端UI框架组件开发工具包（CDK）示例：拖放模块的使用在Angular模块中导入拖放模块import{DragDropModule}from'@angular/cdk/drag-drop';创建组件并应用拖放功能

cdkDropList:将一个容器标记为放置列表，可以在其中进行拖放。cdkDrag:将元素标记为可拖动。(cdkDropListDropped):一个事件绑定，当元素在新的位置放下时触发，用于更新数组中元素的位置。moveItemInArray:这是CDK提供的一个实用函数，用于在数组中移动项目。Web前端UI框架AngularMaterial主题主题：应用的整体外观和感觉，主要包括主题颜色和字体和文字排版。主题颜色主调色板：在所有屏幕和组件中使用最广泛的颜色。重音调色板：用于浮动动作按钮和交互式元素的颜色。警告调色板：用于传达错误状态的颜色。前景调色板：文字和图标的颜色。背景调色板：用于元素背景的颜色。文字排版:基于Material设计规范，定义了多个层级，每个层级由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:在创建项目时选择SCSS作为样式文件的格式；如果项目已经创建，可以将现有的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主题自定义主题创建自定义主题:设置以下几个基本元素：主要颜色强调颜色警告颜色背景和前景色

Web前端UI框架AngularMaterial主题自定义主题应用主题:使用AngularMaterial的主题混入来包括所有样式，将指定的主题样式应用到AngularMaterial的所有组件上。对某些组件进行额外的个性化调整：给出更具体的样式规则。

Web前端UI框架AngularMaterial布局AngularFlexLayout库官方推荐的响应式布局库。实现机制：提供了一个强大的布局API，使用FlexboxCSS特性，通过一套API来控制flex容器和项目的属性来实现布局，而不是传统的网格系统。安装与引入：

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

fxLayout:定义主轴的方向（row或column）。fxLayoutAlign:定义沿主轴和交叉轴的对齐方式。fxFlex:定义元素在容器中所占的空间。Web前端UI框架AngularMaterial布局使用FlexLayout指令实现响应式布局可以根据不同的屏幕尺寸定义不同的布局属性。

当屏幕尺寸是超小尺寸（xs）时，布局会从行变为列，并且两个元素都会占满容器的宽度。Web前端UI框架AngularMaterial布局使用FlexLayout指令实现响应式布局可以根据不同的屏幕尺寸定义不同的布局属性。

当屏幕尺寸是超小尺寸（xs）时，布局会从行变为列，并且两个元素都会占满容器的宽度。工具库框架前端工具库框架概述功能：提供辅助功能的框架和库，可以用于各种前端开发任务，如DOM操作、可视化、AJAX请求、数据处理等。主要分类和流行JS库简化前端Web开发，增强功能：jQuery，Lodash数据可视化：D3.js，Chart.js动画库：Animate.css，anime.js，GSAP(GreenSockAnimationPlatform)低代码开发平台：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()等方法来创建各种动画和效果,如淡入淡出、滑动、渐变等。

工具库框架jQueryAjax支持$.ajax()：核心Ajax函数，它接受一个包含各种选项的JavaScript对象，用于配置和执行Ajax请求。$.get()用于执行HTTPGET请求。$.post()用于执行HTTPPOST请求。$.getJSON()用于获取JSON数据。

工具库框架GoogleBlockly一种可视化编程工具，可以导出JavaScript、Python、PHP、Lua、Dart等多种语言。在线版：/blockly/离线版：

/google/blockly

工具库框架GoogleBlockly二次开发/blockly?hl=zh-cn

工具库框架GoogleBlockly二次开发/blockly?hl=zh-cn

工具库框架GoogleBlockly二次开发(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二次开发(CodeLab)添加blocklyjs库，会加载四个默认模块Blockly核心：主要的Blockly库，定义了基本的Blockly用户界面和逻辑。内置块定义：常见的块，如循环、逻辑、数学和字符串操作。

JavaScript生成器：将块转换为JavaScript，并包含所有内置块的块生成器英语语言文件：内置块和Blockly用户界面上所有消息的字符串表，使用英语。

其他添加库的方式见：/package/blockly#blockly-generators工具库框架GoogleBlockly二次开发(CodeLab)创建Blockly工作空间（workspace）工作空间包括工作区域和工具栏（toolbox

）工具栏可以进一步分类（categories）将工作空间“注入”（injection）

Blockly.inject(container,options)工具库框架GoogleBlockly二次开发(CodeLab)定义工具箱(Toolbox)

定义一个仅包含一个“循环”块的工具箱。工具箱定义文档：/blockly/guides/configure/web/toolbox?hl=zh-cn工具库框架GoogleBlockly二次开发(CodeLab)自定义块（block）然后增加到之前的工具箱中

工具库框架GoogleBlockly二次开发(CodeLab)将设置的工作空间块信息保存到特定的按钮属性中装载和特定按钮相关的之前保存的工作空间中的块信息

workspaces.save将Blockly工作区导出到一个JavaScript对象，并将其存储在按钮的blocklySave属性中。通过这种方式，块序列的导出状态与特定按钮关联起来。工具库框架GoogleBlockly二次开发(CodeLab)通过语言生成器（languagegenerator

）产生特定代码，如JavaScript文档：/package/blockly#blockly-generators对于内置的缺省block，语言生成器知道如何生成JavaScript对于自定义块，需要在相应的js文件中给出转换规则

工具库框架GoogleBlockly二次开发(CodeLab)运行生成的代码步骤：装载相应按钮的工作空间内容根据该工作空间内容生成代码运行该代码：简单实用eval()，生产环境中，参考以下网址：/NeilFraser/JS-Interpreter

javascript.javascriptGenerator.workspaceToCode.工具库框架GoogleBlockly使用BlocklyDeveloperTools进行二次开发使用BlockFactory和BlockExporter创建自定义块使用WorkspaceFactory构建工具箱和默认工作空间使用WorkspaceFactory配置工作空间说明文档：/blockly/guides/create-custom-blocks/blockly-developer-tools?hl=zh-cn

工具库框架GoogleBlockly使用BlocklyDeveloperTools进行二次开发在线网址：

/static/demos/blockfactory/index.html?hl=zh-cn工具库框架GoogleBlockly使用BlocklyDeveloperTools进行二次开发设定新块的颜色

工具库框架GoogleBlockly使用BlocklyDeveloperTools进行二次开发设定新块的输入：：valueinput（值输入）、statementinput（声明输入）、dummyinput（模拟输入）等

工具库框架GoogleBlockly使用BlocklyDeveloperTools进行二次开发使用值输入和声明输入，可以很容易地设计出编程中常用的条件语句和循环语句。

移动Web移动产品的三种实现方式NativeApp

丰富的用户体验

平台指向性久经考验的移动应用开发途径WebApp更快的开发周期跨平台运行实