跨平臺跨瀏覽器數(shù)據(jù)標(biāo)注界面設(shè)計與實現(xiàn)分析研究 計算機科學(xué)與技術(shù)專業(yè)

目錄 前言 1第一章 緒論 21.1 研究背景及意義 21.2 數(shù)據(jù)標(biāo)注系統(tǒng)概述 21.3 本文的主要工作 51.4 本文的組織結(jié)構(gòu) 5第二章 基于標(biāo)注系統(tǒng)實現(xiàn)和兼容性問題分析 62.1 開發(fā)工具 62.2 開發(fā)技術(shù) 72.2.1 Ajax技術(shù) 72.2.2 ThinkPHP框架 92.2.3 MySQL數(shù)據(jù)庫 102.3 系統(tǒng)兼容性問題 112.3.1 主流瀏覽器概述 112.3.2 瀏覽器的兼容性問題 122.4 本章總結(jié) 14第三章 基于jQuery的多瀏覽器支持的標(biāo)注系統(tǒng)實現(xiàn) 153.1 jQuery框架概述 153.2 jQuery的兼容性優(yōu)勢 153.2.1 jQuery對象操作 153.2.2 jQuery使用對象屬性 163.2.4 jQuery封裝Ajax 163.3 本章總結(jié) 17第四章 基于動態(tài)依存弧畫圖的標(biāo)注界面優(yōu)化 184.1 cavans概述 184.2 依存弧繪制流程 184.3 畫布設(shè)計 204.3.1 畫布寬高調(diào)整 204.3.2 畫布細(xì)節(jié)處理 224.4 canvas兼容IE8 244.5 本章總結(jié) 25第五章總結(jié)與展望 265.1 本文總結(jié) 265.2 后續(xù)工作展望 26參考文獻(xiàn) 27致謝 28

摘要眾所周知，自然語言處理是機器學(xué)習(xí)中的重要環(huán)節(jié)，而自然語言處理需要大量數(shù)據(jù)作為分析基礎(chǔ)。一方面，機器學(xué)習(xí)算法需要高質(zhì)量的標(biāo)注數(shù)據(jù)，句法分析、圖像識別等算法的深入研究對各類標(biāo)注數(shù)據(jù)的需求加大；另一方面，不同的研究方向?qū)?shù)據(jù)的標(biāo)注要求各不相同，因此數(shù)據(jù)標(biāo)注就具有了非常廣泛的應(yīng)用價值。數(shù)據(jù)標(biāo)注就是對原始的數(shù)據(jù)，包括語音、文本、圖片、視頻等進(jìn)行加工處理，轉(zhuǎn)換為機器可識別信息的過程。數(shù)據(jù)標(biāo)注系統(tǒng)是指一個針對某一個特定任務(wù)，人工標(biāo)注其正確答案。以中文分詞為例，首先數(shù)據(jù)標(biāo)注系統(tǒng)中會顯示一個漢語句子，如“我是一個中國人”；然后標(biāo)注者通過鼠標(biāo)點擊動作，將句子切分為一個詞語序列“我/是/一個/中國/人”。這樣的人工標(biāo)注數(shù)據(jù)對于統(tǒng)計機器模型和算法很重要。本課題基于一個現(xiàn)有的數(shù)據(jù)標(biāo)注系統(tǒng)進(jìn)行改進(jìn)，利用jQuery框架改寫網(wǎng)頁前端，使它在不同瀏覽器、不同平臺正常工作，并基于動態(tài)依存弧畫圖對原有的界面進(jìn)行優(yōu)化，使其有更好的視覺效果。關(guān)鍵詞：數(shù)據(jù)標(biāo)注；句法標(biāo)注；jQuery；前端優(yōu)化

AbstractAsweallknow,naturallanguageprocessingisanimportantpartofmachinelearning,andnaturallanguageprocessingrequiresalargeamountofdataasthebasisforanalysis.Ontheonehand,machinelearningalgorithmsrequirehigh-qualityannotationdata.In-depthresearchonalgorithmssuchassyntaxanalysisandimagerecognitionincreasesthedemandforvarioustypesofannotationdata.Ontheotherhand,differentresearchdirectionshavedifferentrequirementsforannotationdata.Therefore,annotationhasaverywiderangeofapplications.Dataannotatingistheprocessofprocessingunprocesseddata,includingspeech,text,pictures,video,etc.,intomachine-readableinformation.Thedataannotationsystemreferstomanuallymarkingthecorrectanswerforaspecifictask.TaketheChinesewordsegmentationasanexample.First,aChinesesentenceisdisplayedinthedataannotationsystem,suchas“我是一個中國人”;thentheannotatorcutsthesentenceintoawordsequence“我/是/一個/中國/人".Suchmanuallyannotationdataisimportantforstatisticalmachinemodelsandalgorithms.ThistopicisbasedonanexistingdataannotationsystemtoimprovetheuseofjQueryframeworktorewritethefrontpageoftheweb,sothatitworksindifferentbrowsers,differentplatforms,andbasedondynamicdependencyarcdrawingtooptimizetheoriginalinterfacetomakeitbettervisualeffect.Keywords:Dataannotation;Syntaxannotation;jQuery;Front-endoptimization前言隨著互聯(lián)網(wǎng)的高速發(fā)展，人工智能越來越貼近我們的生活，而作為實現(xiàn)人工智能的一種有效方法，機器學(xué)習(xí)也成為了研究的熱點。機器學(xué)習(xí)是通過算法來分析數(shù)據(jù)，并通過這些數(shù)據(jù)進(jìn)行學(xué)習(xí)，然后來解決現(xiàn)實問題。與傳統(tǒng)軟件程序相比，機器學(xué)習(xí)不再是單純編寫程序解決問題，而是用大量的具有某種特定規(guī)范的數(shù)據(jù)來進(jìn)行訓(xùn)練“機器”，通過算法從數(shù)據(jù)中學(xué)習(xí)如何完成任務(wù)。這種具有特定規(guī)范的數(shù)據(jù)就是人們通過數(shù)據(jù)標(biāo)注平臺進(jìn)行人工標(biāo)注得來的。本文的標(biāo)注系統(tǒng)是一個句法的標(biāo)注系統(tǒng)，對句子中的詞與詞之間的關(guān)系進(jìn)行標(biāo)注，進(jìn)而有助于后續(xù)的算法研究。本文分析了各主流瀏覽器之間的差異，更好的完善前端架構(gòu)，優(yōu)化界面風(fēng)格，提高系統(tǒng)的有效利用率。本文完成的主要工作：（1）分析瀏覽器兼容性問題產(chǎn)生原因，了解瀏覽器在渲染和解析腳本時的差異。利用jQuery框架改寫前端，改進(jìn)標(biāo)注平臺瀏覽器兼容性?；趧討B(tài)依存弧畫圖對原有的界面進(jìn)行優(yōu)化，使標(biāo)注時更為舒適。

