说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

如何组织大型JavaScript应用中的代码?

HTML文档下载 WORD文档下载 PDF文档下载
我们常常看到Web应用中将JavaScript、CSS、图片文件分别按文件类型区分,这一习惯在过去的Web开发场景中尚可胜任。但随着Web App的发展,JavaScript应用越来越复杂,开发者需要更清晰地、高效的文件结构。

本文作者Cliff Meyers是一个前端工程师,熟悉HTML5、JavaScript、J2EE开发,他在开发过程中总结了自己在应对JavaScript应用越来越庞大情况下的文件结构,深得其他开发者认可。以下为CSDN编译:

地板上堆放的衣服

首先,我们来看看angular-seed,它是AngularJS应用开发的官方入门项目,其文件结构是这样的:

  • css/
  • img/
  • js/
    • app.js
    • controllers.js
    • directives.js
    • filters.js
    • services.js
  • lib/
  • partials/

看起来就像是把衣服按类型堆在地板上,一堆袜子、一堆内衣、一堆衬衫等等。你知道拐角的那堆袜子里有今天要穿的黑色羊毛袜,但你仍需要花上一段时间来寻找。

这种组织方式很凌乱。一旦你的代码中存在6、7个甚至更多的控制器或者服务,文件管理就会变得难以处理:很难找到想要寻找的对象,源代码控制中的文件也变更集变得难懂。

袜子抽屉

常见的JavaScript文件结构还有另一种形式,即按原型将文件分类。我们继续用整理衣服来比喻:现在我们买了有很多抽屉的衣柜,打算将袜子放在其中一个抽屉里,内衣放在另一个抽屉,再把衬衫整齐地叠在第三个抽屉……

想象一下,我们正在开发一个简单的电子商务网站,包括登陆流程、产品目录以及购物车UI。同样,我们将文件分为以下几个原型:models(业务逻辑和状态)、controllers以及services(HTTP/JSON端点加密),而按照Angular默认那样非笼统地归到“service”架构。因此我们的JavaScript目录变成了这样:

  • controllers/
    • LoginController.js
    • RegistrationController.js
    • ProductDetailController.js
    • SearchResultsController.js
  • directives.js
  • filters.js
  • models/
    • CartModel.js
    • ProductModel.js
    • SearchResultsModel.js
    • UserModel.js
  • services/
    • CartService.js
    • UserService.js
    • ProductService.js

不错,现在已经可以通过树形文件目录或者IDE快捷键更方便地查找文件了,源代码控制中的变更集(changeset)也能够清楚地描述文件修改记录。虽然已经获得了极大的改进,但是仍有一定的局限性。

想象一下,你现在正在办公室,突然发现明天有个商务出差,需要几套干洗的衣服,因此给家里打电话告诉另一半把黑色和蓝色的西装交给清洁工,还有黑纹领带配灰色衬衫、白衬衫配纯黄领带。如果你的另一半并不熟悉衣柜,又该如何从三条黄色的领带中挑出你的正确需求?

模块化

希望衣服的比喻没有让你觉得过于陈旧,下面举一个实例:

  • 你的搭档是新来的开发者,他被要求去修补这个复杂应用中的一处bug。
  • 他扫过这些文件夹,看到了controllers、models、services等文件夹整齐地排列着,但是他仍然不清楚对象间的依赖关系。
  • 处于某些原因,他希望能够重用部分代码,这需要从各个文件夹中搜集相关文件,而且常常会遗漏某些文件夹中的对象。

信或不信,你确实很少会在新项目中重用很多代码,但你很可能需要重用登陆系统这样的整个模块。所以,是不是按功能划分文件会更好?下面的文件结构是以功能划分后的应用结构:

  • cart/
    • CartModel.js
    • CartService.js
  • common/
    • directives.js
    • filters.js
  • product/
    • search/
      • SearchResultsController.js
      • SearchResultsModel.js
    • ProductDetailController.js
    • ProductModel.js
    • ProductService.js
  • user/
    • LoginController.js
    • RegistrationController.js
    • UserModel.js
    • UserService.js

