成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

新技能GET!在前端表格中花式使用異步函數(shù)的奧義

番茄西紅柿 / 3069人閱讀

摘要:實(shí)踐專家用戶的花式使用實(shí)踐專家用戶的花式使用實(shí)例演示實(shí)例演示我們用一個簡單的例子,看看在前端電子表格單元格計算中,如何使用異步函數(shù)。這一次用戶使用異步函數(shù)從服務(wù)器獲取當(dāng)前服務(wù)名,并在顯示出來。

背景

60年代時,操作系統(tǒng)中獨(dú)立運(yùn)行的單元通常是進(jìn)程。但隨著計算機(jī)技術(shù)的發(fā)展,人們發(fā)現(xiàn)在進(jìn)程運(yùn)行過程中,創(chuàng)建、撤銷與切換都要花費(fèi)較大的時空開銷。

到了80年代為了解決這一問題,出現(xiàn)了更小的獨(dú)立運(yùn)行基本單位——線程。

操作系統(tǒng)把 CPU 處理時間劃分成許多更小的時間片,在每一個獨(dú)立時間片執(zhí)行一個線程的指令,到下一個時間片繼續(xù)執(zhí)行下一線程的指令,各線程輪流執(zhí)行,由于每一個時間片時間都比較短,所有線程都會運(yùn)行,對于使用者而言就好像所有線程在同時進(jìn)行。最終達(dá)到的效果就是在編程時可以創(chuàng)建多個線程,同一時間運(yùn)行,各線程可以"并行"運(yùn)行,以完成不同的任務(wù)。

這時新的問題也出現(xiàn)了,在多帶帶線程的運(yùn)行模式之下,一段代碼調(diào)用另一段代碼時,只能采用同步調(diào)用,只有當(dāng)前代碼執(zhí)行完成返回結(jié)果之后,調(diào)用才能繼續(xù)往下執(zhí)行。用一個例子就是現(xiàn)在只有一個水槽,一匹馬想喝水只能等上一匹馬走了才能繼續(xù)喝。

而有了多線程的支持,可以采用異步函數(shù)的調(diào)用,這個問題就迎刃而解了。

異步函數(shù)原理介紹

程序中會有很多內(nèi)容,計算內(nèi)容復(fù)雜、渲染內(nèi)容繁多,在處理過程中需要花費(fèi)比較多的時間。當(dāng)某個模塊A調(diào)用了模塊B的處理內(nèi)容時,這時模塊B中的內(nèi)容就需要一些時間處理,此時模塊A如果不停地等待,就會嚴(yán)重影響程序性能。在實(shí)際情況中,就比如在前端頁面中需要進(jìn)行在線填報的數(shù)據(jù)處理,需要對數(shù)據(jù)內(nèi)容進(jìn)行計算后放入表格中展示,這是由于計算并未完成,頁面內(nèi)容也不顯示,給用戶帶來的感覺就是內(nèi)容都點(diǎn)擊運(yùn)行了,但是頁面遲遲沒有任何反饋。

出現(xiàn)了異步函數(shù)的調(diào)用之后,此時執(zhí)行的模塊A和模塊B分別屬于不同的線程。

在異步調(diào)用中,模塊A不需要等到模塊B返回內(nèi)容,就可以繼續(xù)執(zhí)行后續(xù)代碼。

模塊B中的內(nèi)容執(zhí)行完畢后,會通知模塊A:我這邊處理完畢,你記得處理后續(xù)內(nèi)容。

借助異步調(diào)用,可以把剛剛我們提到的前端頁面中顯示問題進(jìn)行優(yōu)化:把整個初始化處理放進(jìn)一個多帶帶線程,主線程啟動此線程后接著往下走,讓主窗口瞬間顯示出來。等思索需要進(jìn)行的操作的內(nèi)容時,數(shù)據(jù)計算處理就已經(jīng)在暗中處理完畢;程序開始穩(wěn)定運(yùn)行以后,異步調(diào)用還可以進(jìn)一步優(yōu)化人機(jī)交互的過程。用戶點(diǎn)擊鼠標(biāo)時進(jìn)行操作的時候,操作內(nèi)容比較費(fèi)時,點(diǎn)擊后系統(tǒng)沒有立馬作出回應(yīng),這會讓用戶的使用體驗(yàn)很糟糕。將更費(fèi)時、速度更慢的操作內(nèi)容轉(zhuǎn)為異步調(diào)用,讓主線程隨時恭候下一條消息,這樣用戶的鼠標(biāo)操作動作響應(yīng)速度更快,使用體驗(yàn)自然大大提升。

