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

如何组织大型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

这些科技产品和革新或在今年“横空出世”?! 现代Objective-C七宗罪 Google工程总监Ray Kurzweil意欲打造“虚拟朋友” 惠普开源JavaScript框架Enyo更新:支持桌面和移动平台 分析:三星或将成为科技行业第五巨头 是真的 诺基亚真有可能推Android手机 如何打造IE10的指尖触碰式用户体验 SUSE全球OEM联盟总监:为何SAP HANA只选择SUSE? 推荐2013年最佳PHP开发框架 Patrick Wyatt:代码没问题 程序却有bug? NoSQL的可靠性及扩展操作 最新Skype加密技术:“无声”通话能躲过FBI监听 谷歌锁死SDK,能阻止Android碎片化吗? KitCam团队专访:为应用做加法也能雄踞榜首 谷歌哭了:Replicant 4.0 SDK发布搅乱大局 忍者神龟与禅宗启示:如何突破移动广告困境 Linux会是更好的游戏平台?暴雪是这么认为的! 新型恶意软件瞄准Java服务器 AWS被纳为“战略物资”市值或可达到300亿美元? 十张图带你入门Map/Reduce 低端Android野心,Intel发布Atom Z2420处理器 淘宝网的技术发展史(一)——个人网站时代 看Pinterest如何通过架构变化将EC2成本降低了62% 内容vs渠道:法国电信商Free叫板Google 让网站成为应用:Firefox OS掀起革命风潮 屌丝伞兵的逆袭:4人+盛大+远程+最佳手游 新年头彩:Chartboost喜获1900万美元融资 高富帅跻身移动领域 福特开放车载声控API 传低端iPhone最低只要99美元 你怎么看? 辉煌不再 Encanto超级计算机可能被拆分“出售” 知己知彼 企业应用移足云端必须清楚的10大方面 如何赋值给存储过程的datetime类型参数呢? dos界面下如何用dll调用一个.exe文件? 关于CELL粘贴图片 请问怎么样才能在一个软件启动后显示系统的某些信息 如何创建ADO的ConnectionString ? oracle 连接问题 我想考scjp,我想了解它的时效性,意思是几年之内不用再考一遍 怎么获取服务器端机器名称 关于delphi开发工具与其他开发工具的比较? dos界面下如何用dll调用一个.exe文件 dos下如何设置硬盘的电源管理。关闭硬盘停止响应功能的命令。谢谢 Python news 3-19 客户端会出现commandtext does not return a result set提示怎么办? 在BCB中,怎样向一个存储过程的一个DateTime类型的输入参数传递值??????? 我在datawindow中加个按钮,script在那里写,请帮帮忙 祝檬檬生日快乐~~~~~! win2K pro版无法启动! QueryPerformCounter()函数的用法? 求教:如何在delphi 5 中使用HTML Help(.CHM) 神经元网络BP算法源代码? =急=急=急=这个SQL语句是什么意思?? 从数据库读出的一个问题 我昨天在使用过程中发现如下问题,希望能得到您的答复! 请教一个如何写如下的存储过程:查找'abcd',允许错两个字符(错误位置任意),例如'abef'可以, 但是'aefg'不行 小弟学习c有一段时间,究竟学到什么程度才能开始学c++呀? 各位,有没有碰到过这种情况! =急=急=急=大家来看看这个SQL语句是什么意思~~ 在ACESS2000的查询中如何/可否使用ISNULL函数。请举例。 c++ 搞什么呀?不是说有专家回答吗?人呢? blob字段的长度限制是:????? 这样的公司我呆下去还有没有意义? unix 消息队列 这是什么意思??? XML还有什么好处? 读写文本文件的问题??急 程序中每一个按钮和动作对应一个存储过程好吗? 按回车键时,在TEXT中输入大于号怎么实现,谢谢! 请问高手:怎样在interDev6.0中调试程序??? 在jb6中,如何制作包含jdbc和自定义包的jar文件。 问一个很菜的问题:怎么使用编译器? 一个让我头疼的问题,大家来帮帮我! 送分!!!送分!!!!救命救命!!一共200分 何处有单独的SQL Anywhere 5.5下载,只是驱动一下,并不用PowerBuilder开发 www.%s.co.cn如何解决? 请问怎样用VBA将office文档转换为txt文件?? 绝对超难问题,答对的话给50分!!! 为学java散分 说说borland c++的发展史吧 谁能告诉哪里能申请教育网的免费邮件地址,或你给我一个算了,100分给你! BP神经元网络算法的原代码 关于电场强度和电势下列说法正确的是A.具有不规则表面的导体带有电荷时,表面处处等势B.场强大的地方,电势一定高C.场强为零的地方,电势一定为零D.带正电荷的物体的电势一定为正求解释 把原子核和电子所带电荷的电荷用正负数表示出来科学实验表明原子核与电子所带电荷是两种相反的电荷,物理学规定原子核所带电荷为正电荷,氢原子中的原子核与电子各带一个电荷,把它们 紫外测COD波长为什么是254 一半径为R的绝缘球壳上均匀带有+Q的电荷,球心O上场强为零,挖去半径为r的小圆孔求圆心场强和方向 小孩子玩的哪个吹泡泡的是叫什么的? 吹出来的美丽的肥皂泡,求它的配方 奶粉中蛋白质含量为15%-20%,蛋白质按氮量平均为16%,若某1袋品牌奶粉400g中加了1g三聚氰铵,相当于增加了 g蛋白质.奶粉中含蛋白质15%——20%.蛋白质中含氮量平均为16%我知道答案 但是不懂为什么 请问小孩子吹泡泡用的那种液体是用什么化水最好 如何快速提高数学和英语成绩(高中的) 真空中的两个点电荷A,B相距20cm,A带正电Q=4.0×10-10C.已知A对B的吸引力为F=5.4×10-8N,则B在A处产生的场强为多少?请给出具体过程,O(∩_∩)O谢谢 晶胞类型有哪些.经常做题问该晶胞属于哪种晶胞类型.总共有哪些?难道还有复杂的. 怎么快速提高数学英语成绩我是高二文科生 高中物理电场强度题目一微粒质量为m,电荷量为+q,以初速度v跟水平方向成45度角斜向上进入匀强电场区域,粒子恰沿直线运动,求这匀强电场场强的最小值,并说明方向. 电容器,一边接地的接地的那边代表什么意思呢? 怎样快速提高英语数学成绩?我现在初三,初二初三的时候数学英语都没学,根本不懂,现在离中考还有两个月.怎样快速提高成绩? 哪里可以下载初中数学概念大全?初一初二初三的、还有英语 六年级月考复习的方法.我语文和英语读挺好的,就是数学.有什么方法把数学弄上去?叫我点方法和经验.月考遇到不会做的数学题怎么办?月考语数英怎么复习?遇到不会做的数学题怎样解方程? 晶胞的理解? 水平放置的两块平行金属板A、B相距为d,电容为c,开始两板均不带电,A板接地且中央有孔.现将带电荷量...水平放置的两块平行金属板A、B相距为d,电容为c,开始两板均不带电,A板接地且中央有孔. 电场力的方向怎么判断?静电力的方向是指同性相斥,异性相吸是吗?那在物理选修3-1里的电场强度的实验,左边的三个试探电荷的箭头不都指向左边,而右边的不都指向右边吗?那个是什么的方向 什么是超晶胞 相距为d,水平放置的两金属板a,b的电容为C,开始时都不带电,a接地且中间有孔现将带电量为Q,质量为m的带电液一滴一滴从小孔正上方h处无初速地滴下,竖直落到b板上层,电荷全被b板吸收,重力加 一个质量为2*10^-16千克的带正电的油滴,静止在两块相距3.2cm水平放置的平行金属板之间,则两极板之间电压的最大可能是A800v B600v C400v D200v 蛋白质中含氮量平均为16%,以某合格奶粉蛋白质含量为18%计算,含氮量为? 过硫酸钾氧化-紫外分光光度法测总氮220nm波长吸光度过高我用过硫酸钾氧化-紫外分光光度法测总氮时在220nm波长的吸光值都是大于1(用的硝酸钾标准液的浓度时10ug/L硝酸钾),而在275nm波长的 某原子的相对原子质量为X可以形成带两个单位正电荷的阳离子该阳离子核外电子总数为Y则该原子核电荷数为 肥皂泡是如何制作的?怎样配制这种溶液?我要做一个魔术,要吹出得泡泡时间持久的肥皂液. 碱性过硫酸钾紫外分光光度法测定水中总氮时,为什么要在两个波长测定吸光度? 带电荷的原子团一定是阳离子 如何制作美丽的“肥皂泡”? 总氮的测定:碱性过硫酸钾分光光度法测总氮我加完碱性过硫酸钾怎么不显色啊加氮完也不显谁知道为什么啊 若原子得到电子形成带负电荷的阴离子,微粒半径____;原子失去电子形成带正电荷的阳离子,微粒半径____老师还没讲~分别是变大、变小还是不变? 如何做肥皂泡 我刚刚开始做水中总氮的实验,碱性过硫酸钾紫外分光光度法, 某品牌合格奶粉蛋白质含量为18%含氮量为2.88% 电容器为什么要接地接地是为了电势为零 那你直接规定那一极电势为零就行了 还接地干嘛接地电荷还会改变 使情况更复杂 小明每分钟吹一次肥皂泡,每次恰好吹出100个,肥皂泡吹出之后,经过一分钟有一半破了,经过二分钟还有1/20没有破,经过两分半钟肥皂泡全破了,小明在第20次吹出100个新的肥皂泡的时候,没有破的 某品牌合格奶粉蛋白质含量为18%,含氮量为2.88%(假设奶粉中的含氮量全部来自蛋白质).若每某品牌合格奶粉蛋白质含量为18%,含氮量为2.88%(假设奶粉中的含氮量全部来自蛋白质).若每100g奶 肥皂泡如何制作,注意,不要胶水,而且泡泡吹出来要好看,一连可以吹出很多个泡泡! 小华每分钟吹一次肥皂泡,每次恰好吹100个.肥皂泡吹出后,经过一分钟有一半破了,经过两分钟还有二十分 以100g某合格奶粉蛋白质含量喂18%计算,含氮量为2.88%,若该奶粉中60%的氮元素用加入三聚氰胺的办法提供,则需加多少克三聚氰胺才能使奶粉合格 晶胞参数的求法设一个原子的半径为R,那么体心立方堆积的晶胞参数为R=根号(3)/4*a;金刚石型堆积的晶胞参数为R=根号(3)/8*a.问个很菜的问题,这些答案是怎么推导出来的...最好有图解... 亮亮每分钟吹一次肥皂泡,每次恰好吹出100个.肥皂泡吹出之后,经过一分钟有一半破了,经过两分钟后还有二十分之一没有破,经过两分半钟肥皂泡全部破了.小明在第100次吹出100个新的肥皂泡 高中物理电场强度题如图,在光滑绝缘水平面上,三个带电小球a、b和c分别位于边长为l的正三角形的三个顶点上;a、b带正电电荷量均为q,c带负电.整个系统置于方向水平的匀强电场中.已知静电 电容接地数字芯片中,数字地接一电容作用.我也知道大概就是过滤 防干扰吧 原理是什么呢? 牛吃草问题:小军每分钟吹一次肥皂泡,每次恰好吹出100个,肥皂泡吹出后,一分钟后一半破了,两分钟后还有二十分之一没破,两分半以后全破了.那么,小军在吹完第20次后,还有多少个肥皂泡没破 电场强度处处相同的区域内,电势也一定出处处相同.为什么不对? 谁教我怎么判断由吸电子/斥电子效应而导致的原子带电荷正负情况?1L 我说的是有机 肥皂泡?小明每分钟吹一次肥皂泡,每次恰好吹出180个,肥皂泡吹出之后,经过一分钟有一半破了,经过两分钟还有百分之5没有破,经过两分半钟肥皂泡全破了,小明在第30次吹了80个新的肥皂泡的时 一半径为R,电荷量为Q的均匀带点球体,设无穷远处电势为0,求1球体内外电场强度分布2球体内外电势分布 某品牌合格奶粉蛋白质含量为18%,含氮量为2.88%.每100克奶粉中添加0.1克三聚氰胺,理论上能增加多少克蛋白质某品牌合格奶粉蛋白质含量为18%,含氮量为2.88%(假设奶粉中的含氮量全部来自蛋白质) 我总是不会找晶胞,谁能教教我?是不是晶胞向左向右向上向下平移后会重合? 金属锡的原子核带有50个原电荷,他的原子核外带有多少个电子这些电子总共带多少库仑的电荷?为什么金属锡对外不显电性? 原子呈中性是因为原子中的正负电荷数量相等还是因为原子中的正负电荷互相抵消了 请问电容接地有什么用? 静电场中电场强度处处相同的区域内,电势也一定出处处相同吗? 静电是正负电荷的其中一个吗?电与电荷的区别是什么? 紫外分光光度法测定COD用纯水调零还是空气调零为什么 电场强度大的地方是否电势就高?电势高的地方是否电场强度就大?如题 期待详解 在线ing. 原子所带的正负电荷数一定相同吗?请举例说明下 国标COD检测 空白试验的值有多少空白试验中消耗硫酸亚铁铵标准溶液的用量
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