第一章 緒論本章首先介紹了數(shù)據(jù)標(biāo)注平臺的研究背景和重要意義，其次簡單介紹了本系統(tǒng)的各個組成部分及其作用，并概述了本文所做的主要工作和貢獻(xiàn)，最后一節(jié)簡單介紹了本篇論文的組織結(jié)構(gòu)。1.1 研究背景及意義隨著機器學(xué)習(xí)的不斷發(fā)展，計算機可以做越來越多的事，機器翻譯，語音識別，圖像識別，情感分析等一系列的研究越來越熱門。在這些機器學(xué)習(xí)的算法背后，是基于大規(guī)模的人工標(biāo)注數(shù)據(jù)。比如情感分析，首先需要一定量已經(jīng)人工標(biāo)注好的數(shù)據(jù)集，包括其情感對象，情感極性等重要信息，然后基于人工的標(biāo)注信息，進(jìn)而通過神經(jīng)網(wǎng)絡(luò)等工具訓(xùn)練機器算法，使得機器能夠自己識別句子的情感要素。而數(shù)據(jù)標(biāo)注系統(tǒng)是進(jìn)行人工數(shù)據(jù)標(biāo)注的重要平臺，是機器學(xué)習(xí)算法研究的重要環(huán)節(jié)。人工標(biāo)注的正確率直接決定了訓(xùn)練出來的算法模型的質(zhì)量。隨著互聯(lián)網(wǎng)的快速普及，數(shù)據(jù)標(biāo)注平臺基本都已經(jīng)做成了網(wǎng)頁模式，這樣既可以方便管理員實時查詢進(jìn)度和準(zhǔn)確率，又不需要專門的平臺或軟件。而作為一個網(wǎng)頁平臺，瀏覽器的兼容性和呈現(xiàn)效果是體現(xiàn)質(zhì)量的重要標(biāo)準(zhǔn)。1.2 數(shù)據(jù)標(biāo)注系統(tǒng)概述隨著人工智能和機器學(xué)習(xí)的大規(guī)模發(fā)展，數(shù)據(jù)標(biāo)注也成為一個新興的行業(yè)，百度阿里騰訊作為整個互聯(lián)網(wǎng)行業(yè)的領(lǐng)頭人，也早已加入其中。但是機器學(xué)習(xí)的研究方向有很多，如圖像、分詞、句法等，每一個研究方向都需要不一樣的數(shù)據(jù)，因此針對自己所需要的數(shù)據(jù)研究相對應(yīng)的數(shù)據(jù)標(biāo)注平臺很有必要。本系統(tǒng)是一個句法標(biāo)注平臺，即在一句話中標(biāo)注內(nèi)部詞語之間的修飾或搭配關(guān)系，從而刻畫句子的句法結(jié)構(gòu)。其中，root表示偽節(jié)點。我們將root指向的詞稱為句子的根節(jié)點，即句子中最重要的詞。我們所畫的修飾或搭配關(guān)系稱為依存弧，一條依存弧由三個元素構(gòu)成wi→rwj，其中w圖1.1標(biāo)注句子示例圖1.1標(biāo)注句子示例圖圖1.2例句標(biāo)注結(jié)果本系統(tǒng)中規(guī)定了以下四個條件：唯一根節(jié)點（singleroot）：一個句子只有一個根節(jié)點，，即root只有一個兒子。唯一父親節(jié)點（singlehead）：每個修飾詞必須有且僅有一個核心詞。無環(huán)（acyclic）：多個依存弧不能構(gòu)成環(huán)（不考慮弧的方向）。單向（unidirectional）：依存弧的箭頭方向由核心詞指向修飾詞。本系統(tǒng)目前規(guī)定了20中依存關(guān)系類型，我們把關(guān)系類型標(biāo)簽分為三大類：謂語對應(yīng)的依存關(guān)系標(biāo)簽：root,sasubj-obj,sasubj,dfsubj;單句內(nèi)部主干關(guān)系標(biāo)簽：subj,subj-in,obj,att,adv,cmp；單句內(nèi)部其他關(guān)系標(biāo)簽：coo,pobj,iobj,de,adjct,app,exp,punc,frag,repet。 表1.1給出了目前20種依存關(guān)系類型的詳細(xì)介紹。表1.1依存關(guān)系類型匯總表關(guān)系標(biāo)簽說明例句root標(biāo)注結(jié)果rootrootsentenceroot（根節(jié)點）我愛媽媽sasubj-objroot愛sasubj-objsasubj-objsamesubjectandobject（同主語同賓語）我一直在研究和思考這個問題sasubj研究思考sasubjsasubjsamesubject（同主語）我走進(jìn)操場打籃球dfsubj走進(jìn)打dfsubjdfsubjdifferentsubject（不同主語）我喜歡看書，但我討厭看電影subj喜歡討厭subjsubjsubject（主語）我愛媽媽subj-in我愛subj-insubj-insubjectinsideasubject-predicatepredicate（主謂謂語中的內(nèi)部主語）他確實頭疼頭疼objobject（賓語）我愛媽媽objpred愛媽媽objpredpredpredicate（謂語）命令他掃地att他掃地attattattributemodifier（定語）國家主席adv國家主席advadvadverbialmodifier（狀語）非常喜歡cmp非常喜歡cmpcmpcomplementmodifier（補語）洗干凈手coo coo coocoordinationconstruction（并列結(jié)構(gòu)）鮮花和掌聲pobj鮮花掌聲pobjpobjprepositionobject（介賓）在家看書在家iobjindirect-object（間賓）給他書iobj deiobj dedede-construction（的結(jié)構(gòu)）這是他的他的adjctadjunct（附加成分）我走了adjctapp走了adjctappappappellation（稱呼）老師，你好exp老師好expexpexplanation（解釋）普京（俄羅斯總統(tǒng)）punc普京總統(tǒng)puncpuncpunctuation（標(biāo)點）我愛媽媽。flagflag愛。flagflagflagfragment（片段）你，我，中國。repet你我中國repetrepetrepetition（重復(fù)）你吃，吃飯了嗎？吃吃1.3 本文的主要工作本文主要基于一個現(xiàn)有的數(shù)據(jù)標(biāo)注系統(tǒng)，測試該系統(tǒng)在各大瀏覽器上能否正常使用，在深入分析各大瀏覽器的差異的基礎(chǔ)上改進(jìn)系統(tǒng)的兼容性。同時基于JavaScript對系統(tǒng)的界面進(jìn)行美化，加強了交互性和可操作性，使系統(tǒng)有更好的呈現(xiàn)效果。本文的主要工作如下：通過對主流瀏覽器的兼容性分析，了解它們在渲染和解析腳本時的差異。利用jQuery框架重寫JavaScript腳本，探索jQuery框架的兼容性優(yōu)勢?；趧討B(tài)依存弧畫圖對原有的界面進(jìn)行優(yōu)化，使標(biāo)注界面有更好的呈現(xiàn)效果。1.4 本文的組織結(jié)構(gòu)本文共分為五章，各章內(nèi)容安排如下：第一章：緒論。本章介紹了課題的研究背景及意義、數(shù)據(jù)標(biāo)注系統(tǒng)概述、本文的主要工作，最后簡單介紹了本文的組織結(jié)構(gòu)。第二章：基于標(biāo)注系統(tǒng)實現(xiàn)和兼容性問題分析。本章介紹了標(biāo)注系統(tǒng)的設(shè)計過程中所采用的開發(fā)工具和相關(guān)技術(shù)。同時提出目前系統(tǒng)存在的兼容性問題并解釋其出現(xiàn)原因。第三章：基于jQuery的多瀏覽器支持的標(biāo)注系統(tǒng)實現(xiàn)。本章介紹了jQuery框架，分析了jQuery的兼容性優(yōu)勢的三大方面，基于jQuery對標(biāo)注系統(tǒng)進(jìn)行改進(jìn)。第四章：基于動態(tài)依存弧畫圖的標(biāo)注界面優(yōu)化。本章介紹了canvas畫布的一系列優(yōu)化：通過依存弧高度自動更新畫布高度；橫向錯開處理；變折線為弧線以實現(xiàn)縱向錯開；利用高度層級來定義依存弧的高度；使IE8兼容canvas標(biāo)簽。第五章：總結(jié)全文，提出未來工作的設(shè)想與展望。

