首页 > 语言 > 关键词 > 模块化最新资讯 > 正文

模块化的JavaScript开发的优势在哪里

2012-10-22 14:59 · 稿源:雨夜带刀‘s Blog

如今模块化JavaScript 的开发越来越火热,无论是模块加载器还是优秀的 JavaScript 模块,都是层出不穷。既然这么火,肯定是有存在的理由,肯定是解决了某些实际问题。很多没接触过模块化 JavaScript 开发者不禁要问,我真的需要模块化吗,模块化相比于传统的模式有什么优势?

JavaScript 本身是没有模块化支持的,很多语言多有,就连CSS都有这样的加载方式。

@import "fed.css";

虽然因为性能问题不推荐CSS这样来进行加载,但这是一种模块化的思想,这种思想对于 JavaScript 来说很有用。幸好JavaScript是一门灵活的语言,可以通过下面这段代码来进行动态加载 JavaScript 文件。

var script = document.createElement( 'script' ),
    head = document.head;

script.src = 'http://example.com/test.js';
script.async = 'async';
head.insertBefore( script, head.firstChild );

传统的加载方式必须在页面中放置一个 script 标签来进行加载。

<script type="text/javascript" src="http://example.com/test.js"></script>

更好的分离

那如果要加载多个就得放置多个 script 标签,如果是加载模块的话,拿 easy.js 来说,页面中始终只要引用 easy.js 即可,这样对于 HTML 和 JavaScript 分离很有好处,在某些场景下这个分离度很重要。

就拿我司的情况来说吧。后端的 view 层并不是由我们前端来开发的,项目上线的时候,前端只能更新 CSS 和 JS 文件,HTML 文件动不了。如果前端要在该页面新增一个 JavaScript 文件的引用是很麻烦的,因为后端程序的更新都要严格按照流程来并有固定的更新时间,如果是用模块加载的方式不用再理会后端的更新。当然,你也许会说,如果原页面中已经有 JavaScript 文件,我直接在原文件中加代码不就行了,那么接下来说说直接在原文件中新增代码会碰到什么样的问题。

更好的代码组织方式

如果单个文件越来越大,维护起来出问题的几率也会越来越大,一个人开发还好,如果是多人开发,不同的代码风格,超多的业务逻辑混杂在一起,不要说维护了,光想想都蛋痛。模块式的开发,一个文件就是一个模块,控制了文件的粒度,每个模块可以专注于一个功能。正所谓一个萝卜一个坑,多人开发时,各自管好自己坑里的萝卜就行了,这也正是 OOP 的思想。

按需加载

还是围绕单个文件来说事,当文件大到一定的程度,性能问题也随之而来了。合并文件是能减少请求,这是会带来性能的提升,但是当文件大到一定的体积时,此时的下载时间可能并不会比多个小文件的下载时间更短。此时就需要权衡请求数和文件体积的关系了。

单文件还有一个问题,那就是缓存是否能充分的利用好。如果一个大体积的文件内包含了超多的业务逻辑和复杂的功能,而这个文件同时又被很多页面引用到。比如在某页面,实际只用到了该文件一个很少的功能,那么其他的代码对于该页面来说就是多余的,浪费了加载流量。你或许会说,这个文件虽然大,但是它第一次加载的时候就被缓存过了,尽管在某页面只用到了极少部分的功能,但只要缓存过,加载还是挺快的。是的,如果情况有这么理想肯定是好事。但是,往往理想和现实都会有差距,如果产品的迭代更新太快,业务需求一天一个样,那么该文件就会三天两头的更新,更新可能是一个很小的功能,但是这样的更新对于刷新缓存的代价可是很大的。如果确实有这种情况,就说明这种设计确实是有问题。如果能合理的对文件进行模块化的管理,那么可以尽量减少不必要的加载,尽量减少刷新大文件的缓存带来的损失,这也需要权衡好,比如将很少更新的合并成一个文件,常更新的独立成模块。

避免命名冲突

