转载,网站前端模块化开发策略研究

引言

当今互联网飞速发展,网络用户的需求变化既快又大,且不可捉摸,大部分网站的更新周期都是以日、小时甚至分钟为单位。在这种情况下,网站的前端就成了 变化最频繁的部分。随着互联网公司对前端开发的逐渐重视,前端开发人数也越来越多,可是,技术人员的投入总是有限的。面对需求的快速变化,引发了很多如前 端编码规范、前端性能优化、前端安全漏洞防范等方面的问题。为了解决这些问题,一种具有先进开发思想和良好设计模式的前端模块化技术正逐渐成熟,并受到越来越多公司的青睐。

1 前端模块化技术的应用现状

前端模块化开发就是将网站的前端按照布局和功能分成若干个模块,每个模块完成特定的功能[1],然后,将所有模块按一定组织方式形成一个整体,完成整 个系统的功能。这样就极大地降低了程序员开发时彼此之间的干扰,更加有利于多人协同开发。而且,基于前端模块化开发技术的应用还具有提高网页浏览速度、高 效组织与维护网络信息资源、减少代码冗余等优点。

为解决前端模块化开发技术发展过程中遇到的种种问题,出现了一些开发工具,如:CSS Sprites、YUI Compressor等。为提高前端模块化开发效率,又出现了一些javascript组件库,如 Jquery、Yahoo UI Library、mootools等。这些工具和组件库只是在某个方面弥补了前端模块化开发的技术空白并提高了工作效率,却并不能完全解决问题。而且,随着前端模块化开发技术的蓬勃发展,网站的大量需求又都转到前端处理,甚至将网页做成交互型应用程序,这个趋势使前端开发代码量急速增加,并更进一步增加了前端模块化开发的难度。

由此可见,现在的前端模块化开发已经发展成为一个系统工程,开发人员必须从多方面考虑,多角度分析,从细节做起,共同协作才能实现前端模块化开发的目 标。目前,国内只有腾讯、百度、新浪、豆瓣等少数几个网站设计了自己的前端模块化开发框架结构,拥有自己的开发策略,但这些公司对于前端模块化开发技术的运用也不是很娴熟。因此,对前端模块化开发策略的研究还是非常必要的。

2 前端模块化技术的开发策略

前端模块化开发的基本思想与模块化的程序设计相似,即在Web上以模块为基本单位划分与组织信息,将网页的内容分开,形成若干个相对独立的模块。模块只是用来存放基本页面元素的容器,并把常用的页面元素也制成模块,便于这些页面元素的调用与管理。因此,前端模块化技术没有复杂的逻辑运算,而是主要关注 作为骨架的HTML与作为表现层的CSS以及实现行为的JavaScript三方面的拼装组合和代码复用上,以减少它们之间的循环依赖、降低耦合、提高设 计效率。这时就需要有一套有效的开发策略,所有的模块都在这个策略下进行设计,并以此划分工作任务。常见的开发策略有以下三种。

2.1 传统模块化开发策略

传统模块化开发首先将每个页面拆分成很多个基本模块,比如logo、导航、内容1、内容2、尾部导航、版权信息等等,然后将每个模块生成一个单独的文件。当页面要求加载时,使用载入CSS,使用Ajax技术分别载入。

这样做看上去简单易行,却存在很多问题。首先会出现大量模块,不但不便于管理,还会使请求数猛增。例如一个页面有四个模块,那就至少会产生4(个模 块)×2(个类型:CSS/JS)=8个请求,再加上一些函数库,请求就会更多。另外内容未经过压缩也会造成严重的性能问题,阻塞页面显示。其次,这种方式不适合团队开发。

2.2 页面级的模块化开发策略

页面级模块化开发,指根据不同页面的模块划分情况设定所需的JavaScript与CSS模块。例如页面A,设定header.js、 list.js、info.js、header.css、list.css和info.css六个模块,页面B设定info.css和info.js两个模块。所有页面和其所依赖的模块关系都由开发者写在页面级的设定文件中。当某个页面请求其所需模块时,通过一些工具,例如Mini工具,依据设定文件将所需模块合并及最小化,这样只需一个请求,就可以得到请求页面所需的所有模块,解决了传统模块化开发中请求数量过多和内容未压缩的问题。

虽然页面级的模块化开发策略有效地解决了请求数量及压缩问题,但仍存在很多问题。首先,不易维护。当需要移除一个页面时,该页面所依赖的模块也应全部移除,可是又不能百分之百确定别的页面不会用到将要移除的依赖模块,最终导致模块越积越多。其次,线上调试非常困难。因为发布的是混淆后的代码,几乎无法 实现调试。因此,还需要通过进一步调整开发策略来解决问题。

2.3 模块级的模块化开发策略

模块级的模块化开发,是指开发人员分别定义自身页面模块的依赖关系,即每个页面所需模块的设定,而不是像页面级模块化开发那样记录在一个中央设定文件 中。当用户请求某个页面时,页面的Controller会指定需要载入的页面,但不需指定该页面要依赖哪些模块,这些需要载入的模块会由加载的 Loader自行计算得到。然后,Loader会与服务器端交互,将所需模块分组、合并与压缩,再并行下载到请求下载的浏览器上。

