工業(yè)App開發(fā)與應(yīng)用 課件 項目4 工業(yè)App前端低代碼開發(fā)

前端低代碼開發(fā)過程目錄一、事件驅(qū)動機(jī)制二、前端低代碼開發(fā)基本過程三、前端低代碼開發(fā)優(yōu)勢一、事件驅(qū)動機(jī)制一、事件驅(qū)動機(jī)制01-02-前端低代碼開發(fā)采用事件驅(qū)動機(jī)制，使用事件驅(qū)動來響應(yīng)用戶操作。使用事件驅(qū)動機(jī)制是前端低代碼開發(fā)的核心特性之一。1.事件指在網(wǎng)頁中發(fā)生的交互性事件用戶事件如點擊、滑動、輸入等系統(tǒng)事件如加載完成、錯誤提示等事件可以被網(wǎng)頁中的元素（如按鈕、文本框、鏈接等）捕捉和處理，從而實現(xiàn)網(wǎng)頁的交互功能。2.事件驅(qū)動一種編程模式，即當(dāng)某個事件發(fā)生時，程序會自動調(diào)用相應(yīng)的事件處理函數(shù)來處理該事件。通過給頁面及頁面元素添加各種動作（事件）來實現(xiàn)交互效果。當(dāng)用戶執(zhí)行某個動作時比如點擊按鈕、輸入文本等，程序會自動調(diào)用相應(yīng)的事件處理函數(shù)來處理該事件。這些事件處理函數(shù)可以是開發(fā)者自己編寫的代碼，也可以是預(yù)定義的代碼庫。事件驅(qū)動

編程模式優(yōu)點使程序更加靈活、響應(yīng)更快01更符合人類的思維方式02因為人類在日常生活中也是通過感知事件來做出反應(yīng)的例如：給水壺加上蜂鳴器，只要在聽到提示音時就知道水開了該關(guān)火了。3.事件驅(qū)動函數(shù)指用于處理特定事件的函數(shù)事件處理函數(shù)的分類預(yù)定義的函數(shù)開發(fā)者自定義函數(shù)當(dāng)特定事件發(fā)生時，程序會調(diào)用相應(yīng)的事件處理函數(shù)來處理該事件。事件處理函數(shù)的作用可以實現(xiàn)各種功能，如修改網(wǎng)頁內(nèi)容、執(zhí)行動畫效果、發(fā)送請求等是網(wǎng)頁交互的核心部分function(event){……}二、前端低代碼開發(fā)基本過程二、前端低代碼開發(fā)的基本過程Step1

確認(rèn)操作對象Step2

添加動作Step3

編寫前端函數(shù)Step4

前端調(diào)試事件事件處理函數(shù)1.確認(rèn)操作對象理解頁面構(gòu)成確認(rèn)需要對哪個對象或元素進(jìn)行操作，如按鈕、文本框、圖片等。2.給操作對象添加動作（事件）需選擇在該對象上執(zhí)行哪種動作例如，如果要在頁面加載完后給頁面元素設(shè)置默認(rèn)值頁面初始化動作鼠標(biāo)點擊鍵盤輸入3.編寫前端函數(shù)（事件處理函數(shù)）前端函數(shù)（事件處理函數(shù)）采用JavaScript腳本語言編寫支持ES6規(guī)范負(fù)責(zé)處理動作（事件）發(fā)生后的邏輯操作，如彈出對話框、跳轉(zhuǎn)頁面等function(event){varviewModel=this;//彈出提示框

cb.utils.alert(“helloworld!”);}4.前端調(diào)試可以通過調(diào)試快速定位和修復(fù)問題，幫助開發(fā)者更加高效地完成開發(fā)任務(wù)。三、前端低代碼開發(fā)優(yōu)勢三、前端低代碼開發(fā)優(yōu)勢01-02-前端低代碼開發(fā)更加高效、簡單、易用可以大幅度縮短開發(fā)周期，降低開發(fā)成本03-04-在前端低代碼開發(fā)中，開發(fā)者無需關(guān)注底層技術(shù)細(xì)節(jié)，只需要專注于業(yè)務(wù)邏輯和用戶體驗的實現(xiàn)成為了企業(yè)快速迭代和創(chuàng)新的首選方法總結(jié)前段低代碼開發(fā)過程前端低代碼開發(fā)優(yōu)勢事件驅(qū)動機(jī)制事件事件驅(qū)動事件驅(qū)動函數(shù)前端低代碼開發(fā)基本過程確認(rèn)操作對象給操作對象添加動作編寫前端函數(shù)前端調(diào)試思考1簡述事件驅(qū)動機(jī)制？思考2簡述前端低代碼開發(fā)基本過程？Model模型目錄一、Model模型簡介二、Model模型的構(gòu)成三、Model模型的分類四、Model模型的應(yīng)用一、Model模型簡介一、Model模型簡介01-02-在前端低代碼開發(fā)中，Model模型是非常重要的一個概念。它是頁面的數(shù)據(jù)模型，也可以理解為頁面的結(jié)構(gòu)模型。二、Model模型的構(gòu)成二、Model模型的構(gòu)成Model模型三、Model模型的分類三、Model模型的分類類型選擇方法事件三、Model模型的分類常用的Model模型主要包括viewModelbaseModelgridModellistModelsimpleModeltreeModelfilterModelreferModel1.viewModel原生數(shù)據(jù)模型結(jié)合組裝010101010101010101001010102.baseModel數(shù)據(jù)模型基類baseModel是數(shù)據(jù)模型基類，不會直接出現(xiàn)在頁面中。封裝常用模型3.simpleModel簡單模型API4.simpleModel簡單模型