虽然现实世界中有空间限制,难以随意整理服装,但是编程中类似的处理却是零成本的。

现在即使是新来的开发者也能通过顶级文件夹的命名理解应用的功能,相同文件夹下的文件会存在互相依赖等关系,而且仅仅通过浏览文件组织结构就能轻易理解登录、注册等功能的原理。新的项目也可以通过复制粘贴来重用其中的代码了。

使用AngularJS我们可以进一步将相关代码组织为模块:

var userModule = angular.module('userModule',[]); userModule.factory('userService', ['$http', function($http) {  return new UserService($http);}]); userModule.factory('userModel', ['userService', function(userService) {  return new UserModel(userService);}]); userModule.controller('loginController', ['$scope', 'userModel', LoginController]); userModule.controller('registrationController', ['$scope', 'userModel', RegistrationController]);

如果我们将UserModule.js文件放到user文件夹,它就成了这个模块中使用到的对象的“manifest”,这也是适合RequireJS或者Browserify中放置某些加载指令的地方

如何处理通用代码

每个应用都会有某些代码广泛使用在多个模块中,我们常常使用名为“commom”或者“shared”的文件夹来存放这些功能代码。又该如何处理这些通用代码呢?

  1. 如果模块中的对象需要直接访问几个“通用”对象,为这些对象提供几个Facade(外观模式)。这有助于减少每个对象的依赖者,而过多的关联对象通常意味着糟糕的代码结构。
  2. 如果“通用”模块变得过于庞大,你需要将它按功能领域细分为多个子模块。确保每个应用模块只使用它需要的“通用”模块,这即是SOLID中“接口隔离原则”的变种。
  3. 在根范围($rootScope)添加实体,这样子范围也可以使用,适合多个控制器都依赖同一个对象(比如“PermissionsModel”)的情况。
  4. 在解耦两个不明确互相引用的组件时,请使用事件。Angular中Scope对象的$emit、$broadcast以及$on方法使得这种方式变得现实。控制器能够触发一个事件来执行某些动作,然后再动作结束后收到相应地通知。

原文链接:CLIFF MEYERS