第二章 基于標(biāo)注系統(tǒng)實現(xiàn)和兼容性問題分析本章詳細(xì)闡述了標(biāo)注系統(tǒng)的設(shè)計過程中所采用的開發(fā)工具和相關(guān)技術(shù)，通過Ajax、ThinkPHP、MySql介紹了系統(tǒng)的實現(xiàn)過程。進(jìn)而通過瀏覽器內(nèi)核的不同提出瀏覽器的兼容性，拋出目前系統(tǒng)存在的兼容性問題并解釋其出現(xiàn)原因。2.1 開發(fā)工具一個網(wǎng)站的制作首先要在本地進(jìn)行一系列編寫和調(diào)試，而XAMPP就是一款非常強大的建站集成軟件包。它整合了Apache和MySQL，可以在本地進(jìn)行網(wǎng)頁測試。通過以下步驟進(jìn)行XAMPP的安裝和配置[1]：（1）通過官網(wǎng)下載XAMPP安裝包并點擊安裝，選擇安裝路徑點擊“下一步”直至安裝完成。（2）打開xampp文件夾下xamp-control.exe，進(jìn)入xampp控制面板。如圖2.1。（3）點擊Apache和MySQL的Start，Apache的默認(rèn)端口號為80和443，如果啟動失敗，80端口被占用，在Config中修改httpd.conf，將Listen80改為Listen8080，將ServerNamelocalhost:80改為ServerNamelocalhost:8080，然后重啟Apache。（4）將系統(tǒng)源代碼放入xampp文件夾下的htdocs文件夾中。或者在Config中修改httpd.conf修改DocumentRoot和Directory路徑為源代碼路徑，如圖2.2，然后重啟Apache。（5）至此，已經(jīng)安裝配置完XAMPP，打開瀏覽器在地址欄輸入http://localhost或就能訪問所寫的網(wǎng)頁了，如圖2.3即是本系統(tǒng)的登錄頁面。圖2.1xampp控制面板圖2.2圖2.1xampp控制面板圖2.2源代碼路徑修改圖2.3標(biāo)注系統(tǒng)登錄界面2.2 開發(fā)技術(shù)標(biāo)注系統(tǒng)主要以PHP為開發(fā)語言，采用ThinkPHP框架結(jié)構(gòu)，利用典型三層架構(gòu)，劃分為數(shù)據(jù)層、視圖層和控制層。MVC模式將數(shù)據(jù)和視圖分離，提高開發(fā)效率，便于后期維護(hù)和重用。系統(tǒng)采用B/S體系結(jié)構(gòu)，用戶只需要有瀏覽器就能使用標(biāo)注系統(tǒng)，跨平臺性強。頁面設(shè)計方面，運用CSS+DIV布局，使頁面風(fēng)格統(tǒng)一；前后端數(shù)據(jù)交互方面，使用Ajax技術(shù)增加了頁面交互的友好性；數(shù)據(jù)庫方面，使用MySQL為后臺數(shù)據(jù)庫，保障了系統(tǒng)的穩(wěn)定和擴充。下面主要說明Ajax和ThinkPHP的運用。2.2.1 Ajax技術(shù)Ajax即“AsynchronousJavascriptAndXML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，它提供了一種方便、可靠的方案使得頁面和服務(wù)器之間實現(xiàn)數(shù)據(jù)信息交流[2]。Ajax技術(shù)的出現(xiàn)打破了傳統(tǒng)網(wǎng)頁必須重新加載整個網(wǎng)頁才能更新內(nèi)容的桎梏，實現(xiàn)了異步更新、實時處理，如圖2.4。圖圖2.4傳統(tǒng)Web應(yīng)用模式和Ajax模式的對比Ajax模式在更新屏幕時，為用戶提供了更大的靈活性，具有以下的優(yōu)點[3]：（1）減輕了服務(wù)器的負(fù)擔(dān)，通過“按需讀取”的原則，最大程度上減少冗余的請求和相應(yīng)，降低服務(wù)器的負(fù)擔(dān)。（2）更新頁面時無需刷新，減少用戶的等待時間。特別在數(shù)據(jù)量大的情況下，不會出現(xiàn)像Reload那樣白屏的情況。Ajax使用XMLHTTPRequest對象發(fā)送請求并得到服務(wù)器響應(yīng)，在不重新載入整個頁面的情況下用JavaScript操作DOM最終更新頁面，只有當(dāng)數(shù)據(jù)接收完畢之后才更新相應(yīng)內(nèi)容，這種更新是瞬間完成的，用戶幾乎感覺不到。（3）能夠把服務(wù)器承擔(dān)的一些工作轉(zhuǎn)移到客戶端，減輕服務(wù)器端負(fù)擔(dān)。（4）可以調(diào)用XML等外部數(shù)據(jù)，并進(jìn)一步促進(jìn)頁面的呈現(xiàn)和數(shù)據(jù)的分離。（5）已經(jīng)被標(biāo)準(zhǔn)化，使用廣泛，無需下載其他插件。但是Ajax在使用過程中還是有著一些不足：（1）Ajax大量使用JavaScript和Ajax引擎，而這個取決于瀏覽器的支持[4]。不同的瀏覽器提供的XMLHttpRequest的方式不一樣。所以腳本在使用Ajax時必須進(jìn)行針對各個瀏覽器的兼容性測試。（2）Ajax技術(shù)使得更新頁面時局部刷新，則意味著整個網(wǎng)站沒有完全刷新，所以瀏覽器的回退功能是無效的。用戶有時會不知道數(shù)據(jù)是否已經(jīng)更新過，這就需要在明顯位置提醒用戶數(shù)據(jù)已更新[5]。2.2.2 ThinkPHP框架PHP（HypertextPreprocessor超文本預(yù)處理器）是一門通用開源腳本語言，它將程序嵌入到HTML文檔中執(zhí)行，執(zhí)行效率比完全生成HTML標(biāo)記的CGI高許多，PHP還可以執(zhí)行編譯后代碼，編譯可以達(dá)到加密和優(yōu)化代碼運行，使代碼運行得更快[6]。同時PHP支持各類數(shù)據(jù)庫和操作系統(tǒng)，有很強的跨平臺性。ThinkPHP是一款開源便捷的面向?qū)ο蟮妮p量級PHP開發(fā)框架，它是基于MVC設(shè)計模式的Web框架，通過適當(dāng)?shù)臄?shù)據(jù)交換、表現(xiàn)層編碼和對各種Web應(yīng)用項目共同特點的整合，有助于促進(jìn)快速開發(fā),建立更穩(wěn)定的應(yīng)用,節(jié)約開發(fā)時間,減少了代碼復(fù)用[7]。在ThinkPHP框架中，MVC的分層如下[8]：（1）模型（Model）層：模型層是由Model類構(gòu)成，在較大的項目中，可支持多層Model，設(shè)計十分簡便，都是繼承于系統(tǒng)的Model類。（2）視圖（View）層：視圖層處理數(shù)據(jù)的顯示部分，通常由模板引擎組成。（3）控制器（Controller）層：控制器層處理用戶交互部分，從視圖讀取數(shù)據(jù)控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。它由核心控制器與業(yè)務(wù)控制器兩方面組成，核心控制器由系統(tǒng)內(nèi)部的App類完成,負(fù)責(zé)應(yīng)用的調(diào)度控制,包括HTTP請求攔截和轉(zhuǎn)發(fā)、加載配置等,業(yè)務(wù)控制器則由用戶定義的Action類完成[9]。在標(biāo)注系統(tǒng)中，自定義了IndexAction、DataOperationAction、LabelAction、LoginAction等控制器類，如圖2.5。在各個類中封裝了一系列方法以滿足項目的功能需求，如圖2.6。圖2.5圖2.5控制器類圖2.6控制器類中的方法2.2.3 MySQL數(shù)據(jù)庫標(biāo)注系統(tǒng)采用主流的MySQL數(shù)據(jù)庫，通過PHP語言實現(xiàn)數(shù)據(jù)庫的增刪改查。在數(shù)據(jù)庫存有6張表，包括4張分批數(shù)據(jù)批次表和2張公共表，如圖2.7：（1）數(shù)據(jù)批次名-record-annotation：標(biāo)注表，記錄標(biāo)注的相關(guān)信息，包括標(biāo)注任務(wù)序號、標(biāo)注人、標(biāo)注結(jié)果等。（2）數(shù)據(jù)批次名-record-expert-check：檢查表，記錄專家檢查的相關(guān)信息，包括標(biāo)注任務(wù)序號、標(biāo)注人、專家結(jié)果等。（3）數(shù)據(jù)批次名-record-study：學(xué)習(xí)表，記錄標(biāo)注學(xué)習(xí)的相關(guān)信息，包括學(xué)習(xí)人員、學(xué)習(xí)時間等。（4）數(shù)據(jù)批次名-task：任務(wù)表，記錄標(biāo)注任務(wù)相關(guān)信息，包括標(biāo)注任務(wù)序號、任務(wù)句子、任務(wù)所需標(biāo)注的修飾詞、任務(wù)答案等。（5）data-batch：數(shù)據(jù)批次表，記錄數(shù)據(jù)批次相關(guān)信息，包括數(shù)據(jù)批次名、數(shù)據(jù)批次分類、該批次任務(wù)總數(shù)、作業(yè)中用到的全體依存關(guān)系等。 （6）user-info：用戶信息表，記錄用戶相關(guān)信息，包括用戶名、登錄密碼、數(shù)據(jù)批次、標(biāo)注進(jìn)度等。圖2.7數(shù)據(jù)庫圖2.7數(shù)據(jù)庫表2.3 系統(tǒng)兼容性問題標(biāo)注系統(tǒng)采用B/S體系結(jié)構(gòu)，與C/S架構(gòu)不同的是不需要安裝特定的軟件，用戶只需要有瀏覽器就能使用標(biāo)注系統(tǒng)，跨平臺性強。但隨之而來的就是瀏覽器的兼容性問題。這一節(jié)通過分析了解瀏覽器的歷史，分析瀏覽器兼容性問題產(chǎn)生的原因，進(jìn)而解決標(biāo)注系統(tǒng)實現(xiàn)過程中遇到的兼容性問題。2.3.1 主流瀏覽器概述互聯(lián)網(wǎng)的發(fā)展使得瀏覽器成為我們生活中密不可分的一部分，無論是娛樂還是學(xué)習(xí)，都已經(jīng)離不開瀏覽器，在這些形形色色的瀏覽器中，市場占有率比較高的是下列瀏覽器[10]：（1）IE瀏覽器，誕生于1994年，當(dāng)時微軟為了對抗瀏覽器霸主網(wǎng)景NetscapeNavigator，在Windows系統(tǒng)中開發(fā)了自己的瀏覽器InternetExplorer，獲得了巨大的成功。IE瀏覽器使用的是Trident內(nèi)核，俗稱IE內(nèi)核。（2）Opera瀏覽器，誕生于1995年，是挪威OperaSoftwareASA公司旗下的一款瀏覽器，最初采用的是自主研發(fā)的Presto內(nèi)核，被收購后跟隨使用Chrome瀏覽器的內(nèi)核。（3）Safari瀏覽器，誕生于2003年，蘋果公司在手機平臺上開發(fā)Safari瀏覽器，利用手機市場的巨大優(yōu)勢迅速占領(lǐng)市場，結(jié)束了只能在PC端瀏覽網(wǎng)頁的時代。Safari瀏覽器使用的是Webkit內(nèi)核。（4）Firefox，誕生于2004年，網(wǎng)景公司在被收購后推出的一款瀏覽器，在第二次瀏覽器大戰(zhàn)中大放光彩。Firefox瀏覽器使用的是Gecko內(nèi)核，俗稱Firefox內(nèi)核。（5）Chrome瀏覽器，誕生于2008年，google旗下一款追求簡潔、快速、安全的瀏覽器，至今一直受人追捧，是當(dāng)今占據(jù)市場份額最大的瀏覽器，也是最快速的瀏覽器之一。Chrome瀏覽器最先使用的是Webkit內(nèi)核，后來改用Blink內(nèi)核。（6）Edge瀏覽器，誕生于2015年，微軟內(nèi)置于Windows10操作系統(tǒng)中的瀏覽器，使用EdgeHTML內(nèi)核。表2.1顯示了2018年4月PC端瀏覽器全球市場的占有率，上述六大主流瀏覽器占據(jù)了97.19%的市場份額，幾乎統(tǒng)治了整個PC端瀏覽器。表2.2顯示了同月PC端瀏覽器中國市場的占有率，QQ瀏覽器和搜狗瀏覽器也占有一席之地。除此以外，360、百度等瀏覽器也有一定的市場。不過大多數(shù)的國產(chǎn)瀏覽器都是使用上述主流瀏覽器的一個或兩個核，因此，在做網(wǎng)頁時只要解決了上述主流瀏覽器的兼容性，基本就能解決兼容性問題。表2.12018年4月PC端瀏覽器全球市場占比瀏覽器ChromeFirefoxIESafariEdgeOperaOther市場占比66.17%11.78%7.17%5.48%4.26%2.33%2.81%表2.22018年4月PC端瀏覽器中國市場占比瀏覽器ChromeQQIEFirefox搜狗EdgeOther市場占比57.84%11.27%9.42%5.73%5.28%2.55%7.91%2.3.2 瀏覽器的兼容性問題瀏覽器兼容性問題是指同一網(wǎng)頁在不同瀏覽器上的顯示效果不一致的問題[11]。本節(jié)總結(jié)了常見的瀏覽器兼容性問題，分析了產(chǎn)生瀏覽器兼容性問題的原因，并給出相應(yīng)的解決辦法。隨著網(wǎng)絡(luò)技術(shù)的快速發(fā)展，瀏覽器軟件數(shù)量越來越多，版本更新也越來越快，這些因素直接導(dǎo)致瀏覽器兼容性問題日益突出。只能在指定瀏覽器瀏覽的網(wǎng)頁必然不能滿足用戶的需求，解決瀏覽器兼容性問題刻不容緩。瀏覽器內(nèi)核的不同是導(dǎo)致兼容性問題的直接原因。瀏覽器內(nèi)核是瀏覽器的核心，是基于網(wǎng)頁標(biāo)記語言顯示網(wǎng)頁內(nèi)容的程序或者模塊[12]。瀏覽器的內(nèi)核分為兩部分，渲染引擎（layoutengineer或renderingengineer）和JS引擎。渲染引擎負(fù)責(zé)獲取網(wǎng)頁內(nèi)容（HTML、CSS等）加以整理計算，然后再顯示。渲染引擎決定了瀏覽器是如何顯示網(wǎng)頁信息的[13]。不同瀏覽器使用的內(nèi)核不同，直接導(dǎo)致了瀏覽器對網(wǎng)頁的解析有出入。渲染相關(guān)的兼容性問題主要指的是頁面顯示上的問題。網(wǎng)頁設(shè)計經(jīng)過多代發(fā)展，已經(jīng)從傳統(tǒng)的表格式布局演變成DIV+CSS的布局，這種布局方式將頁面內(nèi)容與樣式分離，方便網(wǎng)頁的重構(gòu)和修改。不同的瀏覽器內(nèi)核對HTML和CSS的解析不同引起了下列主要的渲染相關(guān)兼容性問問題：（1）margin和padding默認(rèn)大小不同。解決辦法：在CSS文件中將margin和padding設(shè)為0。*{margin:0;padding:0;}（2）hr標(biāo)簽的默認(rèn)對齊方式不同。解決辦法：使用align顯示設(shè)置對齊方式或使用CSS屬性設(shè)置對齊方式。 <hralign=”left”>或<hrstyle="text-align:left"/> （3）幾個img標(biāo)簽排列的時候，瀏覽器都會有默認(rèn)的間距。解決辦法：為img標(biāo)簽添加float屬性。 （4）Firefox在點擊鏈接時出現(xiàn)虛線邊框。解決辦法：給a標(biāo)簽設(shè)置outline屬性。 a{outline:none;} （5）IE低版本盒模型padding包含在content內(nèi)。解決方式：用box-sizing屬性把盒模型統(tǒng)一成低版本盒模型。JS引擎負(fù)責(zé)JS代碼的解析，通過JS可以進(jìn)行網(wǎng)頁交互，但不同的瀏覽器對JS代碼的事件支持也有較大差異，這是瀏覽器兼容性問題的又一大原因。腳本相關(guān)的兼容性問題是指在執(zhí)行JavaScript腳本時產(chǎn)生的兼容性問題，這是由于不同的JS引擎在解析JS代碼的方法不同，導(dǎo)致結(jié)果可能會有出入。常見的腳本相關(guān)的兼容性問題有以下這些[14]：（1）HTML對象的獲取問題。獲取HTML對象JS代碼中的常用操作。在IE瀏覽器中可以使用document.getElementById(“idName”)或者ie:document.idname獲取HTML對象，而在非IE瀏覽器中只能使用document.getElementById(“idName”)來獲取HTML對象。解決辦法：統(tǒng)一使用document.getElementById(“idName”)來獲取HTML對象。 （2）集合對象下標(biāo)問題。Firefox不支持使用()進(jìn)行下標(biāo)運算。解決方法：統(tǒng)一使用[]進(jìn)行下標(biāo)運算。 （3）獲取鼠標(biāo)位置問題。在IE中可以用event.x和event.y獲取位置，而在Firefox中使用的是event.pageX和event.pageY。解決辦法：varx=event.x?event.x:event.pageX。 （4）定義常量問題。IE瀏覽器不支持const關(guān)鍵字。解決辦法：統(tǒng)一使用var進(jìn)行常量定義。 （5）childNodes的問題。在Firefox中，childNodes中會插入空白文本節(jié)點。解決辦法：使用node.getElementsByTagName()來回避使用parentNode.childNodes。 （6）window.event問題。在Firefox中并不支持window.event。解決辦法：vartheEvent=window.event?window.event:arguments.callee.caller.arguments[0]。 （7）判斷鼠標(biāo)按鍵問題。在IE9、IE10中左鍵是theEvent==1，中鍵是theEvent==4，右鍵是theEvent==2。在其他瀏覽器中左鍵是theEvent==0，中鍵是theEvent==1，右鍵是theEvent==2。解決辦法：本數(shù)據(jù)標(biāo)注系統(tǒng)中只需要使用到左鍵和右鍵，所以在判斷左鍵時只要判斷theEvent.button==0||theEvent.button==1。2.4 本章總結(jié)本章首先講了標(biāo)注系統(tǒng)的開發(fā)工具和相關(guān)技術(shù)。在前端主要是DIV+CSS框架搭建頁面，通過JavaScript實現(xiàn)標(biāo)注人員和頁面的交互。在后端使用PHP處理數(shù)據(jù)，將數(shù)據(jù)保存在MySQL數(shù)據(jù)庫中。前后端數(shù)據(jù)交互是基于Ajax進(jìn)行，而交流的信息則通過Json字符串傳達(dá)。開發(fā)工具主要用到XAMPP集成軟件包，可以直接搭建本地服務(wù)器和MySQL數(shù)據(jù)庫，可以非常方便地進(jìn)行本地測試。然后分析了瀏覽器的兼容性問題，這是在開發(fā)網(wǎng)頁時經(jīng)常遇到的棘手問題，原因在于瀏覽器數(shù)量繁多，兼容性問題繁瑣，需要進(jìn)行大量的測試才能找到問題所在。但是這又是不得不解決的問題，開發(fā)者不能指定用戶使用何種瀏覽器訪問網(wǎng)頁，所以只能盡可能多的去兼容更多的瀏覽器。解決兼容性問題的方法其一是使用規(guī)范的網(wǎng)頁開發(fā)語言；其二使用CSShack針對不同的瀏覽器CSS樣式解析不同而編寫其特定的CSS樣式；其三是使用jQuery等框架來編寫JavaScript腳本。