下拉項

復(fù)選框

單選框自動搜索

下拉按鈕

打印5.gridModel表格模型5.gridModel表格模型排序篩選分頁6.treeModel樹形模型展開折疊拖曳7.filterModel過濾器模型文本框下拉框日期選擇器8.referModel參照模型四、Model模型的應(yīng)用四、Model模型的應(yīng)用四、Model模型的應(yīng)用viewModel原生數(shù)據(jù)模型gridModel表格模型treeModel樹形模型四、Model模型的應(yīng)用模型事件方法總結(jié)Model模型Model模型的應(yīng)用Model模型簡介viewModel原生數(shù)據(jù)模型simpleModel簡單模型listModel列表模型gridModel表格模型baseModel數(shù)據(jù)模型基類listModel列表模型gridModel表格模型treeModel樹形模型filterModel過濾器模型referModel參照模型Model模型的構(gòu)成Model模型的分類思考1簡述Model模型的分類？思考2簡述viewModel模型與其他模型的關(guān)系？表格模型目錄一、表格模型概述二、獲取表格vm對象三、獲取表格數(shù)據(jù)四、表格模型常用腳本和方法五、表格模型常用事件一、表格模型概述一、表格模型概述排序篩選分頁二、獲取表格vm對象二、獲取表格vm對象01-獲取表格的vm對象，以便于使用表格gridModel模型上的方法和事件。頁面只有一個表格function(event){varviewModel=this;vargridModel=viewModel.getGridModel();}當(dāng)頁面有多個表格時，我們可以通過表格的childrenfield屬性值或者cCode，獲取指定表格vm對象。三、獲取表格數(shù)據(jù)三、獲取表格數(shù)據(jù)010010101011001010101001001010101100101010100100101010110010101010三、獲取表格數(shù)據(jù)示例代碼function(event){varviewModel=this；

vargirdModel=viewModel.getGridModel();//觸發(fā)按鈕點擊事件

viewModel.get('button5xa').on('click',function(args){//獲取點擊行的行數(shù)據(jù)（根據(jù)行號）

constrowData=gridModel.getRow(args.index);//獲取表格當(dāng)前頁面所有的行數(shù)據(jù)

constrowAllDatas=gridModel.getRows();//獲取表格當(dāng)前頁面表體數(shù)據(jù)(比getRows多了_status字段)consttabelDatas=gridModel.getData();//獲取表格已勾選行的行數(shù)據(jù)（不使用行號查找）

constselecteDatas=gridModel.getSelectedRows();})}Vm對象回調(diào)函數(shù)三、獲取表格數(shù)據(jù)示例代碼function(event){varviewModel=this；

vargirdModel=viewModel.getGridModel();//觸發(fā)按鈕點擊事件

viewModel.get('button5xa').on('click',function(args){//獲取點擊行的行數(shù)據(jù)（根據(jù)行號）

constrowData=gridModel.getRow(args.index);//獲取表格當(dāng)前頁面所有的行數(shù)據(jù)

constrowAllDatas=gridModel.getRows();//獲取表格當(dāng)前頁面表體數(shù)據(jù)(比getRows多了_status字段)consttabelDatas=gridModel.getData();//獲取表格已勾選行的行數(shù)據(jù)（不使用行號查找）

constselecteDatas=gridModel.getSelectedRows();})}四、表格模型常用腳本和方法四、表格模型常用腳本和方法獲取單元格value值getCellValue(rowIndex,cellName)行號列號model.getCellValue(rowIndex,cellName)四、表格模型常用腳本和方法獲取單元格value值setCellValue(rowIndex,cellName,value,check,blur)行號列號值boolean型blur為true時，單元格數(shù)據(jù)改變后變?yōu)椴豢删庉嫚顟B(tài)。model.setCellValue(rowIndex,cellName,value,check,blur)五、表格模型常用事件五、表格模型常用事件單元格數(shù)據(jù)改變后事件選中select后事件取消選中select后事件增行/插行前事件增行/插行后事件刪行前事件刪行后事件1.單元格數(shù)據(jù)改變后事件function(event){varviewModel=this；vargirdModel=viewModel.getGridModel();//單元格數(shù)據(jù)改變后事件gridModel.on("afterCellValueChange",function(event){//rowIndex:'行號'，cellName:'列名'，value:'新值'，oldValue:'舊值'let{rowIndex,cellName,value,oldValue,childrenField}=event;/*todosomeing...*/})；}使用afterCellValueChange事件，可以在單元格數(shù)據(jù)改變后觸發(fā)相應(yīng)的事件。rowIndex行號cellName列名value新值oldValue舊值2.選中select后事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//選中select后事件rowIndexs為行號，單行（整形）or多行（數(shù)組）

gridModel.on("afterSelect",function(rowIndexs){/*todosomeing...*/});}使用afterSelect事件，可以在選中select后觸發(fā)相應(yīng)的事件。rowIndexs為行號，單行（整型）或多行（數(shù)組）。3.取消選中select后事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//取消選中select后事件rowIndexs為行號，單行（整型）or多行（數(shù)組）