高端实战技术培训:OpenStack企业应用之路 据统计,Oracle已击败IBM跃居软件行业第二 【技术博客推荐】2014年值得关注的10个开源项目 Intel在深圳建立智能设备创新中心 将投入1亿美元 免费获得价值1200元Unity2014顶级盛会门票! IBM公布Softlayer中国业务落地时间表 推荐30款最佳的数据可视化工具 数据库迁移测试:选白盒还是黑盒? 东软发布首款英特尔架构企业级移动终端解决方案 英特尔与腾讯创立游戏创新实验室 推进RealSense技术 《近匠》系列沙龙之探寻绝密武器:移动跨平台开发 iOS走向开放:苹果新推iAd Workbench广告服务 腾讯薛伟:快速模型更新在精准广告推荐中的应用 微软Build2014第一天要点精华汇总(组图) Windows 8.1 Update 1五大改变:任务栏回归,增强鼠标支持(图) 【十大院士】怀进鹏:全球的计算模式可能重新形成 微软Build2014第一天应了解的15件事 TypeScript1.0发布,完美支持Visual Studio系列产品 欲与Android展开价格战,微软宣布在移动设备上免费开放Windows 2014深圳英特尔信息技术峰会次日要点汇总 4月4日:微软39周岁,生日快乐! 正式进军硬件市场 Atlassian发布可穿戴设备Bitband 云计算时代IT专业人员需具备的10项技能 【走近院士】李德毅:大数据是连接虚拟和现实世界的桥梁 微软Build2014大会第二天干货总结 Microsoft Azure拥抱Puppet、Chef、MongoDB... 唏嘘不已!Brendan Eich上任Mozilla CEO仅十天即因歧视同性恋被迫辞职 最火HTML5 JavaScript游戏引擎:国外篇(一) Facebook发布PlanOut 开源部分A/B测试源码 一周消息树:6款Java转C#的最佳工具、Web开发者必备的9个软技能 对话“宙斯杯”获奖代表:依托京东云平台,打造精品电商CRM 关于微软开源WinJS,开发者必须知道的5件事 软件发布:邮件群发机 软件发布:iFORM 软件发布:QQrobberBuild(QQ强盗生成器) 软件发布:freeRes 软件发布:公务员之路 软件发布:智能拨号系统 问个INET 控件使用时遇到的问题 软件发布:RegTool注册控件组 软件发布:Windows变脸王 软件发布:FIFA2002视频设置 软件发布:Flash播放器 我写好了一个applet画板程序,愿和大家交流,分享原码,并一同解决余下问题。 请问在BCB中怎样实现动态数组??? Window2000+Apache+Tomcat4.0下class文件放哪里呀?自己建新的目录,怎么建? 请问在win98中的sql server数据库如何导入winnt下sql server服务器中。 济南 应用程序端传递过来的参数不能在导出函数外用吗? BCB 用Install shield制作oracle数据安装程序,在客户端不装ORACLE,如何设置DBE? to:chechy 分来了! 请问哪里有 com本质论 下载啊,最好是中文版的,英文亦可 为什么我的程序在案康柏的ipad上不能使用? 如何在image里预先显示白色背景? 回复phoenix96_2000(Jack Of All Trades) 请问哪里有《Delphi5企业级解决方案及应用剖析》配套光盘源码下载? hehe...请问能不能在WIN2000P建域呢?? 在对话框中放一个静态文本,为何执行时看不到该文本? 哪里有Inside COM+的书籍下载? 请教各位:如何对zf='dd'转换成十六进制? 请教: 二级域名name.***.com是怎么实现的? vc中使用string类型的问题 肮脏的九运会,肮脏的广州!建议以后取消全运会!! 我做了一个OCX控件,里面有个属性SName,我现在想在属性窗口里改了它的值,马上可以在控件上改变,请教各位! 为什么我的USB接口键盘在用软盘启动后的DOS状态下不响应? JSP,薪水有多少? delphi中怎样调用package? ado 的问题 图片从数据能显示,图片名称不能显示? 请问unix下有没有类似于windows下的DLL的二进制代码存储文件机制?(当然不是javaBean) 关于语音控件CTTS1.0? 请教各位:问如何对变量zz='02'转换成16进制? flash 5。0哪里有下载 在vc中调用用vb写的com出错,为什么? 关于多态性的理解,对吗? 如何知道1个类是不是存在? ??请教:我的程序 help!help! 如何对程序执行动作放缓慢! 很小很小的问题!! 棘手问题??急急!!! 各位懂软件测试的朋友,请介绍一些资料给我,非常感谢! 如何写一篇学会满足的话题作文 围绕改革开放三十年的变化写一篇作文主要写家乡在改革开放后的变化,希望有高人把结构给我列出来,不要作文,不知道写这样的征文是否要向积极的方向去写啊,请说明观点 写一作文:继承革命传统,宏扬中华文明.要700字以上,高中水平的可以 以"初一的生活"为话题的作文 急求一篇改革开放30周年写自己家乡变化的文章我是郑州市的就写郑州市的变化就行了1500个字 求继承革命传统,弘扬长征精神的作文偶们寒假的历史作业,1000字啊~求各位帅哥美女帮忙了昂! 爱,带给我的烦恼 作文 作文“成长烦恼“怎么写 有关革命传统教育的诗歌或文章 【我的烦恼】初一作文600= =最好原创.不是自己写的也找几篇作文拼起来的 怎样点评作文“成长中的烦恼”?请帮我试写一段,是点评作文的内容,不是作文 关于好人好事的作文200~300字 好滴加分分噢 初一作文我的烦恼. 体裁不限,诗歌除外,以良心为话题一小时内解决, 好人好事作文(300子左右) 我喜欢荷花的作文400字 (一)阅读下面文字,自选角度,写一篇不少于800字的作文.除诗歌外,文体不限.曾经有这(一)阅读下面文字,自选角度,写一篇不少于800字的作文.除诗歌外,文体不限.曾经有这样一个故事:有个 好人好事作文300字 400字荷花作文? 速求一篇初中生600字作文,体裁除诗歌、散文外,一律不限. 好人好事作文350字.要自己写的,还要完整. 描写荷花的400字作文荷花我喜欢浪漫的玫瑰花,喜欢富丽堂皇的牡丹,喜欢高雅的郁金香,更喜欢洁白美丽的荷花。“接天莲叶无穷碧,映日荷花别样红。”这句诗是宋朝诗人杨万里写的。 好人好事作文500字左右的我急等啊,好心人帮帮我 关于荷花的作文300字 作文题材:改革开放30年如何写类似文章? 写我们班的好人好事多作文,至少500字. 描写荷花的作文300字 作文“我的烦恼”怎么写500字 我身边的好人好事作文 ..500字以上 急,写荷花的作文(300字左右) 我的烦恼作文怎么写? 好人好事作文100字 要300字荷花的作文 请帮忙写篇"我的烦恼"的作文,800字左右,要有真情实感,高中生作文. 关于改革开放的作文500字左右 成长的足迹作文500~550字..答得好再加分。。 请根据材料,自选角度,自选文体(除诗歌)800字!两条小鱼一起游泳,遇到一条老鱼从另一个方向游来,老鱼向他们点点头,说:“早上好,孩子们,水怎么样?”两条小鱼一愣,接着往前游.游了一会 改革开放以来的变化的作文怎么写?1000字以上,2000字以下.各位有段落也行,(初中水平) 急求关于成长的快乐的作文一篇550字 求一篇关于暑假好人好事的1000字文章是以班级的名义的那种文章.不要是第一人称 我 的那种文章.也可以是义务劳动,也可以是好人好事.要多件事情. 作文:从改革开放到现在之间650字左右条理清晰 明确中心 作文《长大以后》550字快,急用! 谁能给我一篇好人好事的作文800字左右 改革开放论文本人现在需要一篇关于改革开放30周年的论文,字数1500至1800左右, 我长大了作文550字速度啊 好了给10分 一千字好人好事作文写一同学的事迹,助人为乐.平常默默无闻,没有人看得见他.但他随手捡垃圾、关门关窗,帮同学盛饭……习惯铸成美.我是实在写不出来.一点感觉都没有.明天就交,1000字. 急需以”用美好的心灵看世界”为题的文章!希望看到帖子的各位朋友, 有关红色革命的作文?有关红色革命的作文800字,(要求:有题目,内容有条理).急求啊!!(比如:什么是革命,怎么理解革命?) 帮忙写一篇有关革命题材感人故事的作文,400-500字, 求一篇作文!《让我感动的那一刻》作文水平在初二 600字左右 写身边的事我不要网上已经有的 要新的! “用美好的心灵看世界”为题写一片作文要一记叙文 联系自己和社会生活的实际来写- 春天像刚落地的小娃娃”“春天像小姑娘”“春天像健壮的青年”,朱自清在文章结尾以人喻春,赞美春天.你能根据自己的阅读感受用另外一种表达方法为文章写一个结尾吗14课 《春》 只允 借物喻人400字的作文 写荷花最好是写荷花 以“用美好的心灵看世界”为话题不少于五百字的作文 以春天为主题的作文? 拜托帮我写一篇关于宁波30年改革开放的变化的作文吧关于宁波的30年,14号以前要,需要1500字 革命传统教育作文要500字以上,小学水平的可以 怎么写话题作文“留下”? 求描写家乡变迁,歌颂改革开放带来新变化的作文要从新颖的角度,多描写家乡的事,身边的事,我要几篇范文,参考参考. 写以《弘扬延安精继承革命传统》写1200的作文怎么写?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn