Web前端工程组件化的分析与改进

发布时间：2017-04-23 20:03

  本文关键词：Web前端工程组件化的分析与改进，，由笔耕文化传播整理发布。

【摘要】：前端作为web工程的一部分虽然很早就已经存在,但局限于浏览器的性能以及网络带宽的限制一直没有得到很好的重视和发展。随着万维网的普及以及网速的不断增加,网络的传播速度和带宽早已经不是阻碍互联网开发的重要因素。2010年对于整个web前端界来说是重要的一年。随着2010年HTML5的流行,再一次带动了浏览器的变革,各大浏览器开发公司都开始支持最新的W3C标准,例如Google的chrome,微软的IE9,苹果的safari等。前端也早已经不再只是简单的抠图工作,转而逐渐变成了与后端同样复杂度的工程化工作。在2015年谷歌的I/O大会上,web组件的技术已经开始崭露头角,例如已经实现的web GL技术,以及google map和gmail都是基于组件。谷歌已经确定组件化是未来前端开发的趋势。Web前端技术发展到现在,各种框架和类库接连不断的出现,它们都用各自的方式实现了前端工程的组件化。但是问题也随之而来。目前前端模块化和组件化的标准只是停留在初步阶段,离正式发布还有一段距离。因此缺少了官方标准规范的结果就是,各大公司的主流框架都用自己的方式实现组件化。但是每个框架之间实现的方式不同,就导致框架之间的组件不能复用,也就失去了组件的意义。因此如何制定一个通用的组件化标准并将其应用是整个前端工程发展的一个难题。本文从W3C的web component标准入手,分析了当前web前端工程在组件化方向的发展情况,通过了解不同框架的源码以及实现方式和性能,在对比了国内外的主流框架和文章后,结合它们的优点,通过自己的见解实现了一种高性能,敏捷开发,易维护的开发方案。这个方案封装了web component标准,但不是单纯的封装,而是将浏览器的兼容性以及虚拟DOM渲染的性能考虑在内,实现了一种浏览器兼容性更强,书写方式和代码结构更加标准,数据绑定视图和模型的前端框架。简单来说它是一种实现声明式组件开发的前端库,让开发者能以标签形式使用组件,提升开发效率。该库以Web Components为标准,解决各类浏览器兼容性问题,尤其是移动端浏览器。Custom Elements作为组件开发、使用规则;部分提供Shadow Dom功能;用HTML Imports引入组件、声明组件依赖关系;支持生命周期和数据动态更新。同时提供类似于DOM操作的动态接口,满足实际中的复杂开发情景需求。然后作为示例,通过该前端库我们开发出了一款基于组件的移动端web app,该app由几大组件组成,这些组件相互独立,可以方便的迁移到其他项目中去。基于数据驱动的组件间通信不需要直接操作DOM,开发者只需要将注意力放到数据上而不需要关心视图问题,大大减少了发生bug的几率。
【关键词】：Web前端 框架 组件化 模块化
【学位授予单位】：吉林大学
【学位级别】：硕士
【学位授予年份】：2016
【分类号】：TP393.092;TP311.56
【目录】：

• 摘要4-6
• Abstract6-10
• 第1章 绪论10-17
• 1.1 研究背景及意义10-11
• 1.2 国内外研究现状11-15
• 1.2.1 国外研究现状11-13
• 1.2.2 国内发展现状13-15
• 1.3 本文主要内容15
• 1.4 论文结构15-17
• 第2章 web前端概述17-24
• 2.1 前端工程的发展17-20
• 2.1.1 前端工程初期17-18
• 2.1.2 web2.0 时期18-19
• 2.1.3 工程化前端时期19-20
• 2.2 前端主流框架20-23
• 2.2.1 Angular，React，Polymer20-22
• 2.2.2 主流框架组件化过程22-23
• 2.3 小结23-24
• 第3章 组件化标准详细介绍24-33
• 3.1 web component标准24
• 3.2 Shadow DOM24-26
• 3.3 HTML imports26-29
• 3.3.1 依赖引入27-28
• 3.3.2 链接类型引入28-29
• 3.3.3 扩展HTMLLinkElement接口29
• 3.3.4 载入引入29
• 3.4 Custom Elements29-33
• 3.4.1 自定义元素的生命周期30-31
• 3.4.2 创建和注册管理机构传递31
• 3.4.3 注册自定义元素31-33
• 第4章 组件化分析及改进33-42
• 4.1 组件化语义的优缺点33
• 4.2 组件化依赖浏览器程度33-36
• 4.3 改进web component36-42
• 4.3.1 改进的组件化框架介绍36-38
• 4.3.2 改进的组件化框架工作原理38-40
• 4.3.3 改进的组件化框架编译原理40-42
• 第5章 改进组件化实现的web app42-50
• 5.1 总体设计42-44
• 5.2 项目实现44-48
• 5.2.1 代码结构44-45
• 5.2.2 项目分析45-47
• 5.2.3 具体实现47-48
• 5.3 总结与展望48-50
• 参考文献50-51
• 致谢51

【相似文献】

中国期刊全文数据库 前10条

1 杨正武;;企业管理信息系统组件化信息资源分析与设计[J];商业时代;2009年23期