当前基于这种模块级模块化开发规范的框架有很多,例如RequireJS和YUI3。RequireJS是目前使用非常广泛的框架,只要定义好模块的 依赖关系,就会依次将所需模块自动载入,不需做任何配置。而发布到线上时,可以使用Node.js提供的r.js进行合并与最小化。但 是,RequireJS仍然存在发布时间偏长和线上调试困难的问题。相比之下,YUI3的Loader下载方式则更加优秀,其使用一种称为Combo Handler的机制[5],它会将线上文件直接以GET的方式指定路径,进行动态合并及最小化。由于受到GET的长度限制,YUI Loader会根据模块的载入顺序、总数量和当前浏览器的GET长度限制等信息自动将Combo Handler的请求分散为若干个,进行并行下载,这样就解决了RequireJS遇到的问题。

3 结束语

由此可见,依赖当前出现的多种框架及工具,并加以适当修改就可以很好地实现模块级模块化开发策略,从而有效地解决了前端模块化开发中的诸多问题,既便 于团队开发,又具有发布快、易于线上调试及维护、提高性能等优点。但与此同时,新问题也在不断涌现,例如页面模块的划分、模块的粒度和模块的继承等都还存 在很多问题,这些都需要前端开发人员继续努力去解决,进而完善模块化开发策略。

【编辑推荐】

  1. 前端模块化开发的价值
  2. 前端模块化开发那点历史
  3. 前端模块化设计思路

转载地址  http://mobile.51cto.com/web-407715.htm

时间: 2024-10-15 23:32:57

转载,网站前端模块化开发策略研究的相关文章

前端模块化开发学习之gulp&browserify篇

 随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发的时候,你会觉得十分费劲,因为你不知道文件之间复杂的关系,所以我们需要利用一些插件来配合进行模块化的开发. 所谓模块化的开发,写过nodejs的人都知道,文件之间的依赖可以用require()实现,但是浏览器端是不支持这样的依赖形式的,而browserify却可以解决这个问题,再加上gulp这个强大

前端模块化开发的价值

本文发表在<程序员>杂志 2013 年 3 月刊,推荐购买. 前端模块化开发的价值 随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做项目时,常常会将一些通用的.底层的功能抽象出来,独立成一个个函数,比如 function each(arr) { // 实现代码 } function log(str) { // 实现代码 } 并像模像样地把这些函

前端模块化开发的价值(seaJs)

随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做项目时,常常会将一些通用的.底层的功能抽象出来,独立成一个个函数,比如 function each(arr) { // 实现代码 } function log(str) { // 实现代码 } 并像模像样地把这些函数统一放在 util.js 里.需要用到时,引入该文件就行.这一切工作得很好,同事也很

【转】前端模块化开发的价值 #547

前端模块化开发的价值 随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做项目时,常常会将一些通用的.底层的功能抽象出来,独立成一个个函数,比如 function each(arr) { // 实现代码 } function log(str) { // 实现代码 } 并像模像样地把这些函数统一放在 util.js 里.需要用到时,引入该文件就行.这一

前端模块化开发篇之grunt&amp;webpack篇

几个月前写了一篇有关gulp和browserify来做前端构建的博客,因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候),所以这里再强烈推荐一款js打包工具-webpack.webpack很强大,不光可以模块化加载js,甚至还有jsx,css,图片等等.可以看看webpack托管到github的官网,相信你看一眼就能懂webpack的强大之处了.进入webpack官网>> = =说到此处,不免有些尴尬,由于博主的英文so 一般,对webpack的认识还不够深,

前端模块化开发解决方案详解

一.模块化开发方案 前端发展到今天,已经有不少模块化的方案,比如 CommonJS(常用在服务器端,同步的,如nodejs) AMD(常用在浏览器端,异步的,如requirejs)(Asynchronous Module Definition) CMD(常用在浏览器端,异步的,如seajs) UMD(AMD&& CommonJS) 这些模块化规范的核心价值都是让 JavaScript 的模块化开发变得简单和自然. 服务器端模块 在服务器端,所有的模块都存放在本地硬盘,可以同步加载完成,等待

【名词】前端模块化开发

对于es6来说,本省自带模块化开发,其实就是export 导出,import导入 es5之前是通过require.js,sea.js实现模块化. 相关资料:https://blog.csdn.net/tsingsn/article/details/72307788?utm_source=itdadao&utm_medium=referral 作者:smile.轉角 QQ:493177502 原文地址:https://www.cnblogs.com/websmile/p/9606114.html

【原创】结合公司网站首页,谈前端模块化开发与网站性能优化实践

说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sybboy/p/4877055.html 下面可是我自己的东西,算是这段时间搞前端架构的总结吧: 目录 1.遇到的问题 2.目标 3.如何解决 4.结果分析 5.尚未解决 6.说在后面 遇到的问题 问题1----脚本混乱,没有层次和固定代码位置 问题2----脚本和css请求较多,请求未压缩,文件未压

[转载]网站前端性能优化之javascript和css——网站性能优化

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用户来说特