實(shí)踐:專家用戶的花式使用

實(shí)例演示

我們用一個簡單的例子,看看在前端電子表格單元格計算中,如何使用異步函數(shù)。

var ServerDecode = function () {};ServerDecode.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("DECODE", 1, 255);ServerDecode.prototype.evaluateAsync = function (context, arg1) {    $.get("decode/" + arg1, function (data, status) {        context.setAsyncResult(data);    });};spread.addCustomFunction(new ServerDecode());sheet.setFormula(0, 1, =DECODE(A1));

在這個算法中我們將設(shè)定的計算解析方法部分放在服務(wù)器上,方法名稱叫DECODE

下一步將參數(shù)用jquery.get請求發(fā)送到服務(wù)器中,然后獲取請求內(nèi)容后完成設(shè)置

然后將整個異步函數(shù)注冊進(jìn)入Spread中

最后在B1單元格中,輸入DECODE(A1)

這樣當(dāng)A1單元格內(nèi)容發(fā)生變化的時候,B1就會根據(jù)我們設(shè)定的計算規(guī)則重算成對應(yīng)內(nèi)容

異步函數(shù)的花式使用

工具總在不同人手中被挖掘出各種各樣的用法,而在去年冬天我們就收到了用戶反饋的異步函數(shù)的各種奇妙使用方式。

他們使用異步函數(shù)的參數(shù)組合成了一個SQL,發(fā)送給數(shù)據(jù)庫進(jìn)行數(shù)據(jù)查詢,并在查詢結(jié)束后顯示查詢結(jié)果。結(jié)果一切正確,但是卻出現(xiàn)了一個小問題。

在使用過程中,用戶發(fā)現(xiàn)查詢在整個過程中超過了 四次 ,詢問我們是否是公式出錯?

我們當(dāng)即開展問題排查,在查看源代碼的過程中我們發(fā)現(xiàn),在最早實(shí)現(xiàn)這個功能的時候?yàn)榱藦?qiáng)調(diào)數(shù)據(jù)重要性,當(dāng)同一個公式中出現(xiàn)多個異步函數(shù)調(diào)用時,再次計算下一個內(nèi)容時我們還會再計算一次已經(jīng)計算過的異步函數(shù)的內(nèi)容。

沒想到用戶確實(shí)會這樣使用異步函數(shù),這一部分內(nèi)容隨后也進(jìn)行整體調(diào)整。現(xiàn)已調(diào)整為每次調(diào)用只計算一次異步函數(shù)。

有了這次經(jīng)歷,再遇到用戶對異步函數(shù)的其他花里胡哨的用法,我們就見怪不怪了。

果不其然,沒多久又收到了其他用戶的花式使用反饋。

這一次用戶使用異步函數(shù)從服務(wù)器獲取當(dāng)前服務(wù)名,并在SpreadJS顯示出來。

我們發(fā)現(xiàn)這個用戶還在其中添加了格式字符串,用以獲取用戶的二維碼。同時在這里還設(shè)置了條件格式,如果用戶沒有登錄會有報錯提示。

這個例子內(nèi)容雖短,但在這里用戶將異步函數(shù)、條件、格式還有格式字符串三個功能都結(jié)合在一起使用。

總結(jié)

以上就是我們?nèi)繉Ξ惒胶瘮?shù)誕生背景和原理,以及在前端電子表格中異步函數(shù)的使用和各種神仙用戶的花式使用,到本節(jié)關(guān)于電子表格計算原理的全部內(nèi)容就已經(jīng)介紹完畢。

