現(xiàn)代Web開(kāi)發(fā)與應(yīng)用課件 第五章-Web前端框架

Web前端框架現(xiàn)代Web開(kāi)發(fā)與應(yīng)用Web前端框架概述前端框架主要類型MVVM前框框架UI框架工具庫(kù)框架移動(dòng)Web

MVVM框架前端MV*框架

AngularJS，AngularReactvueBackbone.jsEmber.jsKnockoutJS

MVVM框架Angular由Google維護(hù)的一個(gè)成熟、功能完備的前端框架一個(gè)基于組件的框架，用于構(gòu)建可伸縮的Web應(yīng)用一組庫(kù)，涵蓋各種功能，包括路由、表單管理、客戶端-服務(wù)器通信等

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

英雄實(shí)例指南：/tutorialMVVM框架Angular默認(rèn)使用TypeScriptJavaScript的一個(gè)超集，擴(kuò)展了JavaScript的語(yǔ)法。提供了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭Ｔ陟o態(tài)類型的編程語(yǔ)言中，使用接口來(lái)定義子系統(tǒng)之間的界限。JavaScript缺少接口這一概念。靜態(tài)代碼分析器；智能IDE支持。Angular支持ES5，ES6和Dart。

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

MVVM框架Angular組件(Component)每個(gè)組件可以定義自己的輸入、輸出屬性，這些屬性成為了組件對(duì)外的接口，負(fù)責(zé)與上下游的組件進(jìn)行交互。每個(gè)Angular應(yīng)用至少有一個(gè)根組件。

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

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

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

。Angular模塊是一個(gè)帶有@NgModule裝飾器的類，它接收一個(gè)用來(lái)描述模塊屬性的元數(shù)據(jù)對(duì)象。

declarations（聲明）

-視圖類屬于這個(gè)模塊。exports

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

-本模塊組件模板中需要由其它模塊的導(dǎo)出類。providers

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

-應(yīng)用的根組件。只有根模塊需要設(shè)置bootstrap屬性。MVVM框架Angular模塊(Module)開(kāi)發(fā)過(guò)程通常在main.ts文件中來(lái)引導(dǎo)根模塊來(lái)啟動(dòng)應(yīng)用。

MVVM框架Angular模板（Template）通過(guò)組件的自帶的模板來(lái)定義組件視圖。使用模板來(lái)定義組件的視圖，告訴Angular如何渲染組件。通過(guò)簡(jiǎn)單而強(qiáng)大的模板語(yǔ)法，快速創(chuàng)建UI視圖。Angular模板的默認(rèn)語(yǔ)言就是HTML。

默認(rèn)使用的是雙大括號(hào)作為插值語(yǔ)法，大括號(hào)中間的值通常是一個(gè)組件屬性的變量名。MVVM框架Angular元數(shù)據(jù)（Metadata）元數(shù)據(jù)告訴Angular如何處理一個(gè)類。比如把元數(shù)據(jù)附加到這個(gè)類上來(lái)告訴Angular，ListComponent是一個(gè)組件。元數(shù)據(jù)用裝飾器的方式來(lái)附加元數(shù)據(jù)。

selector

：

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

：一個(gè)數(shù)組，包含此模板需要依賴的組件或指令。providers

：一個(gè)數(shù)組，包含組件所依賴的服務(wù)所需要的依賴注入提供者。MVVM框架Angular數(shù)據(jù)綁定（DataBinding）數(shù)據(jù)綁定為應(yīng)用程序提供了一種簡(jiǎn)單而一致的方法來(lái)顯示數(shù)據(jù)以及數(shù)據(jù)交互，是管理應(yīng)用程序里面數(shù)據(jù)的一種機(jī)制。數(shù)據(jù)綁定給模板和組件提供數(shù)據(jù)交互的方式，往模板HTML中添加綁定標(biāo)記，告訴Angular如何把二者聯(lián)系起來(lái)。

MVVM框架Angular數(shù)據(jù)綁定（DataBinding）四種形式

插值

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

，渲染時(shí)Angular會(huì)根據(jù)指令對(duì)DOM進(jìn)行修改。指令是一個(gè)帶有“指令元數(shù)據(jù)”的類，分為二種類型：屬性指令：以元素的屬性形式來(lái)使用的指令。結(jié)構(gòu)指令：用來(lái)改變DOM樹(shù)的結(jié)構(gòu)

MVVM框架Angular服務(wù)（Service）封裝了某一特定功能，并且可以通過(guò)注入的方式供他人使用的獨(dú)立模塊。服務(wù)包括：值、函數(shù)，或應(yīng)用所需的特性。常見(jiàn)服務(wù)：日志服務(wù)數(shù)據(jù)服務(wù)消息總線稅款計(jì)算器應(yīng)用程序配置

