EXTCSS—级联样式表预处理器的设计与实现

发布时间：2019-02-12 16:09

【摘要】：在实际的Web开发中，级联样式表（CSS）的开发与维护是一件困难的事情，作者通过调查Web重构行业内的63位开发人员，统计出目前的CSS开发中存在的问题，包括三类问题：CSS难以重复利用、CSS自动化功能欠缺以及不同浏览器解析CSS的不一致。针对这些问题，作者设计了ExtCSS——CSS语言之上的高级语言，它扩展了原生CSS的语法，目的是提高在开发与维护CSS代码的工作中的效率，同时作者实现了ExtCSS语言的处理器，，用于把ExtCSS代码翻译成CSS代码。在最后，我们采用了实证软件工程方法设计实验，证明了采用ExtCSS比原生CSS完成开发与维护的任务更为高效。 ExtCSS语言是CSS语言的超集，即是ExtCSS语法是兼容已有的CSS3标准，降低了开发者学习ExtCSS的成本。其次，ExtCSS设计了变量、函数以及嵌套的语法，使得代码可读性与可维护性更佳。ExtCSS语法参考了流行的Web程序语言来设计，其中变量命名规则参考了Linux里Shell脚本以及PHP脚本的变量命名规则，而作用域则参考了Javascript语言中的作用域链的思想。在Web产品上线前，往往需要优化性能，其中与CSS的相关的工作主要包括了CSSSprite以及压缩CSS代码。为了节省在这个阶段所带来的效率开销，ExtCSS处理器还设计了CSSSprite语法以及解压/压缩的自动化功能。 ExtCSS处理器使用Java语言编写，能在不同的操作系统上运行。它使用了开源的ANTLR生成语法分析器，并且用Junit做单元测试工具。本文对ExtCSS进行了两个实验。在第一个实验中，我们爬取了hao123导航首页的全部网站底下的所有CSS文件，通过ExtCSS处理器的成功解析这些CSS文件，从而证明ExtCSS兼容原生CSS语法。在第二个实验中，我们采用了实证软件工程方法去设计实验，邀请若干从事Web重构行业的学生/工作人员参与实验，通过完成三项开发维护CSS代码的任务，从实验结果中体现了采用ExtCSS比原生CSS完成开发与维护的任务更为高效。最后，ExtCSS还应用到了实际Web软件产品中CSS的开发过程。
[Abstract]:In the actual Web development, the development and maintenance of cascaded stylesheet (CSS) is a difficult task. By investigating 63 developers in the Web refactoring industry, the author counts out the existing problems in the CSS development. There are three types of problems: CSS is difficult to reuse, CSS automation is lacking, and different browsers do not parse CSS consistently. Aiming at these problems, the author designs a high-level language based on ExtCSS--CSS language, which extends the syntax of native CSS, in order to improve the efficiency in developing and maintaining CSS code. At the same time, the author implements the processor of ExtCSS language. Used to translate ExtCSS code into CSS code. Finally, we use the empirical software engineering method to design experiments, which proves that ExtCSS is more efficient than native CSS in the task of development and maintenance. ExtCSS is a superset of CSS, that is, ExtCSS syntax is compatible with existing CSS3 standards, which reduces the cost for developers to learn ExtCSS. Secondly, ExtCSS designs variables, functions and nested syntax to make the code readable and maintainable. The variable naming rules refer to the variable naming rules of Shell script and PHP script in Linux, and the scope of scope refers to the idea of scope chain in Javascript language. Before the Web product goes online, it is necessary to optimize the performance. The work related to CSS mainly includes CSSSprite and compressed CSS code. In order to save the efficiency cost at this stage, the ExtCSS processor also designs CSSSprite syntax and decompression / compression automation function. ExtCSS processors are written in the Java language and run on different operating systems. It uses open source ANTLR to generate parsers and uses Junit as a unit test tool. In this paper, two experiments on ExtCSS are carried out. In the first experiment, we crawled all the CSS files under all the websites on the front page of hao123 navigation, and parsed these CSS files through the success of the ExtCSS processor, thus proving that ExtCSS is compatible with native CSS syntax. In the second experiment, we used an empirical software engineering approach to design the experiment, inviting several students / staff members in the Web refactoring industry to participate in the experiment and to complete three tasks of developing and maintaining CSS code. The experimental results show that ExtCSS is more efficient than native CSS in the task of development and maintenance. Finally, ExtCSS is applied to the development process of CSS in actual Web software products.
【学位授予单位】：中山大学
【学位级别】：硕士
【学位授予年份】：2013
【分类号】：TP332

【参考文献】