第三章 基于jQuery的多瀏覽器支持的標(biāo)注系統(tǒng)實現(xiàn)本系統(tǒng)的一個重要的改進(jìn)工作就是使用jQuery重寫JavaScript腳本，精簡代碼量，提高系統(tǒng)的兼容性，同時為后續(xù)的工作提供方便。3.1 jQuery框架概述jQuery是一個快速，小型且功能豐富的JavaScript函數(shù)庫，目前的使用頻率遠(yuǎn)超Dojo、Prototype等框架[15]。jQuery奉行“writeless,domore”的原則，旨在為開發(fā)人員提高開發(fā)效率。它封裝了一整套方法，包括HTML元素的操作，事件的處理，動畫效果和前后端交互，使代碼變得簡單得多。作為一個JavaScript庫，jQuery具有以下優(yōu)點：（1）jQuery具有較強的瀏覽器兼容性，因為它將不同瀏覽器支持的JavaScript語法的區(qū)別封裝起來，使得用戶在使用時感受不到這種差異。（2）通過js文件的引用，可以將jQuery的腳本與HTML代碼分開編寫，這樣既利于后期功能的實現(xiàn)和維護(hù)，也使HTML代碼可讀性更強。（3）jQuery支持各類CSS選擇器，樣式修改簡單方便。（4）代碼簡練，支持鏈?zhǔn)讲僮?。?）擴展性強，在有需求時利用jQuery提供的接口為其擴展功能。3.2 jQuery的兼容性優(yōu)勢JavaScript腳本在瀏覽器兼容性方面的問題主要有以下三種，根據(jù)這三類問題，jQuery有著相應(yīng)的解決方案：3.2.1 jQuery對象操作在網(wǎng)站開發(fā)時，會經(jīng)常在JavaScript腳本中對HTML對象進(jìn)行操操作，但是不同的瀏覽器在操作HTML對象時用法不同，例如在IE瀏覽器中，可以直接通過對象的ID屬性來獲取該對象，而在其他瀏覽器中不行，這就要求網(wǎng)站開發(fā)人員只能使用document.getElementById(“idName”)的方式來獲取對象。而使用jQuery的選擇器就非常方便： ID選擇器：$(“#idName”)等價于document.getElementById(“idName”) 標(biāo)簽選擇器：$(“tagName”)等價于document.getElementsByTagName(“tagName”) 樣式選擇器：$(“.className”)等價于document.getElementsByClassName(“className”) 但是前者獲取的是jQuery對象，后者獲取的是DOM對象，兩者在使用方法上不一樣，但兩者可以相互轉(zhuǎn)化。 jQuery在對象操作方面最方便的特點是它支持鏈?zhǔn)讲僮?，因為每一步j(luò)Query操作都返回jQuery對象。例如：$(“select”).addClass(“style”).find(“option”).eq(0).val(“adv”)，一行代碼既對select對象添加了樣式，又對子對象option的第一個元素設(shè)值，這種操作大大精簡了代碼量，增強了代碼重用。3.2.2 jQuery使用對象屬性HTML對象都有著自己的屬性，雖然這些屬性都能被不同瀏覽器識別，但由于各瀏覽器對這些屬性的解釋不同，在使用這些屬性時所得到的結(jié)果也有差異[16]。例如offset一系列屬性，它們在定位弧的位置以及依存關(guān)系選項框的彈出位置時非常重要。在IE和Opera等瀏覽器中，offsetParent屬性會返回當(dāng)前元素的父元素，而在Firefox瀏覽器則返回body元素；offsetLesft會返回當(dāng)前元素距離offsetParent元素左側(cè)的距離，因此不同瀏覽器offsetParent屬性值得不同直接導(dǎo)致offsetLeft屬性值的差異，這種問題想通過JavaScript解決是比較麻煩的。而在jQuery中對這類屬性做了專門的封裝處理。在jQuery中，offset()就是用于獲取這兩個屬性的方法。這個方法統(tǒng)一了瀏覽器對offset一系列屬性的解釋，通過offset().left和offset().top就可以直接對獲取當(dāng)前對象相對于文檔的位置。3.2.4 jQuery封裝Ajax在2.2.1節(jié)Ajax技術(shù)中分析了Ajax的不足：Ajax大量使用JavaScript和Ajax引擎，而這個取決于瀏覽器的支持。不同的瀏覽器提供的XMLHttpRequest的方式不一樣，所以腳本在使用Ajax時必須進(jìn)行針對各個瀏覽器的兼容性測試。使用傳統(tǒng)的方法進(jìn)行Ajax應(yīng)用開發(fā)包括一系列步驟，整個編程過程頗為繁瑣。而jQuery對XMLHttpResquest對象進(jìn)行良好的封裝，提供一套完整的Ajax功能，極大地簡化了Ajax應(yīng)用的開發(fā)過程使用戶在處理Ajax的時候能夠?qū)Ｐ奶幚順I(yè)務(wù)邏輯，而無需關(guān)注復(fù)雜的瀏覽器兼容性和對象的創(chuàng)建和使用問題[17]。在通過Ajax發(fā)送和接收消息時，采用JSON為數(shù)據(jù)交換格式。JSON是一個輕量級的數(shù)據(jù)交換格式，各種不同的服務(wù)器端技術(shù)和JavaScript技術(shù)本身都可以輕松解析JSON，它可以在活對象和用于交換的格式之間進(jìn)行雙向轉(zhuǎn)義[18]。JSON對象是一個鍵值對數(shù)組。每個對象都以“{”開始，“}”結(jié)束，鍵值對之間用“，”分隔，鍵值對以“name:value”的格式呈現(xiàn)。value可以是由雙引號括起來的字符串、數(shù)值、true、false、null、對象或者數(shù)組，同時這些結(jié)構(gòu)可以互相嵌套。在jQuery中使用$.ajax([option])的方法來實現(xiàn)Ajax，其中可選參數(shù)[option]為$.ajax()方法中的請求設(shè)置，常見的選項如下： （1）url：發(fā)送請求的地址； （2）type：http請求方式（get或post）； （3）async：true為異步請求，false為同步請求； （4）data：發(fā)送到服務(wù)器的數(shù)據(jù)； （5）success：請求成功后調(diào)用的回調(diào)函數(shù)； （6）error：請求失敗后調(diào)用的回調(diào)函數(shù)。 例如在標(biāo)注系統(tǒng)的登錄的過程中使用的$.ajax()方法，如圖3.1。圖3.1A圖3.1Ajax登錄驗證3.3 本章總結(jié)本章主要講了基于jQuery的多瀏覽器支持的標(biāo)注系統(tǒng)實現(xiàn)。首先介紹了jQuery框架，分析了jQuery的兼容性優(yōu)勢的三大方面，第一是方便HTML對象的獲??；第二是統(tǒng)一HTML對象屬性的操作；第三是兼容各瀏覽器Ajax的用法，采用$.ajax([option])方法來實現(xiàn)Ajax。

第四章 基于動態(tài)依存弧畫圖的標(biāo)注界面優(yōu)化這一章主要介紹了標(biāo)注系統(tǒng)中畫布的顯示技術(shù)和依存弧的不斷優(yōu)化過程。作為一個標(biāo)注系統(tǒng)，最核心的部分就是通過界面顯示出來所標(biāo)注的內(nèi)容，讓系統(tǒng)有較好的呈現(xiàn)效果，這樣標(biāo)注才會更為快捷方便。4.1 cavans概述cavans是HTML5中新定義的特性，IE8及以下的瀏覽器不兼容。canvas相當(dāng)于一個圖形容器，在這個容器中，可以使用JavaScript腳本來繪制想要的圖形。在標(biāo)注系統(tǒng)中就是使用canvas來繪制依存弧，如圖1.2。使用canvas時首先在HTML文件中插入canvas標(biāo)簽： <canvasid="canvas"width='1000'height='200'style="border:0px"> Yourbrowserdosen'tsupporttheHTML5canvas. </canvas>這樣如果瀏覽器支持canvas，則畫布會覆蓋文字區(qū)域，反之就會顯示瀏覽器不支持canvas標(biāo)簽。4.2 依存弧繪制流程JavaScript腳本中定義了兩個數(shù)組，chosenModifier和chosenHead，分別存放修飾詞和核心詞的id，它們有著一一對應(yīng)的關(guān)系，索引號相同的一組為一條依存弧。在頁面中，句子中的每一個詞對應(yīng)著一個<td>標(biāo)簽，id從0開始計數(shù)，這樣方便于繪制依存弧。當(dāng)鼠標(biāo)點擊某一個詞時，通過window.event.button獲取鍵值來判斷左鍵還是右鍵，點擊左鍵時判斷是在選擇核心詞還是修飾詞，點擊修飾詞時彈出依存關(guān)系選項框，選擇后畫出依存弧。當(dāng)右鍵點擊已畫的修飾詞時，會刪除這條依存弧，并在chosenModifier和chosenHead數(shù)組中刪除這兩個詞。當(dāng)全部修飾詞都畫完后可以進(jìn)行提交，如果在繪制過程中需要重畫可以點擊“重做”按鈕恢復(fù)到初始狀態(tài)。如遇到詩文、分詞錯誤、病句等問題可以點擊“詩句|古文”、“分詞錯誤”、“病句”自動繪制依存弧然后進(jìn)行提交。具體繪制流程圖如圖4.1。圖4.1依存弧繪制流程圖開始點擊詞語核心詞=修飾詞數(shù)量？是否為圖4.1依存弧繪制流程圖開始點擊詞語核心詞=修飾詞數(shù)量？是否為左擊？加入核心詞加入修飾詞選擇依存關(guān)系畫依存弧NN符合撤銷條件？N撤銷刪除該依存弧彈出警告提交？修飾詞全部有核心詞？結(jié)束提示未標(biāo)注完成NYNYYYY4.3 畫布設(shè)計在原有的系統(tǒng)中，畫布的大小是通過句子的詞數(shù)來固定的，如圖4.2，這樣就會導(dǎo)致稍微長一點的句子的畫布就會超過一頁，但實際標(biāo)注時依存弧幾乎不會占滿整個畫布，從而雖然實際繪制弧線不高但顯示內(nèi)容超過一頁，出現(xiàn)滾動條，如圖4.3。圖4.2設(shè)置畫布大小圖4.3原有圖4.2設(shè)置畫布大小圖4.3原有系統(tǒng)標(biāo)注界面4.3.1 畫布寬高調(diào)整初始畫布的固定寬高太大直接導(dǎo)致出現(xiàn)滾動條，頁面不美觀且用戶標(biāo)注不方便，而初始畫布高度不夠又可能使得較長的依存弧畫不下。所以就想到使用動態(tài)刷新的方法，將初始畫布的寬度設(shè)為句子的長度，這樣可以避免短句子出現(xiàn)橫向滾動條；將初始畫布的高度設(shè)置為200px，如圖4.4。當(dāng)計算到某一條依存弧的高度大于190px，即距離畫布上邊緣的高度小于10px時，動態(tài)更新畫布的高度，如圖4.5。由于畫布高度改變后畫布的內(nèi)容會清空，因此需要調(diào)用draw()函數(shù)將chosenModifier和chosenHead數(shù)組重新繪制。圖4.4設(shè)置畫布大小圖4.4設(shè)置畫布大小圖4.5根據(jù)圖4.5根據(jù)依存弧高度動態(tài)刷新畫布高度動態(tài)刷新帶來的一個新的問題就是如果先繪制了一條較高的依存弧，當(dāng)撤銷這條弧時，畫布仍然保持?jǐn)U大的高度，為了使得撤銷較高弧后恢復(fù)到初始高度，創(chuàng)建了drawn_height數(shù)組來保存每條弧的高度，與chosenModifier和chosenHead一一對應(yīng)。同時在撤銷一條依存弧時使用高度恢復(fù)函數(shù)resize_after_revoke()將drawn_height數(shù)組中的最大值與初始畫布高度進(jìn)行比較，選取較大的作為畫布高度，如圖4.6，這樣就能實現(xiàn)在繪制和撤銷時同時更新畫布高度。圖4.6高度恢復(fù)圖4.6高度恢復(fù)函數(shù)4.3.2 畫布細(xì)節(jié)處理在繪制依存弧的過程中有些詞可能既作為核心詞，也作為修飾詞，因此有至少兩條弧會在這個詞上匯聚，這就需要將出弧和入弧錯開，否則會導(dǎo)致分不清楚弧的方向，如圖4.3。通過圖4.7進(jìn)行處理，如果一個已有核心詞的修飾詞作核心詞時，將繪制弧的坐標(biāo)點錯開。效果如圖4.8。圖4.7依存弧圖4.7依存弧橫向錯開處理圖4.8依存弧圖4.8依存弧橫向錯開處理效果在繪制依存弧時，高度是依據(jù)核心詞和修飾詞之間的詞數(shù)來設(shè)置的，所以當(dāng)連續(xù)兩條高度相等的弧出現(xiàn)時難以分清弧的起點和終點，如圖4.9。圖4.9高度相等效果圖4.9高度相等效果為了解決這一問題，使用弧線代替折線，由于畫布中沒有現(xiàn)有的橢圓繪制函數(shù)，故自己定義了一個繪制函數(shù)，如圖4.10。這樣在畫弧時利用橢圓的上半圓來繪制，效果圖如4.11。圖4.10橢圓圖4.10橢圓繪制函數(shù)圖4.11圓弧圖4.11圓弧繪制效果最后，在顯示效果上，不再采用核心詞和修飾詞之間的數(shù)量來決定弧的高度，而是采用高度層級來決定弧的高度。由一個數(shù)組保存高度層級，默認(rèn)依存弧的高度層級為1，當(dāng)添加一條弧或者刪除一條弧時更新高度層級數(shù)組。高度層級的算法如圖4.12，對每一條弧判斷是否被包含，對于被包含的弧，使包含它的弧高度層級+1，然后遞歸判斷包含它的弧。顯示效果如圖1.2。圖4.12判斷圖4.12判斷一條弧是否被包含4.4 canvas兼容IE8在IE瀏覽器的發(fā)展史上，IE9是一個巨大的里程碑，它更多地支持HTML5、CSS3、JS、SVG等互聯(lián)網(wǎng)通用標(biāo)準(zhǔn)。但是在一些舊的操作系統(tǒng)中，比如WindowsXP，還在使用IE8，因此使得IE8兼容canvas成為重要的一步。首先使用CSSHack引入Google的html5.js文件，使得IE8兼容HTML5標(biāo)簽，然后引入excanvas.js文件，該文件以IE8的方式重寫了canvas標(biāo)簽的各種方法，這樣IE8也能支持畫布上的標(biāo)注了。但是在IE8中還存在這兩個問題：（1）IE8不兼容JavaScript數(shù)組的indexOf方法，所以在Array原型鏈上擴展indexOf方法，如圖4.13，當(dāng)瀏覽器不能解析indexOf方法時就調(diào)用該方法。圖4圖4.13重寫indexOf方法（2）IE8動態(tài)生成動態(tài)添加option的時候，value有值，但是文本內(nèi)容添加不上，例如在選取依存關(guān)系時彈出的選項框時無法顯示依存關(guān)系。這是因為IE在新建option標(biāo)簽時不對text進(jìn)行賦值，只有通過innerText方法再對option的text屬性進(jìn)行賦值，如圖4.14。圖4.14圖4.14添加option標(biāo)簽4.5 本章總結(jié)本章是基于動態(tài)依存弧畫圖標(biāo)注界面的設(shè)計與實現(xiàn)，介紹了canvas畫布優(yōu)化過程，首先從整體上給出畫布畫依存弧的流程圖，然后進(jìn)行一系列的改進(jìn)：通過依存弧高度自動更新畫布高度；橫向錯開處