JavaScript 本身是没有命名空间的,为了避免命名冲突,经常会使用对象和闭包的办法来避免。用对象仅仅是降低了冲突的概率而已,拿经常使用 jQuery 的开发来说,无论是往 $ 上扩展还是在 $.fn 上扩展,人多了难免会起冲突。或者用自定义的对象,搞个好几层,不光是写起来难记,这样的调用也会在性能上打折扣的。模块化就很好的解决了这个问题,在该模块内的任何形式的命名都不会再和其他模块有冲突,你想起啥名都行了。当然,你硬要在模块内部给 window 上挂一堆东西,我也没办法。

既然每个模块都是封闭式的,那么模块之间如何通信呢?接口的设计那是必须的。很简单,对于像 seajs 这种 CMD 规范的,需要使用自定义的关键字来向外部暴露一个接口。

define(function( require, exports ){
    var hello = 'hello world';
    // 向外部暴露该模块的接口
    exports.hello = hello;
});

easy.js 遵循 AMD 规范,暴露接口更简单,直接用 return 关键词即可。

define( 'hello', function(){
    var hello = 'hello world';
    // 向外部暴露该模块的接口
    return hello;
});

更好的依赖处理

传统的开发模式,如果 B 文件要依赖 A 文件,那么必须在 B 文件前面用 script 的形式先加载好 A 文件。如果有一天,B 文件不再需要依赖 A 文件,或者要增加依赖文件 C,那么又回到了我说的第一个问题上。如果这个 B 文件被 N 个页面在调用,而且页面还跨业务站点,那改起来简直就是噩梦啊。如果是用模块化,只需要在模块内部声明好依赖就行了,增加删除都直接修改模块即可。调用的时候也不用管该模块依赖了哪些其他模块,放心的用就是了。

好了,讲了这么多,如果你还是觉得无动于衷,要么是你接触到的项目较小,还没复杂到这个程度,要么就是我的表达能力有问题。如果你觉得还有什么需要补充的,欢迎在下面留言。

