跨平台跨浏览器数据标注界面设计与实现分析研究 计算机科学与技术专业

目录 前言 1第一章 绪论 21.1 研究背景及意义 21.2 数据标注系统概述 21.3 本文的主要工作 51.4 本文的组织结构 5第二章 基于标注系统实现和兼容性问题分析 62.1 开发工具 62.2 开发技术 72.2.1 Ajax技术 72.2.2 ThinkPHP框架 92.2.3 MySQL数据库 102.3 系统兼容性问题 112.3.1 主流浏览器概述 112.3.2 浏览器的兼容性问题 122.4 本章总结 14第三章 基于jQuery的多浏览器支持的标注系统实现 153.1 jQuery框架概述 153.2 jQuery的兼容性优势 153.2.1 jQuery对象操作 153.2.2 jQuery使用对象属性 163.2.4 jQuery封装Ajax 163.3 本章总结 17第四章 基于动态依存弧画图的标注界面优化 184.1 cavans概述 184.2 依存弧绘制流程 184.3 画布设计 204.3.1 画布宽高调整 204.3.2 画布细节处理 224.4 canvas兼容IE8 244.5 本章总结 25第五章总结与展望 265.1 本文总结 265.2 后续工作展望 26参考文献 27致谢 28

摘要众所周知，自然语言处理是机器学习中的重要环节，而自然语言处理需要大量数据作为分析基础。一方面，机器学习算法需要高质量的标注数据，句法分析、图像识别等算法的深入研究对各类标注数据的需求加大；另一方面，不同的研究方向对数据的标注要求各不相同，因此数据标注就具有了非常广泛的应用价值。数据标注就是对原始的数据，包括语音、文本、图片、视频等进行加工处理，转换为机器可识别信息的过程。数据标注系统是指一个针对某一个特定任务，人工标注其正确答案。以中文分词为例，首先数据标注系统中会显示一个汉语句子，如“我是一个中国人”；然后标注者通过鼠标点击动作，将句子切分为一个词语序列“我/是/一个/中国/人”。这样的人工标注数据对于统计机器模型和算法很重要。本课题基于一个现有的数据标注系统进行改进，利用jQuery框架改写网页前端，使它在不同浏览器、不同平台正常工作，并基于动态依存弧画图对原有的界面进行优化，使其有更好的视觉效果。关键词：数据标注；句法标注；jQuery；前端优化

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前言随着互联网的高速发展，人工智能越来越贴近我们的生活，而作为实现人工智能的一种有效方法，机器学习也成为了研究的热点。机器学习是通过算法来分析数据，并通过这些数据进行学习，然后来解决现实问题。与传统软件程序相比，机器学习不再是单纯编写程序解决问题，而是用大量的具有某种特定规范的数据来进行训练“机器”，通过算法从数据中学习如何完成任务。这种具有特定规范的数据就是人们通过数据标注平台进行人工标注得来的。本文的标注系统是一个句法的标注系统，对句子中的词与词之间的关系进行标注，进而有助于后续的算法研究。本文分析了各主流浏览器之间的差异，更好的完善前端架构，优化界面风格，提高系统的有效利用率。本文完成的主要工作：（1）分析浏览器兼容性问题产生原因，了解浏览器在渲染和解析脚本时的差异。利用jQuery框架改写前端，改进标注平台浏览器兼容性。基于动态依存弧画图对原有的界面进行优化，使标注时更为舒适。

