作為HTML5標(biāo)準(zhǔn)中新推出的元素,Canvas有著較為廣泛的應(yīng)用。開發(fā)者使用它能夠在瀏覽器網(wǎng)頁中開辟一片區(qū)域,繼而可以通過JavaScript腳本在這片區(qū)域中繪制各種內(nèi)容。適當(dāng)?shù)厥褂肅anvas元素會使得應(yīng)用軟件的交互性和表現(xiàn)力得到極大的提升,然而在開發(fā)Canvas腳本的過程中也存在一些明顯的問題亟待解決。例如Canvas繪圖API較為底層,使得開發(fā)者往往需要做一些上層的封裝工作,并不能直接進(jìn)行開發(fā);通過Canvas繪制動畫時,開發(fā)者需要同時關(guān)心動畫元素的數(shù)據(jù)模型更新和視圖更新;開發(fā)Canvas腳本時結(jié)構(gòu)混亂,代碼段職責(zé)不清晰等。因此,為了幫助開發(fā)者提升工作效率,本文提出了一個用于解決以上問題的前端Canvas框架。框架主要特性包含了一套開箱即用的圖形基礎(chǔ)庫、響應(yīng)式重繪機(jī)制和允許開發(fā)者通過模板定義繪制內(nèi)容的能力。開箱即用的圖形基礎(chǔ)庫使得開發(fā)者通過聲明和組合的方式就可以完成繪制任務(wù),響應(yīng)式重繪機(jī)制使得開發(fā)者只需要維護(hù)動畫元素的數(shù)據(jù)模型,無需手動更新畫布視圖,減輕了開發(fā)者的負(fù)擔(dān)。通過模板定義圖形組件,終止了“結(jié)構(gòu)-樣式-行為”混雜的開發(fā)模式,有利于日后的快速維護(hù)。同時為了提升框架的渲染性能...

【文章頁數(shù)】：69 頁

【學(xué)位級別】：碩士

【部分圖文】：

圖２－ＵａｖａＳｃｒｉｐｔ中類、原型、實(shí)例間的關(guān)系圖??Ｆｉｇｕｒｅ?２－１?Ｄｉａｇｒａｍ?ｏｆ?ｃｌａｓｓｅｓ，?ｐｒｏｔｏｔｙｐｅｓ，?ａｎｄ?ｉｎｓｔａｎｃｅｓ?ｉｎ?ＪａｖａＳｃｒｉｐｔ??

下面介紹通過原型鏈?zhǔn)侨绾螌?shí)現(xiàn)繼承的。當(dāng)使用一個實(shí)例的屬性或方法時，??首先會現(xiàn)在該實(shí)例中搜索，如果沒有找到，則會沿著原型鏈繼續(xù)搜索，直到找到??或者到達(dá)原型鏈的末端，這就是原型搜索機(jī)制。以圖２－１的例子來說，調(diào)用??ｇｅｏｍｌｎｓｔａｎｃｅ．ｔｏＳｔｒｉｎｇＯ會經(jīng)歷三個搜索步驟：....

圖２－３?ＭＶＣ組件協(xié)作方式圖??

發(fā)者的歡迎［１５］。從概念誕生至今，ＭＶＣ也在被不斷拓展和創(chuàng)新，例如ＭＶＰ、ＭＶＶＭ??等ＭＶ＊類模式［１６］。ＭＶＣ并不是一種特定的技術(shù)，而是一種代碼編寫的理念，盡??管一直在發(fā)展，但核心沒有改變，一種典型的ＭＶＣ組件協(xié)作方式如圖２－３所示。??＾?ＭＯＤＥＬ??ＵＰＤＡＴＥＳ....

圖２－４事件監(jiān)聽實(shí)現(xiàn)原理圖??Ｆｉｇｕｒｅ?２－４?Ｅｖｅｎｔ?ｍｏｎｉｔｏｒ?ｉｍｐｌｅｍｅｎｔａｔｉｏｎ?ｓｃｈｅｍａｔｉｃ??

１．?＜ｃｉｒｃｌｃ?＼＝＂１０＂?＼＝＂１０＂?ｉ－＝＇，２（）＂?／＞??代碼片段２－１標(biāo)簽語法??ＤＳＬ編譯器最重要的功能就是將源代碼轉(zhuǎn)換成目標(biāo)語言代碼。如圖２－５所示，??編譯過程需要經(jīng)過詞法分析器、語法分析器、中間代碼生成器、目標(biāo)代碼生成器ｔｌ９１。??其中，經(jīng)過詞法分....

圖２－５編譯流程圖??Ｆｉｇｕｒｅ?２－５?Ｃｏｍｐｉｌａｔｉｏｎ?ｆｌｏｗｃｈａｒｔ??詞法分析器，也可以形象地稱它為掃描器

??圖２－４事件監(jiān)聽實(shí)現(xiàn)原理圖??Ｆｉｇｕｒｅ?２－４?Ｅｖｅｎｔ?ｍｏｎｉｔｏｒ?ｉｍｐｌｅｍｅｎｔａｔｉｏｎ?ｓｃｈｅｍａｔｉｃ??２．３?ＤＳＬ編譯器??ＤＳＬ是領(lǐng)域特定語言（ｄｏｍａｉｎ－ｓｐｅｃｉｆｉｃ?ｌａｎｇｕａｇｅ）的縮寫，它指的是專注于某??個應(yīng)用程序領(lǐng)域的計(jì)算....

本文編號：3974543