javascript编程技巧_可配置化

原创 2012年03月28日 10:46:41

javascript编程技巧_可配置化

javascript模块化、模块加载器初探

最常见网站的javascript架构可能是这样的:

  • 一个底层框架文件,如jQuery
  • 一个网站业务框架文件,包含整站公用业务模块类(如弹框、ajax封装等)
  • 多个业务文件,包含每个具体页面有关系的业务代码

  为了减少一个HTTP请求,我们可能将底层框架文件和网站业务框架文件combo成一个文件,作为一个公用文件引入到每个需要使用javascript的页面中,再在具体的页面中引入和当前页相关业务js文件。为了减少页面加载脚本阻塞现象,我们还可以将脚本文件放在html的body底部进行加载。

  这看似是一个很好的javascript架构方案。每个页面最多引用两个js文件,打开首页后,后续页面都可以使用缓存中的combo过的js。如果底层框架改动不太频繁,那么缓存在用户浏览器中的combo过的框架文件能够使用较长的时间。

  当网站使用过一段时间后,你可能就会发现一些问题出来了。  

  • combo过的框架文件过大。虽然可以使用YUI Compressor或Google Clousure等第三方压缩工具压缩、启用gzip、使用CDN等优化手段优化。但底层框架会随着开源框架升级,公用模块增多,导致combo后的框架文件越来越大。
  • 业务框架改动频繁,导致浏览器缓存作用减小。由于业务的增加,可能公用的业务模块越来越多,导致业务框架频繁修改。代码修改后,浏览器需要重新加载新的框架文件。
  • 团队开发问题。随着团队人数的增加,可能每个人开发一个公用业务模块,造成多人需要对同一个文件进行修改。若使用TFS这种独占式签出的版本管理工具,会对团队的开发效率造成一定影响。

  我们再看看使用模块加载器、并对javascript进行过模块化处理的网站的javascript架构:

  • 一个模块加载器文件。如loader.js
  • 多个底层模块(如selector、ua等),多个业务模块(如dialog、suggest等)
  • 多个页面相关的脚本调用文件

  优点体现出来了:

  • 按需加载:只加载当前页面需要的模块和文件,不需加载任何多余文件和代码。大大缩减了代码量
  • 并行加载:很多loader提供了并行加载多个文件的功能,减少了代码加载的时间,优点能做到下载和执行相分离。
  • 利于团队开发:团队中每个人负责开发各自的模块,之间互不影响。
  • 最大限度的利用缓存:模块颗粒化后,每次更新可能只是其中一个小模块,其他未更新的可以利用浏览器中的缓存。

  既然javascript模块化、使用模块加载器有这么多的好处,那么我们需要付出哪些努力:

  • 选用或实现loader
  • 底层框架的模块化:我们需要将底层框架按照各自的只能分成不同的模块,分清楚之间的依赖关系
  • 实现业务模块:将原来的业务模块按照loader约定的代码方式进行修改,实现新的业务模块按照loader的方式编写。  

使用EditPlus技巧,提高工作效率

使用EditPlus技巧,提高工作效率 设置EditPlus的配置文件路径 因为EditPlus是可以绿色使用的(直接解压那个EditPlus压缩包文件即 可直...
  • wesurt
  • wesurt
  • 2016年08月08日 15:43
  • 3811

慕课网:Web前端面试题目及答案汇总

HTML/CSS部分 1、什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元...
  • dongyang0311
  • dongyang0311
  • 2016年06月29日 14:44
  • 11506

最全面的JavaScript调试技巧总结

最全面的JavaScript调试技巧总结
  • qq_26676207
  • qq_26676207
  • 2016年11月17日 11:27
  • 2102

JavaScript 可配置函数与柯里化

有时候你可能会写出这样的函数:function foo(n, flag){ ... }也许情况比这个更复杂,总之你希望用一个参数来控制程序流,这相当于你有一个配置函数的需求,不妨尝试柯里化吧。...
  • zccz14
  • zccz14
  • 2016年06月06日 04:08
  • 289

JavaScript:通过事件委托实现事件可配置

http://www.html-js.com/article/JavaScript-JavaScript-the-event-delegate-to-implement-event-can-be-co...
  • SalmonellaVaccine
  • SalmonellaVaccine
  • 2015年01月09日 07:29
  • 547

JavaScript属性的可迭代、可修改和可配置特性

JavaScript 对象属性的特性:writable、enumerable 和 configurable
  • u010278882
  • u010278882
  • 2016年02月03日 18:01
  • 1128

web页面可配置话的动态生成spring定时任务,持续到化数据库

  • 2017年07月26日 11:45
  • 12KB
  • 下载

可配置化MapReduce开发

可配置化MapReduce开发 新工作环境,被封装了MapReduce,且被起名字 ​因为封装,将mapreduce封装了一层。 将原来简单的mr...
  • qq_33792843
  • qq_33792843
  • 2018年01月14日 19:21
  • 22

使用quartz+spring实现简单的可配置化的定时任务(可和数据库配套使用)

首先定义一个job要实现Job接口,以后各种各样的任务都放在这个job中执行: import org.quartz.Job; import org.quartz.JobDataMap; import...
  • IOpfan
  • IOpfan
  • 2016年06月07日 11:28
  • 681

黑马程序员--09.动态与代理AOP--06【动态代理实例化的过程升级--目标对象+系统功能的参数化】【实现类似Spring的可配置AOP框架】

动态代理与AOP----6 动态代理实例化的过程升级--目标对象+系统功能的参数化 实现类似Spring的可配置AOP框架 ----------- android培训、java培训、java学习...
  • u011406124
  • u011406124
  • 2013年08月24日 09:14
  • 946
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript编程技巧_可配置化
举报原因:
原因补充:

(最多只允许输入30个字)