第一章 绪论本章首先介绍了数据标注平台的研究背景和重要意义，其次简单介绍了本系统的各个组成部分及其作用，并概述了本文所做的主要工作和贡献，最后一节简单介绍了本篇论文的组织结构。1.1 研究背景及意义随着机器学习的不断发展，计算机可以做越来越多的事，机器翻译，语音识别，图像识别，情感分析等一系列的研究越来越热门。在这些机器学习的算法背后，是基于大规模的人工标注数据。比如情感分析，首先需要一定量已经人工标注好的数据集，包括其情感对象，情感极性等重要信息，然后基于人工的标注信息，进而通过神经网络等工具训练机器算法，使得机器能够自己识别句子的情感要素。而数据标注系统是进行人工数据标注的重要平台，是机器学习算法研究的重要环节。人工标注的正确率直接决定了训练出来的算法模型的质量。随着互联网的快速普及，数据标注平台基本都已经做成了网页模式，这样既可以方便管理员实时查询进度和准确率，又不需要专门的平台或软件。而作为一个网页平台，浏览器的兼容性和呈现效果是体现质量的重要标准。1.2 数据标注系统概述随着人工智能和机器学习的大规模发展，数据标注也成为一个新兴的行业，百度阿里腾讯作为整个互联网行业的领头人，也早已加入其中。但是机器学习的研究方向有很多，如图像、分词、句法等，每一个研究方向都需要不一样的数据，因此针对自己所需要的数据研究相对应的数据标注平台很有必要。本系统是一个句法标注平台，即在一句话中标注内部词语之间的修饰或搭配关系，从而刻画句子的句法结构。其中，root表示伪节点。我们将root指向的词称为句子的根节点，即句子中最重要的词。我们所画的修饰或搭配关系称为依存弧，一条依存弧由三个元素构成wi→rwj，其中w图1.1标注句子示例图1.1标注句子示例图图1.2例句标注结果本系统中规定了以下四个条件：唯一根节点（singleroot）：一个句子只有一个根节点，，即root只有一个儿子。唯一父亲节点（singlehead）：每个修饰词必须有且仅有一个核心词。无环（acyclic）：多个依存弧不能构成环（不考虑弧的方向）。单向（unidirectional）：依存弧的箭头方向由核心词指向修饰词。本系统目前规定了20中依存关系类型，我们把关系类型标签分为三大类：谓语对应的依存关系标签：root,sasubj-obj,sasubj,dfsubj;单句内部主干关系标签：subj,subj-in,obj,att,adv,cmp；单句内部其他关系标签：coo,pobj,iobj,de,adjct,app,exp,punc,frag,repet。 表1.1给出了目前20种依存关系类型的详细介绍。表1.1依存关系类型汇总表关系标签说明例句root标注结果rootrootsentenceroot（根节点）我爱妈妈sasubj-objroot爱sasubj-objsasubj-objsamesubjectandobject（同主语同宾语）我一直在研究和思考这个问题sasubj研究思考sasubjsasubjsamesubject（同主语）我走进操场打篮球dfsubj走进打dfsubjdfsubjdifferentsubject（不同主语）我喜欢看书，但我讨厌看电影subj喜欢讨厌subjsubjsubject（主语）我爱妈妈subj-in我爱subj-insubj-insubjectinsideasubject-predicatepredicate（主谓谓语中的内部主语）他确实头疼头疼objobject（宾语）我爱妈妈objpred爱妈妈objpredpredpredicate（谓语）命令他扫地att他扫地attattattributemodifier（定语）国家主席adv国家主席advadvadverbialmodifier（状语）非常喜欢cmp非常喜欢cmpcmpcomplementmodifier（补语）洗干净手coo coo coocoordinationconstruction（并列结构）鲜花和掌声pobj鲜花掌声pobjpobjprepositionobject（介宾）在家看书在家iobjindirect-object（间宾）给他书iobj deiobj dedede-construction（的结构）这是他的他的adjctadjunct（附加成分）我走了adjctapp走了adjctappappappellation（称呼）老师，你好exp老师好expexpexplanation（解释）普京（俄罗斯总统）punc普京总统puncpuncpunctuation（标点）我爱妈妈。flagflag爱。flagflagflagfragment（片段）你，我，中国。repet你我中国repetrepetrepetition（重复）你吃，吃饭了吗？吃吃1.3 本文的主要工作本文主要基于一个现有的数据标注系统，测试该系统在各大浏览器上能否正常使用，在深入分析各大浏览器的差异的基础上改进系统的兼容性。同时基于JavaScript对系统的界面进行美化，加强了交互性和可操作性，使系统有更好的呈现效果。本文的主要工作如下：通过对主流浏览器的兼容性分析，了解它们在渲染和解析脚本时的差异。利用jQuery框架重写JavaScript脚本，探索jQuery框架的兼容性优势。基于动态依存弧画图对原有的界面进行优化，使标注界面有更好的呈现效果。1.4 本文的组织结构本文共分为五章，各章内容安排如下：第一章：绪论。本章介绍了课题的研究背景及意义、数据标注系统概述、本文的主要工作，最后简单介绍了本文的组织结构。第二章：基于标注系统实现和兼容性问题分析。本章介绍了标注系统的设计过程中所采用的开发工具和相关技术。同时提出目前系统存在的兼容性问题并解释其出现原因。第三章：基于jQuery的多浏览器支持的标注系统实现。本章介绍了jQuery框架，分析了jQuery的兼容性优势的三大方面，基于jQuery对标注系统进行改进。第四章：基于动态依存弧画图的标注界面优化。本章介绍了canvas画布的一系列优化：通过依存弧高度自动更新画布高度；横向错开处理；变折线为弧线以实现纵向错开；利用高度层级来定义依存弧的高度；使IE8兼容canvas标签。第五章：总结全文，提出未来工作的设想与展望。

第二章 基于标注系统实现和兼容性问题分析本章详细阐述了标注系统的设计过程中所采用的开发工具和相关技术，通过Ajax、ThinkPHP、MySql介绍了系统的实现过程。进而通过浏览器内核的不同提出浏览器的兼容性，抛出目前系统存在的兼容性问题并解释其出现原因。2.1 开发工具一个网站的制作首先要在本地进行一系列编写和调试，而XAMPP就是一款非常强大的建站集成软件包。它整合了Apache和MySQL，可以在本地进行网页测试。通过以下步骤进行XAMPP的安装和配置[1]：（1）通过官网下载XAMPP安装包并点击安装，选择安装路径点击“下一步”直至安装完成。（2）打开xampp文件夹下xamp-control.exe，进入xampp控制面板。如图2.1。（3）点击Apache和MySQL的Start，Apache的默认端口号为80和443，如果启动失败，80端口被占用，在Config中修改httpd.conf，将Listen80改为Listen8080，将ServerNamelocalhost:80改为ServerNamelocalhost:8080，然后重启Apache。（4）将系统源代码放入xampp文件夹下的htdocs文件夹中。或者在Config中修改httpd.conf修改DocumentRoot和Directory路径为源代码路径，如图2.2，然后重启Apache。（5）至此，已经安装配置完XAMPP，打开浏览器在地址栏输入http://localhost或就能访问所写的网页了，如图2.3即是本系统的登录页面。图2.1xampp控制面板图2.2图2.1xampp控制面板图2.2源代码路径修改图2.3标注系统登录界面2.2 开发技术标注系统主要以PHP为开发语言，采用ThinkPHP框架结构，利用典型三层架构，划分为数据层、视图层和控制层。MVC模式将数据和视图分离，提高开发效率，便于后期维护和重用。系统采用B/S体系结构，用户只需要有浏览器就能使用标注系统，跨平台性强。页面设计方面，运用CSS+DIV布局，使页面风格统一；前后端数据交互方面，使用Ajax技术增加了页面交互的友好性；数据库方面，使用MySQL为后台数据库，保障了系统的稳定和扩充。下面主要说明Ajax和ThinkPHP的运用。2.2.1 Ajax技术Ajax即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，它提供了一种方便、可靠的方案使得页面和服务器之间实现数据信息交流[2]。Ajax技术的出现打破了传统网页必须重新加载整个网页才能更新内容的桎梏，实现了异步更新、实时处理，如图2.4。图图2.4传统Web应用模式和Ajax模式的对比Ajax模式在更新屏幕时，为用户提供了更大的灵活性，具有以下的优点[3]：（1）减轻了服务器的负担，通过“按需读取”的原则，最大程度上减少冗余的请求和相应，降低服务器的负担。（2）更新页面时无需刷新，减少用户的等待时间。特别在数据量大的情况下，不会出现像Reload那样白屏的情况。Ajax使用XMLHTTPRequest对象发送请求并得到服务器响应，在不重新载入整个页面的情况下用JavaScript操作DOM最终更新页面，只有当数据接收完毕之后才更新相应内容，这种更新是瞬间完成的，用户几乎感觉不到。（3）能够把服务器承担的一些工作转移到客户端，减轻服务器端负担。（4）可以调用XML等外部数据，并进一步促进页面的呈现和数据的分离。（5）已经被标准化，使用广泛，无需下载其他插件。但是Ajax在使用过程中还是有着一些不足：（1）Ajax大量使用JavaScript和Ajax引擎，而这个取决于浏览器的支持[4]。不同的浏览器提供的XMLHttpRequest的方式不一样。所以脚本在使用Ajax时必须进行针对各个浏览器的兼容性测试。（2）Ajax技术使得更新页面时局部刷新，则意味着整个网站没有完全刷新，所以浏览器的回退功能是无效的。用户有时会不知道数据是否已经更新过，这就需要在明显位置提醒用户数据已更新[5]。2.2.2 ThinkPHP框架PHP（HypertextPreprocessor超文本预处理器）是一门通用开源脚本语言，它将程序嵌入到HTML文档中执行，执行效率比完全生成HTML标记的CGI高许多，PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行得更快[6]。同时PHP支持各类数据库和操作系统，有很强的跨平台性。ThinkPHP是一款开源便捷的面向对象的轻量级PHP开发框架，它是基于MVC设计模式的Web框架，通过适当的数据交换、表现层编码和对各种Web应用项目共同特点的整合，有助于促进快速开发,建立更稳定的应用,节约开发时间,减少了代码复用[7]。在ThinkPHP框架中，MVC的分层如下[8]：（1）模型（Model）层：模型层是由Model类构成，在较大的项目中，可支持多层Model，设计十分简便，都是继承于系统的Model类。（2）视图（View）层：视图层处理数据的显示部分，通常由模板引擎组成。（3）控制器（Controller）层：控制器层处理用户交互部分，从视图读取数据控制用户输入，并向模型发送数据。它由核心控制器与业务控制器两方面组成，核心控制器由系统内部的App类完成,负责应用的调度控制,包括HTTP请求拦截和转发、加载配置等,业务控制器则由用户定义的Action类完成[9]。在标注系统中，自定义了IndexAction、DataOperationAction、LabelAction、LoginAction等控制器类，如图2.5。在各个类中封装了一系列方法以满足项目的功能需求，如图2.6。图2.5图2.5控制器类图2.6控制器类中的方法2.2.3 MySQL数据库标注系统采用主流的MySQL数据库，通过PHP语言实现数据库的增删改查。在数据库存有6张表，包括4张分批数据批次表和2张公共表，如图2.7：（1）数据批次名-record-annotation：标注表，记录标注的相关信息，包括标注任务序号、标注人、标注结果等。（2）数据批次名-record-expert-check：检查表，记录专家检查的相关信息，包括标注任务序号、标注人、专家结果等。（3）数据批次名-record-study：学习表，记录标注学习的相关信息，包括学习人员、学习时间等。（4）数据批次名-task：任务表，记录标注任务相关信息，包括标注任务序号、任务句子、任务所需标注的修饰词、任务答案等。（5）data-batch：数据批次表，记录数据批次相关信息，包括数据批次名、数据批次分类、该批次任务总数、作业中用到的全体依存关系等。 （6）user-info：用户信息表，记录用户相关信息，包括用户名、登录密码、数据批次、标注进度等。图2.7数据库图2.7数据库表2.3 系统兼容性问题标注系统采用B/S体系结构，与C/S架构不同的是不需要安装特定的软件，用户只需要有浏览器就能使用标注系统，跨平台性强。但随之而来的就是浏览器的兼容性问题。这一节通过分析了解浏览器的历史，分析浏览器兼容性问题产生的原因，进而解决标注系统实现过程中遇到的兼容性问题。2.3.1 主流浏览器概述互联网的发展使得浏览器成为我们生活中密不可分的一部分，无论是娱乐还是学习，都已经离不开浏览器，在这些形形色色的浏览器中，市场占有率比较高的是下列浏览器[10]：（1）IE浏览器，诞生于1994年，当时微软为了对抗浏览器霸主网景NetscapeNavigator，在Windows系统中开发了自己的浏览器InternetExplorer，获得了巨大的成功。IE浏览器使用的是Trident内核，俗称IE内核。（2）Opera浏览器，诞生于1995年，是挪威OperaSoftwareASA公司旗下的一款浏览器，最初采用的是自主研发的Presto内核，被收购后跟随使用Chrome浏览器的内核。（3）Safari浏览器，诞生于2003年，苹果公司在手机平台上开发Safari浏览器，利用手机市场的巨大优势迅速占领市场，结束了只能在PC端浏览网页的时代。Safari浏览器使用的是Webkit内核。（4）Firefox，诞生于2004年，网景公司在被收购后推出的一款浏览器，在第二次浏览器大战中大放光彩。Firefox浏览器使用的是Gecko内核，俗称Firefox内核。（5）Chrome浏览器，诞生于2008年，google旗下一款追求简洁、快速、安全的浏览器，至今一直受人追捧，是当今占据市场份额最大的浏览器，也是最快速的浏览器之一。Chrome浏览器最先使用的是Webkit内核，后来改用Blink内核。（6）Edge浏览器，诞生于2015年，微软内置于Windows10操作系统中的浏览器，使用EdgeHTML内核。表2.1显示了2018年4月PC端浏览器全球市场的占有率，上述六大主流浏览器占据了97.19%的市场份额，几乎统治了整个PC端浏览器。表2.2显示了同月PC端浏览器中国市场的占有率，QQ浏览器和搜狗浏览器也占有一席之地。除此以外，360、百度等浏览器也有一定的市场。不过大多数的国产浏览器都是使用上述主流浏览器的一个或两个核，因此，在做网页时只要解决了上述主流浏览器的兼容性，基本就能解决兼容性问题。表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 浏览器的兼容性问题浏览器兼容性问题是指同一网页在不同浏览器上的显示效果不一致的问题[11]。本节总结了常见的浏览器兼容性问题，分析了产生浏览器兼容性问题的原因，并给出相应的解决办法。随着网络技术的快速发展，浏览器软件数量越来越多，版本更新也越来越快，这些因素直接导致浏览器兼容性问题日益突出。只能在指定浏览器浏览的网页必然不能满足用户的需求，解决浏览器兼容性问题刻不容缓。浏览器内核的不同是导致兼容性问题的直接原因。浏览器内核是浏览器的核心，是基于网页标记语言显示网页内容的程序或者模块[12]。浏览器的内核分为两部分，渲染引擎（layoutengineer或renderingengineer）和JS引擎。渲染引擎负责获取网页内容（HTML、CSS等）加以整理计算，然后再显示。渲染引擎决定了浏览器是如何显示网页信息的[13]。不同浏览器使用的内核不同，直接导致了浏览器对网页的解析有出入。渲染相关的兼容性问题主要指的是页面显示上的问题。网页设计经过多代发展，已经从传统的表格式布局演变成DIV+CSS的布局，这种布局方式将页面内容与样式分离，方便网页的重构和修改。不同的浏览器内核对HTML和CSS的解析不同引起了下列主要的渲染相关兼容性问问题：（1）margin和padding默认大小不同。解决办法：在CSS文件中将margin和padding设为0。*{margin:0;padding:0;}（2）hr标签的默认对齐方式不同。解决办法：使用align显示设置对齐方式或使用CSS属性设置对齐方式。 <hralign=”left”>或<hrstyle="text-align:left"/> （3）几个img标签排列的时候，浏览器都会有默认的间距。解决办法：为img标签添加float属性。 （4）Firefox在点击链接时出现虚线边框。解决办法：给a标签设置outline属性。 a{outline:none;} （5）IE低版本盒模型padding包含在content内。解决方式：用box-sizing属性把盒模型统一成低版本盒模型。JS引擎负责JS代码的解析，通过JS可以进行网页交互，但不同的浏览器对JS代码的事件支持也有较大差异，这是浏览器兼容性问题的又一大原因。脚本相关的兼容性问题是指在执行JavaScript脚本时产生的兼容性问题，这是由于不同的JS引擎在解析JS代码的方法不同，导致结果可能会有出入。常见的脚本相关的兼容性问题有以下这些[14]：（1）HTML对象的获取问题。获取HTML对象JS代码中的常用操作。在IE浏览器中可以使用document.getElementById(“idName”)或者ie:document.idname获取HTML对象，而在非IE浏览器中只能使用document.getElementById(“idName”)来获取HTML对象。解决办法：统一使用document.getElementById(“idName”)来获取HTML对象。 （2）集合对象下标问题。Firefox不支持使用()进行下标运算。解决方法：统一使用[]进行下标运算。 （3）获取鼠标位置问题。在IE中可以用event.x和event.y获取位置，而在Firefox中使用的是event.pageX和event.pageY。解决办法：varx=event.x?event.x:event.pageX。 （4）定义常量问题。IE浏览器不支持const关键字。解决办法：统一使用var进行常量定义。 （5）childNodes的问题。在Firefox中，childNodes中会插入空白文本节点。解决办法：使用node.getElementsByTagName()来回避使用parentNode.childNodes。 （6）window.event问题。在Firefox中并不支持window.event。解决办法：vartheEvent=window.event?window.event:arguments.callee.caller.arguments[0]。 （7）判断鼠标按键问题。在IE9、IE10中左键是theEvent==1，中键是theEvent==4，右键是theEvent==2。在其他浏览器中左键是theEvent==0，中键是theEvent==1，右键是theEvent==2。解决办法：本数据标注系统中只需要使用到左键和右键，所以在判断左键时只要判断theEvent.button==0||theEvent.button==1。2.4 本章总结本章首先讲了标注系统的开发工具和相关技术。在前端主要是DIV+CSS框架搭建页面，通过JavaScript实现标注人员和页面的交互。在后端使用PHP处理数据，将数据保存在MySQL数据库中。前后端数据交互是基于Ajax进行，而交流的信息则通过Json字符串传达。开发工具主要用到XAMPP集成软件包，可以直接搭建本地服务器和MySQL数据库，可以非常方便地进行本地测试。然后分析了浏览器的兼容性问题，这是在开发网页时经常遇到的棘手问题，原因在于浏览器数量繁多，兼容性问题繁琐，需要进行大量的测试才能找到问题所在。但是这又是不得不解决的问题，开发者不能指定用户使用何种浏览器访问网页，所以只能尽可能多的去兼容更多的浏览器。解决兼容性问题的方法其一是使用规范的网页开发语言；其二使用CSShack针对不同的浏览器CSS样式解析不同而编写其特定的CSS样式；其三是使用jQuery等框架来编写JavaScript脚本。

