《基于模块化的前端开发框架的研究与实现》 论文阅读(十三)

一、基本信息

标题:基于Web前端的性能优化方案研究

时间:2017

来源:北京邮电大学

关键词:Web前端;模块化;JavaScript;Node.js;前端模板

二、研究内容

1.主要内容:

  1.1研究背景与意义
当今互.联网飞速发展,网络用户的需求变化既快又大,大部分网站的更新周
期都是以日,小时甚至分钟为单位,在这种情况下,网站的前端就成了变化最频
繁的部分川。随着互联网公司对前端开发的逐渐重视,前端开发人数也越来越多,
但是技术人员的投入总是有限的,而前端开发领城并没有为开发者们提供一-种简
洁,有条理的方式来管理模块的方法,前端模块化问题经久不衰。
以JavaScript 模块化为例,其经历了无模块时代,即代码次序堆特的时代、
模块萌芽时代及当前的模块化组件化时代,ECMA2015 也将模块化纳入到规范
中,使模块化成为JavaScript规范,开发人员不断地在模块化领域进行摸索及探
求。模块化开发使得前端开发人员摆脱繁琐的文件依赖和命名冲突,增强代码复
用性,将代码划分模块管理,也方便开发人员的分工划分。每个人员对自己的模
块负责,考虑其复用性及可扩展性,从这个角度来看,模块化开发也提升了开发
人员的开发效率和代码质量。
本论文研究模块化技术,发现前端模块化在使用及应用场景等方面主要存在
以下问题,亟待进一步优化:
(1)前端开发因其特殊性,在模块化方面- -直没有统-的解决方案,因为
开发人员实现-一个页面功能需要依赖三种语言(HTML、CSS. JavaScript) 的相
互组织才能完成,而当前JavaScript有较成熟的模块化技术,如SeaJS. require js
等,可借助于它们来实现代码管理,HTML及Css则没有相应的代码组织规范,
代码冗余且难以管理。如果仅仅是某-一个语言实现了模块化而其他语言还处于原
始状态,那这种模块化方案则并不能被大家认为是一-套完整的模块化方案,所以
开发者真正需要的是一种可以将三种语言能同时组织,综合完成的模块化方案。
(2)在HTML模块化中可结合前端模板技术来实现,而将模板文件化并模
块化引用则是个问题,当前前端方面动态文件加载主要是异步AJAX或动态标
签来实现,而以上功能均需浏览器底层支持,这在无形之中大大增加了浏览器的
负担,需要引入同步的机制来解决这一问题。与此同时仅仅靠前端模板技术只能
解决动态字符串的问题,而页面模块化组织调用、增加页面代码可读性这些问题
则不是前端模板技术能够简单解决的,因此需要一套技术来打展页面语言,实现
页面的模块化调度。
本文从以上两个方面出发,以前端模块化为研究目标,旨在解决面对复杂

第二章关键技术研究
2.1静态资源模块化技术
在页面设计中,开发人员一直追求着简洁、灵活、可维护的代码。简洁具体
于HIML即为以最少的且语义化的标签来实现所需要的结构:于CSS即为高复
用,低冗余的定义。灵活要求开发人员的代码能达到最少改动可实现最多效果的
目的。可维护指以最少的改动解决问题,以最快的速度定位到问题的能力。问题
归结于兼顾实际工作中的开发效率、沟通成本、发布风险、容错度、链接数及速
度问题的情况下,如何在HTML. CsS中实现脚本编程语言中的封闭、组件、可
移植等等特性。
几乎所有编程语言都会有类、对象、变量等概念,拥有完整的流程控制。而
HTML和CSS算不上是编程语言,HTML是超文本标记语言,是用于描述网页
文档的一种标记语言,而CsS是一种用来表现HTML.或XML等文件式样的计
算机语言。两者都没有程序语言所具备的流程控制能力,甚至不能定义变量,这
就要求课题从另一个角度来进行页面设计中的模块化。
2.1.1页面布局模块化
模块化主要是提供了一项分治的思想,让代码拥有重用性的同时,还可以进
行分模块管理,将一个功能划分成多个模块,层次清晰又简单易懂,这种思想一
直被当前各大主流编程语言如JAVA、PHP等所推崇,在其早期便拥有包引入机
制及能力,但是对于前端来讲尤其是静态资源这一块, 怎样制定划分规则并实现
比如何进行代码划分有时显得更为重要,因为缺少相应成熟的规范来规定这些规
则,在早期,页面都是依托后端模板来实现某种意义上的模块化,如PHP的
include等,但是这样使前端代码与后端代码耦合性提高,于是有很多解决方案出
现,但是方案大多都是依托服务器语言来实现,如Smarty模板继承等。而在纯
前端领域一直缺少--个类以上结合方案的解决办法。
页面模块化布局的出现,为提升项目开发效率,解决项目维护问题提供了一
个解决方案。模块与模块间不相互依赖,又拥有- -定共性,通过相应的模块化引
入规则而相互联系,由于拥有这些优势,页面模块化布局被广大网站所应用,它
的网络架构更需要的是在合理的嵌套中保持最好的健壮性,可拓展,易维护性。
一个完整的网页,需要划分为多个模块,例如头部、底部、列表、侧边栏、菜单
等等,他们独立为-个个模块,每个模块均有自已独立的功能,在开发的过程中

第三章模块化前端开发框架的设计
本文将重点研究模块化前端开发框架的整体架构及设计,本文所提出的基于
模块化的前端开发框架为前端开发提供一套整体意义上的模块化开发方案,用来
解决前端开发过程中模块化管理及开发的问题。本章将框架具体分为两个方面:
页面模块化子系统和多文件处理工具,从总体架构的角度出发分析其功能性需求,
并在第四、五章分别进行架构设计与实现的详细阐述。
3.1系统功能需求分析
本文提出了基于模块化的前端开发框架的课题研究,目的在于为开发者提供
- -种模块化的开发方式,借助Nodejs的服务端能力,结合JavaScript 语言,构
建页面模块化开发环境,规范模块化开发工作。首先,本文就模块化开发中基本
设计思想进行分析。通过研究,本文得到了以下几项模块化基本设计思想。
●模块的封装性。 每个模块间互不干扰,在JavaScript可通过模块化技术
对代码进行封装,通过实例化模块引入进行创建对象。对于页面模块,
每个模块都具有独立性,拥有属于自身的样式与行为,互不干扰;
明确的数据流动性。这里是主要针对于组件模块和事件机制。页面模块
与组件模块间可进行数据流动,而事件机制可针对组件模块进行监听与
事件回调,页面可根据不同的事件做出不同响应,进行不同的渲染。
本文将从页面开发及生成过程来分析模块化框架功能点。总体来讲,开发者
完成对网站的开发后,页面的展示通过浏览器解析来完成,浏览器进行如下解析:
●浏览器通过URL来获取页面文件,进而去请求相应的静态资源文件:
●浏览器对页面文件进行分析, 并结合CSS、JavaScript及相应资源生成相
应渲染树,对页面资源进行渲染,最终呈现到用户面前。
以上整个过程通过浏览器解析及渲染来完成。传统意义上,由于影响网站展
示延迟的最重要的原因是传输时延,相比之下浏览器的解析及洁染所占时间比重
并不大,故前端开发者可以将大部分模块解析工作主要放在了浏览器端,相应解
决方案如JavaScript模块化解决方案SeaJS. requirejs 等,再如前端页面模板引
擎handbarsjs、mustachejs 等。但是这样做也有相应的缺点,如下所示:
●将模块的解析 与加载工作放在浏览器端,虽然可以实现模块化开发,但
是这样做将会加大浏览器的工作压力,对于复杂交互的页面,浏览器将
不堪重负:

 

四、参考文献

[1]基于Web前端的性能优化方案研究[D]. 刘柳.华中科技大学 2015

原文地址:https://www.cnblogs.com/yuandabo/p/11964889.html

时间: 2024-10-07 20:09:31

《基于模块化的前端开发框架的研究与实现》 论文阅读(十三)的相关文章

基于Html5的移动端开发框架的研究

下面统计信息部分来自网络,不代表个人观点.请大家参考.         基于Html5移动端开发框架调查                                   序号 框架 简介 优点 缺点 备注 侧重点         1 PhoneGap   PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry智能手机

Schema – 模块化,响应式的前端开发框架

Schema 是一个模块化的,响应式的前端框架,方便,快捷地帮助您迅速启动你的 Web 项目.Schema 配备完整的创建多个视图的能力.从桌面显示器到移动设备,它的12列网格提供强大的灵活性. Schema 借助了强大的 LESS,这使得代码结构干净简洁,超级容易维护.无论你是试图快速的设计原型,或者是即将发布的应用程序,Schema 提供了基础和组件来轻松设计任何响应式的 Web 项目. 在线演示      插件下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码]

前端开发框架对比

前端开发框架对比 本文选取了 Bootstrap.jQuery UI.jQuery Mobile.Sencha ExtJS.Sencha Touch.Sencha GXT.Dojo.Dojo Mobile.Mootools.Foundation.YUI.Kissy.QWrap 等 16 个国内外前端开发框架进行初步的横向比较,可以作为大家挑选前端开发框架的初步参考. 近几年随着 jQuery.Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应

基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍

在前面介绍了一系列的<基于Metronic的Bootstrap开发框架经验总结>的随笔文章,随笔主要是介绍各个知识点的内容,对框架的总体性界面没有很好的阐述,本篇随笔主要介绍这个Bootstrap框架的总体性功能界面,介绍其中用到的知识点和整体性的界面.希望读者对框架有一个更加直观.真实的认识了解,界面设计以及相关思路可以借鉴提高,也可以对相关的内容进行相互探讨,共同提高. 1.<基于Metronic的Bootstrap开发框架>技术特点 1)采用最新最炫的Bootstrap响应式

基于AngularJS的前端云组件最佳实践

AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发.AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此AngularJS快速的成为了javascript的主流框架. 一.Amazing的Angular AnguarJS的特性 方便的REST: RESTful逐渐成为了一种标准的服务器和客户端沟通的方式.你只需使用一行javascript代码,就可以快速的从服务器端得到数据.AugularJS将这些变成了JS

前端开发框架Bootstrap和KnockoutJ

江湖中那场异常惨烈的厮杀,如今都快被人遗忘了.当年,所有的武林同道为了同一个敌人都拼尽了全力,为数不多的幸存者心灰意冷,隐姓埋名,远赴他乡,他们将唯一的希望寄托给时间.少年子弟江湖老,红颜少女的鬓边也有了白发.多年以后,听闻那个魔头也不久于人世,他们欣欣然回乡,却发现当初殚精竭虑研究出来对付敌人的招数全无用处,曾经受人尊敬的大侠现在被称为——新手 or 菜鸟.月下小酌,孤独的他们对着夜空举起酒杯,吼一声:“走你,IE6!” ------------------------------------

基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验. 1.Select2控件介绍 这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:http

前端开发框架选型清单

随着Web技术的不断发展,前端开发框架层出不穷,各有千秋,开发者在做技术选型时总是要费一番脑筋,最近,IBM高级工程师王芳侠撰文对Bootstrap.jQuery UI.jQuery Mobile.Sencha ExtJS.Sencha Touch.Sencha GXT.Dojo.Dojo Mobile.Mootools.Foundation.YUI.Kissy.QWrap 等 16 个国内外前端开发框架进行了比较详细的比较,非常值得读者借鉴. 从国外的桌面端框架来说,作者认为主要有以下几个:

基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现

在一个系统里面,往往有很多菜单项目,每个菜单项对应一个页面,一般用户只需要用到一些常用的功能,如果每次都需要去各个层次的菜单里面去找对应的功能,那确实有点繁琐.特别是在菜单繁多,而客户又对系统整体不熟悉的情况下,如果有一个类似浏览器的收藏夹模块,把一些常用的菜单连接保存起来,每次从这个收藏夹主页去找对应的页面,那样确实是省事省力,非常方便.本篇随笔就是介绍在基于Metronic的Bootstrap开发框架里面实现这个收藏夹的思路. 1.系统的收藏夹界面处理效果 为了实现这个收藏夹功能,我们也需要