国内图书分类号：TP311  学校代码：10213 国际图书分类号：621.3密级：公开
工程硕士学位论文
百度Web前端框架通用可定制组件
的设计与实现
硕士研究生 ：王冉冉
导        师 ：范国祥高级讲师
副  导  师 ：李晓鹏工程师
申请学位 ：工程硕士
学科 ：软件工程
所在单位 ：软件学院
答辩日期 ：2012年10月
授予学位单位 ：哈尔滨工业大学
Classified Index: TP311
U.D.C: 621.3
Dissertation for the Master Degree in Engineering
DESIGN AND IMPLEMENTATION OF UNIVERSAL CUSTOMIZABLE COMPONENTS FOR BAIDU WEB FRONT-END FRAMEWORK
Candidate：Wang Ranran
Supervisor：Senior Lecturer Fan Guoxiang Associate Supervisor：Engineer Li Xiaopeng Academic Degree Applied for：Master of Engineering Speciality：Software Engineering Affiliation：School of Software
Date of Defence：October, 2012
个人网页设计模板hbuilderDegree-Conferring-Institution：Harbin Institute of Technology
摘要
随着互联网Web2.0时代的发展，各式各样形如桌面软件的Web产品大量涌现，网站前端的重要性被日益提升，已在整个Web应用的开发中占据主要地位。而在各行各业都注重服务质量的今天，互联网服务的质量同样备受重视。Web 应用的前端性能恰是影响用户与系统交互过程中体验感受的直接因素，因此前端性能成为当前阶段Web应用开发中需要开发人员特殊关注的重要领域。良好的前端性能可以提升整个网站的性能，改善用户体验，从而增加用户粘性，保证产品的用户体，从而带来经济效益。可以这样说，良好的前端性能是互联网产品成败的关键。
本课题基于百度在线网络技术(北京)有限公司Web前端研发部为百度自有Web产品构建的百度Web前端框架，系统论述该框架中UI组件、DOM选择器和Sprites图片合并组件的设计与实现。
本课题构建一组适用于百度产品的通用可定制的UI组件，将UI组件分层次构建，可以根据开发者需要在不同层次为组件添加属性，实现UI组件的通用性；在DOM选择器中创新采用“从右向左”的查方式，可以明显减少遍历次数，从而提高DOM选择器的工作效率；在图片合并组件中采用模拟退火算法对图片进行排布，力争结果图片的面积最小，并采用B*树表示布图结构以计算图片位置。
通过本课题的研究工作，构建出一套通用可定制的UI组件，以及先进的DOM选择器和Sprites图片合并组件，最终达到了提升百度产品前端性能的目的。
关键词：通用组件；可定制；图片合并；DOM选择器
Abstract
With the development of Internet Web2.0 era, similar desktop software a large number of Web applications, the importance of the front-end of the website is rising, and has a dominant position in the development of the entire Web application. In all walks of life to focus on quality of service, the quality of Internet service also attracted increasing attention. Web application front-end performance just directly affect the user interacts with the system process experience feelings, front-end performance become important areas of the current stage in the development of Web applications developers special attention. Good front-end performance can enhance the performance of the entire site, to improve the user experience, increase user stickiness, to ensure that the product user groups, and economic benefits. May say so, a good front-end performance is the key to the success of Internet products.
Discusses UI components in the framework of DOM selector and Sprite together. Components subject Baidu's own Web-based Baidu Online Network Technology (Beijing) Co., Ltd. Web front-end R & D department to build the Baidu Web front-end framework, system design with achieve.
This project will build a set of generic customizable apply to products UI components to build the different levels of UI components, according to the developer needs the components add properties to achieve the versatility of the UI components at different levels; DOM selector innovative way to find the "right to left", you can significantly reduce the traversal times, thereby improving the efficiency of the DOM selector; the picture merge component simulated annealing algorithm picture arrangement strive to results picture the smallest, and B * tree layout structure to calculate the picture position.
Build a common set of custom UI components, and advanced DOM selector Hop chart component research work through the issues, and ultimately achieve the purpose of improving front-end performance of Baidu products.
Keywords: universal components, custom components, css sprite, dom selector
哈尔滨工业大学工程硕士学位论文
目录
摘要.......................................................................................................................... I ABSTRACT ............................................................................................................... II 第1章绪论 (1)
1.1课题背景及研究的目的和意义 (1)
1.1.1 课题背景 (1)
1.1.2 课题研究的目的和意义 (1)
1.2国内外相关技术研究现状 (2)
1.2.1 国外框架基本情况 (2)
1.2.2 前端框架对比分析 (3)
1.3本文的主要工作 (5)
1.4论文的组织结构 (6)
第2章需求分析与架构设计 (8)
2.1需求分析 (8)
2.1.1 UI组件库需求 (8)
2.1.2 DOM选择器需求 (15)
2.1.3 Sprites图片合并组件需求 (16)
2.1.4 通用可定制需求 (16)
2.2技术方案 (16)
2.2.1 技术基础 (16)
2.2.2 采用VCD开发模式 (18)
2.2.3 事件机制 (18)
2.2.4 HTML5支持 (19)
2.2.5 模拟退火算法 (19)
2.3架构设计 (20)
2.3.1 UI组件库设计思路 (21)
2.3.2 DOM选择器设计思路 (24)
2.3.3 Sprites图片合并组件设计思路 (25)
2.4本章小结 (25)
第3章通用可定制组件详细设计 (26)
3.1UI组件库详细设计 (26)
3.1.1 整体设计 (26)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。