第三章 基于jQuery的多浏览器支持的标注系统实现本系统的一个重要的改进工作就是使用jQuery重写JavaScript脚本，精简代码量，提高系统的兼容性，同时为后续的工作提供方便。3.1 jQuery框架概述jQuery是一个快速，小型且功能丰富的JavaScript函数库，目前的使用频率远超Dojo、Prototype等框架[15]。jQuery奉行“writeless,domore”的原则，旨在为开发人员提高开发效率。它封装了一整套方法，包括HTML元素的操作，事件的处理，动画效果和前后端交互，使代码变得简单得多。作为一个JavaScript库，jQuery具有以下优点：（1）jQuery具有较强的浏览器兼容性，因为它将不同浏览器支持的JavaScript语法的区别封装起来，使得用户在使用时感受不到这种差异。（2）通过js文件的引用，可以将jQuery的脚本与HTML代码分开编写，这样既利于后期功能的实现和维护，也使HTML代码可读性更强。（3）jQuery支持各类CSS选择器，样式修改简单方便。（4）代码简练，支持链式操作。（5）扩展性强，在有需求时利用jQuery提供的接口为其扩展功能。3.2 jQuery的兼容性优势JavaScript脚本在浏览器兼容性方面的问题主要有以下三种，根据这三类问题，jQuery有着相应的解决方案：3.2.1 jQuery对象操作在网站开发时，会经常在JavaScript脚本中对HTML对象进行操操作，但是不同的浏览器在操作HTML对象时用法不同，例如在IE浏览器中，可以直接通过对象的ID属性来获取该对象，而在其他浏览器中不行，这就要求网站开发人员只能使用document.getElementById(“idName”)的方式来获取对象。而使用jQuery的选择器就非常方便： ID选择器：$(“#idName”)等价于document.getElementById(“idName”) 标签选择器：$(“tagName”)等价于document.getElementsByTagName(“tagName”) 样式选择器：$(“.className”)等价于document.getElementsByClassName(“className”) 但是前者获取的是jQuery对象，后者获取的是DOM对象，两者在使用方法上不一样，但两者可以相互转化。 jQuery在对象操作方面最方便的特点是它支持链式操作，因为每一步jQuery操作都返回jQuery对象。例如：$(“select”).addClass(“style”).find(“option”).eq(0).val(“adv”)，一行代码既对select对象添加了样式，又对子对象option的第一个元素设值，这种操作大大精简了代码量，增强了代码重用。3.2.2 jQuery使用对象属性HTML对象都有着自己的属性，虽然这些属性都能被不同浏览器识别，但由于各浏览器对这些属性的解释不同，在使用这些属性时所得到的结果也有差异[16]。例如offset一系列属性，它们在定位弧的位置以及依存关系选项框的弹出位置时非常重要。在IE和Opera等浏览器中，offsetParent属性会返回当前元素的父元素，而在Firefox浏览器则返回body元素；offsetLesft会返回当前元素距离offsetParent元素左侧的距离，因此不同浏览器offsetParent属性值得不同直接导致offsetLeft属性值的差异，这种问题想通过JavaScript解决是比较麻烦的。而在jQuery中对这类属性做了专门的封装处理。在jQuery中，offset()就是用于获取这两个属性的方法。这个方法统一了浏览器对offset一系列属性的解释，通过offset().left和offset().top就可以直接对获取当前对象相对于文档的位置。3.2.4 jQuery封装Ajax在2.2.1节Ajax技术中分析了Ajax的不足：Ajax大量使用JavaScript和Ajax引擎，而这个取决于浏览器的支持。不同的浏览器提供的XMLHttpRequest的方式不一样，所以脚本在使用Ajax时必须进行针对各个浏览器的兼容性测试。使用传统的方法进行Ajax应用开发包括一系列步骤，整个编程过程颇为繁琐。而jQuery对XMLHttpResquest对象进行良好的封装，提供一套完整的Ajax功能，极大地简化了Ajax应用的开发过程使用户在处理Ajax的时候能够专心处理业务逻辑，而无需关注复杂的浏览器兼容性和对象的创建和使用问题[17]。在通过Ajax发送和接收消息时，采用JSON为数据交换格式。JSON是一个轻量级的数据交换格式，各种不同的服务器端技术和JavaScript技术本身都可以轻松解析JSON，它可以在活对象和用于交换的格式之间进行双向转义[18]。JSON对象是一个键值对数组。每个对象都以“{”开始，“}”结束，键值对之间用“，”分隔，键值对以“name:value”的格式呈现。value可以是由双引号括起来的字符串、数值、true、false、null、对象或者数组，同时这些结构可以互相嵌套。在jQuery中使用$.ajax([option])的方法来实现Ajax，其中可选参数[option]为$.ajax()方法中的请求设置，常见的选项如下： （1）url：发送请求的地址； （2）type：http请求方式（get或post）； （3）async：true为异步请求，false为同步请求； （4）data：发送到服务器的数据； （5）success：请求成功后调用的回调函数； （6）error：请求失败后调用的回调函数。 例如在标注系统的登录的过程中使用的$.ajax()方法，如图3.1。图3.1A图3.1Ajax登录验证3.3 本章总结本章主要讲了基于jQuery的多浏览器支持的标注系统实现。首先介绍了jQuery框架，分析了jQuery的兼容性优势的三大方面，第一是方便HTML对象的获取；第二是统一HTML对象属性的操作；第三是兼容各浏览器Ajax的用法，采用$.ajax([option])方法来实现Ajax。

第四章 基于动态依存弧画图的标注界面优化这一章主要介绍了标注系统中画布的显示技术和依存弧的不断优化过程。作为一个标注系统，最核心的部分就是通过界面显示出来所标注的内容，让系统有较好的呈现效果，这样标注才会更为快捷方便。4.1 cavans概述cavans是HTML5中新定义的特性，IE8及以下的浏览器不兼容。canvas相当于一个图形容器，在这个容器中，可以使用JavaScript脚本来绘制想要的图形。在标注系统中就是使用canvas来绘制依存弧，如图1.2。使用canvas时首先在HTML文件中插入canvas标签： <canvasid="canvas"width='1000'height='200'style="border:0px"> Yourbrowserdosen'tsupporttheHTML5canvas. </canvas>这样如果浏览器支持canvas，则画布会覆盖文字区域，反之就会显示浏览器不支持canvas标签。4.2 依存弧绘制流程JavaScript脚本中定义了两个数组，chosenModifier和chosenHead，分别存放修饰词和核心词的id，它们有着一一对应的关系，索引号相同的一组为一条依存弧。在页面中，句子中的每一个词对应着一个<td>标签，id从0开始计数，这样方便于绘制依存弧。当鼠标点击某一个词时，通过window.event.button获取键值来判断左键还是右键，点击左键时判断是在选择核心词还是修饰词，点击修饰词时弹出依存关系选项框，选择后画出依存弧。当右键点击已画的修饰词时，会删除这条依存弧，并在chosenModifier和chosenHead数组中删除这两个词。当全部修饰词都画完后可以进行提交，如果在绘制过程中需要重画可以点击“重做”按钮恢复到初始状态。如遇到诗文、分词错误、病句等问题可以点击“诗句|古文”、“分词错误”、“病句”自动绘制依存弧然后进行提交。具体绘制流程图如图4.1。图4.1依存弧绘制流程图开始点击词语核心词=修饰词数量？是否为图4.1依存弧绘制流程图开始点击词语核心词=修饰词数量？是否为左击？加入核心词加入修饰词选择依存关系画依存弧NN符合撤销条件？N撤销删除该依存弧弹出警告提交？修饰词全部有核心词？结束提示未标注完成NYNYYYY4.3 画布设计在原有的系统中，画布的大小是通过句子的词数来固定的，如图4.2，这样就会导致稍微长一点的句子的画布就会超过一页，但实际标注时依存弧几乎不会占满整个画布，从而虽然实际绘制弧线不高但显示内容超过一页，出现滚动条，如图4.3。图4.2设置画布大小图4.3原有图4.2设置画布大小图4.3原有系统标注界面4.3.1 画布宽高调整初始画布的固定宽高太大直接导致出现滚动条，页面不美观且用户标注不方便，而初始画布高度不够又可能使得较长的依存弧画不下。所以就想到使用动态刷新的方法，将初始画布的宽度设为句子的长度，这样可以避免短句子出现横向滚动条；将初始画布的高度设置为200px，如图4.4。当计算到某一条依存弧的高度大于190px，即距离画布上边缘的高度小于10px时，动态更新画布的高度，如图4.5。由于画布高度改变后画布的内容会清空，因此需要调用draw()函数将chosenModifier和chosenHead数组重新绘制。图4.4设置画布大小图4.4设置画布大小图4.5根据图4.5根据依存弧高度动态刷新画布高度动态刷新带来的一个新的问题就是如果先绘制了一条较高的依存弧，当撤销这条弧时，画布仍然保持扩大的高度，为了使得撤销较高弧后恢复到初始高度，创建了drawn_height数组来保存每条弧的高度，与chosenModifier和chosenHead一一对应。同时在撤销一条依存弧时使用高度恢复函数resize_after_revoke()将drawn_height数组中的最大值与初始画布高度进行比较，选取较大的作为画布高度，如图4.6，这样就能实现在绘制和撤销时同时更新画布高度。图4.6高度恢复图4.6高度恢复函数4.3.2 画布细节处理在绘制依存弧的过程中有些词可能既作为核心词，也作为修饰词，因此有至少两条弧会在这个词上汇聚，这就需要将出弧和入弧错开，否则会导致分不清楚弧的方向，如图4.3。通过图4.7进行处理，如果一个已有核心词的修饰词作核心词时，将绘制弧的坐标点错开。效果如图4.8。图4.7依存弧图4.7依存弧横向错开处理图4.8依存弧图4.8依存弧横向错开处理效果在绘制依存弧时，高度是依据核心词和修饰词之间的词数来设置的，所以当连续两条高度相等的弧出现时难以分清弧的起点和终点，如图4.9。图4.9高度相等效果图4.9高度相等效果为了解决这一问题，使用弧线代替折线，由于画布中没有现有的椭圆绘制函数，故自己定义了一个绘制函数，如图4.10。这样在画弧时利用椭圆的上半圆来绘制，效果图如4.11。图4.10椭圆图4.10椭圆绘制函数图4.11圆弧图4.11圆弧绘制效果最后，在显示效果上，不再采用核心词和修饰词之间的数量来决定弧的高度，而是采用高度层级来决定弧的高度。由一个数组保存高度层级，默认依存弧的高度层级为1，当添加一条弧或者删除一条弧时更新高度层级数组。高度层级的算法如图4.12，对每一条弧判断是否被包含，对于被包含的弧，使包含它的弧高度层级+1，然后递归判断包含它的弧。显示效果如图1.2。图4.12判断图4.12判断一条弧是否被包含4.4 canvas兼容IE8在IE浏览器的发展史上，IE9是一个巨大的里程碑，它更多地支持HTML5、CSS3、JS、SVG等互联网通用标准。但是在一些旧的操作系统中，比如WindowsXP，还在使用IE8，因此使得IE8兼容canvas成为重要的一步。首先使用CSSHack引入Google的html5.js文件，使得IE8兼容HTML5标签，然后引入excanvas.js文件，该文件以IE8的方式重写了canvas标签的各种方法，这样IE8也能支持画布上的标注了。但是在IE8中还存在这两个问题：（1）IE8不兼容JavaScript数组的indexOf方法，所以在Array原型链上扩展indexOf方法，如图4.13，当浏览器不能解析indexOf方法时就调用该方法。图4图4.13重写indexOf方法（2）IE8动态生成动态添加option的时候，value有值，但是文本内容添加不上，例如在选取依存关系时弹出的选项框时无法显示依存关系。这是因为IE在新建option标签时不对text进行赋值，只有通过innerText方法再对option的text属性进行赋值，如图4.14。图4.14图4.14添加option标签4.5 本章总结本章是基于动态依存弧画图标注界面的设计与实现，介绍了canvas画布优化过程，首先从整体上给出画布画依存弧的流程图，然后进行一系列的改进：通过依存弧高度自动更新画布高度；横向错开处