一個(gè)日志服務(wù)，用于把日志記錄到瀏覽器的控制臺(tái)。MVVM框架Angular依賴注入（DependencyInjection）注入器(Injector)管理所有對(duì)象的依賴，在軟件運(yùn)行時(shí)負(fù)責(zé)依賴對(duì)象的替換，是提供類的新實(shí)例的一種方式。使用依賴注入來(lái)提供新組件以及組件所需的服務(wù)。大多數(shù)依賴都是服務(wù)，Angular通過(guò)查看構(gòu)造函數(shù)的參數(shù)類型，來(lái)得知組件需要哪些服務(wù)。

MVVM框架Angular依賴注入（DependencyInjection）

MVVM框架Angular總體框架和應(yīng)用流程

MVVM框架Angular組件實(shí)例

從Angular核心庫(kù)中導(dǎo)入

Component

符號(hào)裝飾器函數(shù)，指定元數(shù)據(jù)管道操作符進(jìn)行數(shù)據(jù)變換插值數(shù)據(jù)綁定模板MVVM框架Angular數(shù)據(jù)綁定實(shí)例

生命周期鉤子函數(shù)雙向數(shù)據(jù)綁定MVVM框架Angular事件綁定實(shí)例

Angular會(huì)把所點(diǎn)擊的

<li>

上的

hero對(duì)象傳給它，這個(gè)

hero

也就是前面在

*ngFor

表達(dá)式中定義的那個(gè)。

MVVM框架Angular主從組件實(shí)例

屬性綁定語(yǔ)法；單向數(shù)據(jù)綁定。讓父組件HeroesComponent可以控制子組件HeroDetailComponent。

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

用根注入器將服務(wù)注冊(cè)成為服務(wù)提供者。創(chuàng)建HeroesComponent時(shí)，把HeroService的單例注入到這個(gè)屬性中。使用注入的服務(wù)MVVM框架Angular路由：路由定義會(huì)告訴路由器，當(dāng)用戶點(diǎn)擊某個(gè)鏈接或者在瀏覽器地址欄中輸入某個(gè)URL時(shí)，要顯示哪個(gè)視圖。

MVVM框架Anguar路由設(shè)計(jì)示例

<router-outlet></router-outlet>RouterOutlet為Html中標(biāo)記路由內(nèi)容呈現(xiàn)位置的占位符指令。主要是指定組件要跳轉(zhuǎn)到模板的位置。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{}獨(dú)立設(shè)計(jì)一名為app-routing.module的TypeScript文件來(lái)配置系統(tǒng)的路由。MVVM框架Angular發(fā)起Ajax請(qǐng)求

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

Web前端UI框架Web前端UI框架概述流行的UI框架BootstrapSemanticUIFoundationAngularMaterial（和Angular結(jié)合好）AntDesign(阿里巴巴產(chǎn)品，企業(yè)級(jí)UI設(shè)計(jì)語(yǔ)言和React組件庫(kù))NG-ZORRO（AntDesign在Angular生態(tài)系統(tǒng)中的應(yīng)用）ElementUI（和Vue框架結(jié)合好，由餓了么前端團(tuán)隊(duì)開(kāi)發(fā)。）

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

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

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

Web前端UI框架AngularMaterial由GoogleAngular團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)的UI框架官網(wǎng)：https://material.angular.io提供了一套符合GoogleMaterialDesign規(guī)范的UI組件，可以與Angular框架無(wú)縫集成。

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

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

cdangular-material-demo安裝AngularMaterial及其依賴的動(dòng)畫(huà)模塊和CDKngadd@angular/material

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

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

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

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

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

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

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

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

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

Web前端UI框架AngularMaterial主題自定義主題支持scss:在創(chuàng)建項(xiàng)目時(shí)選擇SCSS作為樣式文件的格式；如果項(xiàng)目已經(jīng)創(chuàng)建，可以將現(xiàn)有的CSS文件轉(zhuǎn)換為SCSS文件。引入主題庫(kù)：在全局樣式文件styles.scss中，寫入以下語(yǔ)句：

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

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

Web前端UI框架AngularMaterial主題自定義主題應(yīng)用主題:使用AngularMaterial的主題混入來(lái)包括所有樣式，將指定的主題樣式應(yīng)用到AngularMaterial的所有組件上。對(duì)某些組件進(jìn)行額外的個(gè)性化調(diào)整：給出更具體的樣式規(guī)則。

Web前端UI框架AngularMaterial布局AngularFlexLayout庫(kù)官方推薦的響應(yīng)式布局庫(kù)。實(shí)現(xiàn)機(jī)制：提供了一個(gè)強(qiáng)大的布局API，使用FlexboxCSS特性，通過(guò)一套API來(lái)控制flex容器和項(xiàng)目的屬性來(lái)實(shí)現(xiàn)布局，而不是傳統(tǒng)的網(wǎng)格系統(tǒng)。安裝與引入：

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

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