gridModel.on("afterUnselect",function(rowIndexs){/*todosomeing...*/})；}使用afterUnselect事件，可以在取消選中select后觸發(fā)相應(yīng)的事件。rowIndexs為行號，單行（整型）或多行（數(shù)組）。4.增行/插行前事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//增行/插行前事件

gridModel.on("beforeInsertRow",function(data){/*todosomeing...*///返回true為允許增/插行，返回false為終止操作

returnfalse;})；}使用beforeInsertRow事件，可以在增行/插行前觸發(fā)相應(yīng)的事件。data為要插入的行數(shù)據(jù)。5.增行/插行后事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//增行/插行后事件data格式為{index:'增/插行行號'，row:'行數(shù)據(jù)'}gridModel.on("afterInsertRow",function(data){/*todosomeing...*/});}使用afterInsertRow事件，可以在增行/插行后觸發(fā)相應(yīng)的事件。data為已插入的行數(shù)據(jù)。6.刪行前事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//刪行前事件data為要刪除的行數(shù)據(jù)

gridModel.on("beforeDeleteRows",function(data){/*todosomeing...*///返回true為允許刪行，返回false為終止操作

returnfalse;})；}使用beforeDeleteRows事件，可以在刪行前觸發(fā)相應(yīng)的事件。data為要刪除的行數(shù)據(jù)。7.刪行后事件function(event){varviewModel=this;vargirdModel=viewModel.getGridModel();//刪行后事件data為已刪除的行數(shù)據(jù)

gridModel.on("afterDeleteRows",function(data){/*todosomeing...*/});}使用afterDeleteRows事件，可以在刪行后觸發(fā)相應(yīng)的事件。data為已刪除的行數(shù)據(jù)?？偨Y(jié)前段低代碼開發(fā)過程表格模型常用腳本和方法表格模型概述獲取表格數(shù)據(jù)前端低代碼開發(fā)優(yōu)勢獲取表格vm對象單元格數(shù)據(jù)改變后事件取消選中select后事件選中select后事件增行/插行前事件增行/插行后事件刪行前事件刪行后事件思考1簡述girdModel對象獲取表格數(shù)據(jù)的常用方法？思考2簡述表格模型的常用事件？前端調(diào)試目錄一、前端調(diào)試概述二、如何進(jìn)行前端調(diào)試三、前端調(diào)試的注意事項一、前端調(diào)試概述一、前端調(diào)試概述01-02-前端調(diào)試是指使用瀏覽器進(jìn)行調(diào)試，通過控制臺來檢查代碼的運(yùn)行結(jié)果。前端調(diào)試是Web開發(fā)中非常重要的一環(huán)，因為它能夠幫助我們在開發(fā)過程中及時發(fā)現(xiàn)并解決問題，提高開發(fā)效率和代碼質(zhì)量。03-我們可以使用瀏覽器開發(fā)者工具來檢查代碼的運(yùn)行結(jié)果，并進(jìn)行相應(yīng)的優(yōu)化和修復(fù)，從而更加高效地進(jìn)行前端調(diào)試工作，提高Web應(yīng)用的質(zhì)量和性能。二、如何進(jìn)行前端調(diào)試二、如何進(jìn)行前端調(diào)試前端調(diào)試開發(fā)者工具結(jié)構(gòu)樣式腳本網(wǎng)絡(luò)請求開發(fā)者工具打開方法直接按快捷鍵F1201右鍵單擊鼠標(biāo)，并在菜單中單擊“檢查”02二、如何進(jìn)行前端調(diào)試元素面板控制臺面板源代碼面板網(wǎng)絡(luò)面板1元素面板元素面板（Elements）123查找網(wǎng)頁HTML源代碼的任一元素查看網(wǎng)頁的HTML結(jié)構(gòu)和對應(yīng)的CSS樣式通過修改代碼來實時預(yù)覽效果查找和編輯DOM元素查看元素的盒模型和事件監(jiān)聽器2控制臺面板控制臺面板123可以用于查看網(wǎng)頁運(yùn)行過程中的信息，控制臺輸出的信息，一般包括錯誤信息、警告信息和調(diào)試信息等可以用console.log()將日志信息輸出到控制臺進(jìn)行查看可以用于執(zhí)行JavaScript命令和表達(dá)式，查看和修改JavaScrip