2 刘秋生,孙卫红;组件技术在军事地理信息系统中的应用[J];无线电通信技术;2001年01期

3 马天蔚;;以组件应万需[J];每周电脑报;2001年68期

4 张春城;薛恒新;杨建华;;企业信息化中的企业业务组件建模分析[J];中外科技信息;2003年10期

5 侯成义,司书宾,孙树栋;基于组件的组件库管理系统[J];计算机工程与应用;2003年30期

6 段继华,刘卫;组件化技术在程序设计中的应用[J];无线电通信技术;2003年01期

7 史磊;沈为群;宋子善;;基于组件的空战战效评估仿真平台研究[J];计算机工程;2006年05期

8 孙祥鹏;杜滟;;水利基建财务管理信息系统的组件化技术特点[J];人民珠江;2006年04期

9 杨正武;;动态组件的依赖关系分析与研究[J];软件导刊;2009年05期

10 杨正武;;行业组件框架下的企业管理信息系统创新思路[J];商业时代;2010年13期

中国重要会议论文全文数据库 前7条

1 李兴玮;潘晓;曾迎生;;组件技术在制导武器系统仿真建模中的应用研究[A];2007系统仿真技术及其应用学术会议论文集[C];2007年

2 王浩;高蓓;恽江峰;严洪森;;基于组件的供应管理系统的研究[A];面向21世纪的生产工程——2001年“面向21世纪的生产工程”学术会议暨企业生产工程与产品创新专题研讨会论文集[C];2001年

3 李汉;李忠俊;;浅谈基于组件的业务建模[A];2008'中国信息技术与应用学术论坛论文集（二）[C];2008年

4 吴明;黄东;;.NET下ERP系统的组件化开发[A];全国自动化新技术学术交流会会议论文集（一）[C];2005年

5 谢方;岳增坤;;仿真通用计算引擎与组件动态加载技术研究[A];中国造船工程学会电子技术学术委员会——2012年水下复杂战场环境目标识别与对抗及仿真技术学术交流论文集[C];2012年

6 曹卫星;朱艳;戴廷波;潘洁;胡继超;庄恒扬;;基于过程的组件化小麦生长模拟系统[A];’2003中国作物学会学术年会文集[C];2003年

7 陈亮;崔仁涛;谢小敏;;基于软总线的组件通信技术在用电现场管理系统中的应用[A];2007中国电机工程学会电力系统自动化专委会供用电管理自动化学科组（分专委会）二届三次会议论文集[C];2007年

中国重要报纸全文数据库 前10条

1 Tamim Saleh;组件化：银行重构新思维[N];金融时报;2006年

2 林燕峰;简单是美 和谐是金[N];计算机世界;2000年

3 本报记者 龚杰;组件技术“加速”软件应用[N];计算机世界;2002年

4 ;金思维：组件化突破行业屏障[N];中国计算机报;2003年

5 肖健 作者系上海博科资讯股份有限公司副总裁;中小企业管理别迷信舶来品[N];中国企业报;2005年

6 何进伟;管理软件：面临“三化”[N];中国计算机报;2003年

7 本报记者 徐莉;SOA统领下一个十年[N];网络世界;2004年

8 ;托普发布软件组件化开发平台[N];人民邮电;2000年

9 钟耳顺;GIS朝组件化发展[N];中国计算机报;2001年

10 ;国产组件化软件平合与TopM++Builder[N];科技日报;2000年

中国博士学位论文全文数据库 前5条

1 李松;组件化可重构嵌入式数控系统实施关键技术研究[D];华南理工大学;2015年

2 刘刚;并行离散事件仿真可视化组件建模技术研究[D];国防科学技术大学;2011年

3 戴鸿君;基于异构多核体系与组件化软件的嵌入式系统研究[D];浙江大学;2007年

4 李姗姗;空间信息分布式协同高性能计算框架的初步研究[D];中国地质大学（北京）;2009年

5 涂钰青;基于IEC61499标准的组件化模型集成数控系统形式化建模与验证的研究[D];华南理工大学;2011年

中国硕士学位论文全文数据库 前10条

1 郭颖;组件化并行仿真引擎关键技术研究[D];北京理工大学;2015年

2 牛立栋;基于.NET的SOA组件集成开发框架的研究与实现[D];西安电子科技大学;2015年

3 林晓佳;基于SOA的中间业务平台设计与实现[D];华南理工大学;2015年

4 张佳梁;面向定制化广告的前端组件化框架设计与实现[D];南京大学;2016年

5 戴翔宇;Web前端工程组件化的分析与改进[D];吉林大学;2016年

6 张丽;本体在组件描述和检索中的应用研究[D];哈尔滨工程大学;2008年

7 陈冲;基于组件的水文集成建模环境的设计[D];兰州大学;2012年

8 李明;面向对象开发方法中可重用组件技术的研究[D];大连海事大学;2003年

9 陈光;基于推理算法无关性原则的组件管理系统[D];吉林大学;2004年

10 宋海荣;组件技术的研究及在商标审查系统中的应用[D];北京邮电大学;2013年

  本文关键词：Web前端工程组件化的分析与改进，由笔耕文化传播整理发布。

本文编号：322916