當(dāng)屏幕尺寸是超小尺寸（xs）時(shí)，布局會(huì)從行變?yōu)榱?，并且兩個(gè)元素都會(huì)占滿容器的寬度。Web前端UI框架AngularMaterial布局使用FlexLayout指令實(shí)現(xiàn)響應(yīng)式布局可以根據(jù)不同的屏幕尺寸定義不同的布局屬性。

當(dāng)屏幕尺寸是超小尺寸（xs）時(shí)，布局會(huì)從行變?yōu)榱?，并且兩個(gè)元素都會(huì)占滿容器的寬度。工具庫(kù)框架前端工具庫(kù)框架概述功能：提供輔助功能的框架和庫(kù)，可以用于各種前端開(kāi)發(fā)任務(wù)，如DOM操作、可視化、AJAX請(qǐng)求、數(shù)據(jù)處理等。主要分類和流行JS庫(kù)簡(jiǎn)化前端Web開(kāi)發(fā)，增強(qiáng)功能：jQuery，Lodash數(shù)據(jù)可視化：D3.js，Chart.js動(dòng)畫(huà)庫(kù)：Animate.css，anime.js，GSAP(GreenSockAnimationPlatform)低代碼開(kāi)發(fā)平臺(tái)：GoogleBlockly，MicrosoftPowerApps

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

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

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

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

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

工具庫(kù)框架jQueryAjax支持$.ajax()：核心Ajax函數(shù)，它接受一個(gè)包含各種選項(xiàng)的JavaScript對(duì)象，用于配置和執(zhí)行Ajax請(qǐng)求。$.get()用于執(zhí)行HTTPGET請(qǐng)求。$.post()用于執(zhí)行HTTPPOST請(qǐng)求。$.getJSON()用于獲取JSON數(shù)據(jù)。

工具庫(kù)框架GoogleBlockly一種可視化編程工具，可以導(dǎo)出JavaScript、Python、PHP、Lua、Dart等多種語(yǔ)言。在線版：/blockly/離線版：

/google/blockly

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

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

工具庫(kù)框架GoogleBlockly二次開(kāi)發(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工具庫(kù)框架GoogleBlockly二次開(kāi)發(fā)(CodeLab)添加blocklyjs庫(kù)，會(huì)加載四個(gè)默認(rèn)模塊Blockly核心：主要的Blockly庫(kù)，定義了基本的Blockly用戶界面和邏輯。內(nèi)置塊定義：常見(jiàn)的塊，如循環(huán)、邏輯、數(shù)學(xué)和字符串操作。

JavaScript生成器：將塊轉(zhuǎn)換為JavaScript，并包含所有內(nèi)置塊的塊生成器英語(yǔ)語(yǔ)言文件：內(nèi)置塊和Blockly用戶界面上所有消息的字符串表，使用英語(yǔ)。

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

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

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

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

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

workspaces.save將Blockly工作區(qū)導(dǎo)出到一個(gè)JavaScript對(duì)象，并將其存儲(chǔ)在按鈕的blocklySave屬性中。通過(guò)這種方式，塊序列的導(dǎo)出狀態(tài)與特定按鈕關(guān)聯(lián)起來(lái)。工具庫(kù)框架GoogleBlockly二次開(kāi)發(fā)(CodeLab)通過(guò)語(yǔ)言生成器（languagegenerator

）產(chǎn)生特定代碼，如JavaScript文檔：/package/blockly#blockly-generators對(duì)于內(nèi)置的缺省block，語(yǔ)言生成器知道如何生成JavaScript對(duì)于自定義塊，需要在相應(yīng)的js文件中給出轉(zhuǎn)換規(guī)則

工具庫(kù)框架GoogleBlockly二次開(kāi)發(fā)(CodeLab)運(yùn)行生成的代碼步驟：裝載相應(yīng)按鈕的工作空間內(nèi)容根據(jù)該工作空間內(nèi)容生成代碼運(yùn)行該代碼：簡(jiǎn)單實(shí)用eval()，生產(chǎn)環(huán)境中，參考以下網(wǎng)址：/NeilFraser/JS-Interpreter

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

工具庫(kù)框架GoogleBlockly使用BlocklyDeveloperTools進(jìn)行二次開(kāi)發(fā)在線網(wǎng)址：

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

工具庫(kù)框架GoogleBlockly使用BlocklyDeveloperTools進(jìn)行二次開(kāi)發(fā)設(shè)定新塊的輸入：：valueinput（值輸入）、statementinput（聲明輸入）、dummyinput（模擬輸入）等

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

移動(dòng)Web移動(dòng)產(chǎn)品的三種實(shí)現(xiàn)方式NativeApp

豐富的用戶體驗(yàn)

平臺(tái)指向性久經(jīng)考驗(yàn)的移動(dòng)應(yīng)用開(kāi)發(fā)途徑WebApp更快的開(kāi)發(fā)周期跨平臺(tái)運(yùn)行實(shí)