文章来源:雨夜带刀‘s Blog,转载请注明出处。

  • 相关推荐
  • 大家在看
  • 微软将对Windows 10系统更新调整:未来以模块化快速为主

    对于微软来说,他们正在尝试对Windows 10系统的更新进行调整,简单来说就是为模块化做准备,允许该公司在常规操作系统更新之外为核心应用推送功能更新。Windows 10的2020年5月更新为操作系统带

  • 千行千面,地图也能个性化!腾讯位置服务为小程序开发“插上翅膀”!

    6月23日,腾讯位置服务在北京举办一场主题为地图开发者小程序妙课堂的线上直播沙龙。此次直播沙龙分别从腾讯位置服务小程序下集成地图、7种API接口上线微信服务平台、小程序地图的插件、千行千面的个性化地图等几个方向进行了分享和剖析,并结合现场演示环节,为开发者们答疑解惑。腾讯位置服务一直为微信APP及微信小程序提供原生的地图能力支持。在此基础上,腾讯位置服务为小程序开发者搭建起一套完整的地图功能模块,与小程序原生的?

  • 支付宝小程序发战报:小程序规模化V字反弹成行业现象

    支付宝最新数据显示,疫情影响下的各行各业正在加速恢复,支付宝小程序商家已批量化出现V字反弹现象,其中「扶优计划」首批参与商家GMV平均增长超过300%。

  • 汽车行业怎么做数字化营销转型?加推为宝马定制开发了数字化营销助手

    近几年来,汽车行业竞争日益激烈,各大车企也在纷纷构建自己的“数字化营销竞争力”和进行“以客户为中心”的营销转型,研究探索数字化和智能化的技术解决方法。01汽车行业的现状与趋势汽车是高价低频,且决策周期较长的产品,消费者需要产品的直观体验及驾乘感受,同时还要考虑到个性化需求及附加服务等因素,以往线下活动一直是车企及经销商的营销主战场。近两年车市的持续下滑,以及客流量的骤降也制约了很多线下活动的效果,加

  • 报告:JavaScript为最常用整体编程语言 Python超过Java

    在过去的 12 个月中,Python在使用的编程语言列表中已经超过了Java,它也是被研究最多的语言。报告称,在过去的 12 个月里,30%的受访者开始或继续学习Python,甚至比去年还要多。

  • HTTP和HTTPS是什么?

    我们都知道使用浏览器访问一个网站页面,需要知道该网站的域名,例如访问百度知道,在浏览器的地址栏中我们会看到一串URL。网站的URL会分为两部分:通信协议和域名地址。域名地址都很好理解,不同的域名地址表示网站中不同的页面,而通信协议,简单来说就是浏览器和服务器之间沟通的语言。网站中的通信协议一般就是HTTP协议和HTTPS协议。两者分别是什么,有什么区别呢?HTTP协议HTTP协议也就是超文本传输协议,是一种使用明文数据?

  • Switch硬破模块开始批量出货:支持国行主机

    本周,Team-Xecuter(TX团队)宣布,SX Core硬破模块Modchip已经开始面向预订用户批量出货。从本月16日开始,SX Lite也将开始出货。经过样品刷入自制固件、工厂因疫情停产、早鸟用户尝鲜、分发

  • 重磅!「晓程序观察」独家:支付宝小程序最全运营宝典!

    ​随着 618 战火愈演愈烈, 2020 年即将正式驶过一半航程了。年初疫情足不出户时,你们闭门在家做的目标计划书,不知道已经实现得如何了?

  • 冷却模块制造商:5G手机蒸气室需求明年将大幅增加

    【TechWeb】6月23日消息,据国外媒体报道,已有研究机构预计今年全球智能手机出货量将下滑超过10%,5G手机预计也会受到一定的影响,可能会低于预期,相关零部件的需求也将会有影响。虽然5G智能手机零部件今年的需求受到了影响,但部分零部件的制造商,对未来的需求依旧乐观,为5G手机供应蒸气室的冷却模块制造商就有这样的预期。外媒的报道显示,对于用于5G智能手机的蒸气室的出货量,冷却模块制造商对今年出货量增长的预期有减弱

  • 苹果小程序在哪里

    北京时间今天凌晨,在 WWDC 2020 全球开发者大会上,苹果发布了 iOS 14 系统,正式介绍了其最新版的 iPhone 软件。ios14当中的一个亮眼便是被称为「苹果小程序」的新功能。苹果在App Store新加入的「App Clip」功能,就类似于小程序。苹果表示App Clips包含应用的一小部分功能,而无需完整下载安装,使用起来十分地方便。同时苹果也在研发全新的QR二维码格式,该格式同时使用视觉二维码和NFC来快速访问App Clip。以下是关于ios版小

  • 标准化、平台化、产品化….病理AI如何走完“最后一公里”?

    历时107天,阿里云天池主办的"数字人体"视觉挑战赛落幕收官,此次大赛以宫颈癌为切入口,旨在通过提供大规模经过专业医师标注的宫颈癌液基薄层细胞检测数据,让选手能够提出并综合运用目标检测、深度学习等方法对异常细胞进行定位以及对宫颈癌细胞学图片分类,提高模型检测的速度和精度,辅助医生进行诊断。英特尔是此次大赛联合主办方,其开创的英特尔深度学习加速技术,极大的提升了本次比赛的推断效率。大赛期间,来自12个国家和地区的近

  • 享学课堂书写程序人生

    30 岁以后何去何从,是程序员职业生涯的分水岭。有的程序员会继续深造晋升,有的程序员会转投其他行业,也有一部分程序员选择创业,开启从 0 到 1 的新生涯。2018 年 3 月,三位踌躇满志的程序员走在一起,因为改变和梦想他们成立了享学课堂。Lison(李勋) 复旦大学工程硕士,曾就职于金蝶中间件、国防科大等知名企业,负责主持公司的日常各项经营管理工作,组建公司人才团队,制定公司发展战略,负责公司运营和销售管理工作;Jam

  • 超大杯!三星Galaxy Note 20 Ultra保护壳曝光:相机模块大的惊人

    6月21日,据外媒报道,网上已经流传出了关于三星Galaxy Note 20和Note 20 Plus/Ultra的手机保护套,从照片可以看出来,相机似乎得到了升级,因为相机模块十分大。从图片可以这几款机型的差别,

  • 稳健医疗:数字化建设、信息化布局助力“抗疫”

    6 月 12 日,深圳市政府新闻办公室在市政新闻发布厅举行(工业和信息化专场)新闻发布会。深圳市工信局局长贾兴东在会上介绍了深圳工业和信息化领域贯彻落实全国“两会”精神,落实“六稳”、“六保”的工作,推动产业发展有关情况,以及深圳工业和信息化领域抗击疫情工作中的亮点,并充分肯定了稳健医疗等企业在此次全球战疫中,贡献了“深圳力量”。新闻发布会现场稳健医疗用品股份有限公司董事长李建全受邀出席新闻发布会,并做

  • 三星Galaxy Note 20系列保护壳曝光:相机模块超大 超大杯还有黑科技

    按照往年惯例,三星会继续在今年的下半年推出全新一代Galaxy Note20系列旗舰,甚至有外媒表示该机将于8月5日与大家见面。随着距离预计的发布时间越来越近,已经开始有越来越多的消息得到曝光。继渲染图和部分关键配置之后,现在有最新消息,近日有外媒晒出了据称是Note 20和Note 20 Plus/Ultra的手机保护套。据外媒最新晒出的保护套谍照显示,与此前曝光的消息基本一致,全新的三星Galaxy Note 20系列将延续矩形后置相?

  • 联想开卖全球首款5G笔记本电脑,搭载业界最小5G模块

    忘掉5G手机吧,5G笔记本电脑的普及已由联想正式拉开序幕,联想Flex 5G已于 6 月 18 日发布,售价1399. 99 美元,是全球首款对外发售的5G笔记本电脑。Flex 5G在 2019 年ComputerX展会上首次亮相,在 2020 年CES国际消费电子展上更名为YOGA 5G(在部分市场中使用)。Flex 5G是全世界最先使用高通最新芯片组的笔记本电脑之一,内置高通骁龙8cx 5G处理器和X55 5G调制解调器,8cx可以延长电池寿命,一次充电可保证长达 24 小时的使用时?

  • 爱奇艺“腾化”

    如果说奈飞Netflix是互联网视频的先驱,爱奇艺无疑是中国粉丝中最执着的那位。龚宇为Netflix前CHO帕蒂·麦考德的《奈飞文化手册》推荐序中写道:“也许是因为爱奇艺与Netflix处于同一个行业,所以我们更加理解和赞同Netflix的企业文化。”

  • 京东:今日在港公开发售 最高公开发售价为236港元/股

    今日,京东在港交所公告称, 6 月 8 日(星期一)上午九时开始香港公开发售,预期 6 月 11 日(星期四)定价, 6 月 18 日上午九时正在香港联交所交易。在港上市最高公开发售价为 236 港元/股,将发行1. 33 亿股发售股份。

  • 苏宁内测“练摊儿”小程序 主推小商品

    近日,苏宁易购正在开发一款名为“练摊儿”的微信小程序,目前已进入到内测阶段。“练摊儿”小程序首批上线 5000 个优选SKU,主推生活日杂、家居、小数码、食品等小商品。

  • 30万「程序猿」的未来简史:去O,上云

    “有一天醒来,我站上体重秤,显示身体年龄 57 岁。”不久前,脱口秀演员呼兰决定不再兼职程序员工作。毕业于哥伦比亚大学精算专业的呼兰,曾经在上海担任创业公司CTO。上秤那天,他的“第一个想法是,再干 3 年就可以退休了”。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议