覺得內(nèi)容不錯點(diǎn)個贊再走吧~



本文是由葡萄城技術(shù)開發(fā)團(tuán)隊發(fā)布,轉(zhuǎn)載請注明出處:葡萄城官網(wǎng)


文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/123644.html

相關(guān)文章

  • 作為開發(fā)人員,這四類Code Review方法你都知道嗎?

    摘要:類型瞬時的代碼審查第一種類型是瞬時代碼審查,它發(fā)生在結(jié)對編程的情景中。相同的專業(yè)水平考慮進(jìn)行結(jié)對編程的另一個重要方面,是一起工作時,兩個開發(fā)者的專業(yè)水平。讓一個初級開發(fā)者和一個高級開發(fā)者進(jìn)行結(jié)對編程,效果并不好。 本文翻譯自:https://dzone.com/articles/4-... 轉(zhuǎn)載請注明出處:葡萄城官網(wǎng),葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù),賦能開發(fā)者。 沒...

    姘擱『 評論0 收藏0
  • 好棒前端文章 - 收藏集 - 掘金

    摘要:你應(yīng)該知道的種設(shè)計模式前端掘金每位開發(fā)者都努力寫出可維護(hù)的易讀的可復(fù)用的代碼。繼承關(guān)系本前端書籍整理,高清前端掘金發(fā)現(xiàn)了一個下載前端書籍的地方,分享給大家。 你應(yīng)該知道的 4 種 JavaScript 設(shè)計模式 - 前端 - 掘金每位開發(fā)者都努力寫出可維護(hù)的、易讀的、可復(fù)用的代碼。隨著應(yīng)用變得越來越大,代碼的結(jié)構(gòu)也越來越重要。設(shè)計模式驗(yàn)證了解決這個挑戰(zhàn)的重點(diǎn)——在特定環(huán)境中,對同類事物...

    Maxiye 評論0 收藏0
  • Flask 下載文名文件

    摘要:解決辦法如下測試表格我們從引入,首先對文件名進(jìn)行編碼,然后中作為的參數(shù),這時候能成功下載文件,但是文件名是編碼后的名字,要解碼的話,我們需要在里面聲明編碼格式,即這樣的話,對文件名進(jìn)行解碼,我們的文件名就是中文了。 在寫 flask 后端的時候,特別是在做數(shù)據(jù)相關(guān)的操作的時候,產(chǎn)品往往需要我們做一個導(dǎo)出數(shù)據(jù)的需求,一般都是導(dǎo)出 excel 格式的文件。 那在 flask 上,如何實(shí)現(xiàn)請...

    harriszh 評論0 收藏0
  • 前端知識整理1

    前端知識整理,包括html/css/js,但不限于這三大類,持續(xù)更新中。本人水平有限,如有錯誤或更好的答案,歡迎指正,望各位不吝指教。:) 1.HTML 2.CSS 2.1 css三欄布局實(shí)現(xiàn)方案 題目:假設(shè)高度已知,請寫出三欄布局,其中左欄、右欄寬度各為300px,中間自適應(yīng) 1.浮動布局實(shí)現(xiàn)方法:左欄、右欄分別左右浮動,定寬300px,中間不設(shè)置寬度自適應(yīng)缺點(diǎn):浮動元素脫離文檔流,需要清除浮...

    sevi_stuo 評論0 收藏0
  • 前端知識整理1

    前端知識整理,包括html/css/js,但不限于這三大類,持續(xù)更新中。本人水平有限,如有錯誤或更好的答案,歡迎指正,望各位不吝指教。:) 1.HTML 2.CSS 2.1 css三欄布局實(shí)現(xiàn)方案 題目:假設(shè)高度已知,請寫出三欄布局,其中左欄、右欄寬度各為300px,中間自適應(yīng) 1.浮動布局實(shí)現(xiàn)方法:左欄、右欄分別左右浮動,定寬300px,中間不設(shè)置寬度自適應(yīng)缺點(diǎn):浮動元素脫離文檔流,需要清除浮...

    or0fun 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<