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

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

无人机应用,为何屡遭苹果拒绝 2013年Java继续火的五大理由 Rails所有版本都有SQL注入漏洞?其实没那么严重 如何设置Windows Server 2012 NTFS权限 智能手机大局已定 HTC难扭转乾坤? 比谷歌手表更酷!基于大数据分析的睡衣 众投资金:改变了移动游戏开发的一切一切 这些科技产品和革新或在今年“横空出世”?! 现代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 ★★★★★给个意见★★★★★ 高手指导:编xml用什么工具最好?郁闷中1····· 如何实现在线播放多个文件?即如何处理在线播放列表??在线等..... 请问如何在状态栏中显示图片? unicode和utf8的文件格式、区别等学习资料?! 请问listview的排序问题!!!!!!!!!!???????????????????????????? 奇怪的问题,急!!!!!!!! 有没有客家人?进来报道一下。 帮忙看几行代码是什么错误? 请问listview的排序问题!!!!!!!!!!???????????????????????????? 其实如今的中国,一个字就可以概括 再VC7中加入对话框的问题 TCP连接发送数据如何限制一个连接的最大速度? win2003 cdk??? 机子无法启动,各位大虾帮帮忙! 在一个FORM里面绘制了GDI对象,怎样将FORM中的选定的区域转换为位图呢? 心情不好,放分。 安装win 98时,提示“没有足够的常规内存”,该如何解决?? 奇怪的查询问题,既没有出错,也没有正确结果。 一个很基础的指针问题,为什么非要转化为一个二级指针再转化为一级指针呀,才能 想自己动手写一个论坛,请大虾推荐几本asp入门书籍 想比较一下corba webservice dcom的异同,作为论文发表如何 如何编程实现对共享文件的进行访问监视? 如何改变select-sQl查询窗的名字啊,默认是“查询”,能否改成自已喜欢的? 求助:做程控滤波器(模拟)可以用哪些芯片??? 请问取整用 那个函数? 快 C# Builder 1.0 企业版BT下载! 很容易的问题,送分了模态对话框问题 这个API调用没胡有语 错误,但为什么在打印出来好多小四方格呀,我以前也遇到 过,不知什么原因 pb8.0与java VM安装问题请教! 请教高手,我将整个目录的文件写到一个ListBox1里,想按字母顺序写入!! 一个页转到另一个页后,另一个页的地址栏上将汉字转换成了%%%%类似的东西,如何解决? form 标签里的 enctype="multipart/form-data" 是什么意思? 哪有jsp的免费空间?最好支持ftp的 我在程序里写了insert语句也执行成功了,但在sql explorer的data里却找不到该条记录?但insert相同记录却也提示记录重复?interbase数据 求解一水晶报表打包后的问题? 我出差了,才回来看了一眼可用分大大的多了,可是信誉分才有56了,怎么办呀!! rh8的文本界面能不能显示中文啊 请问一个命名管道的问题 一个简单的报表问题!请各位来帮忙解决! 各位老大帮我看看啊,什么都好了,就差这个了。 如何为动态创建的控件添加事件过程? C# Builder 1.0 企业版BT下载! 水晶报表求和 作软件需不需要认证?需要,不需要,我们只是讨论一下,不要这么认真 请问当我单击某个按钮时,如何设置此时的鼠标状态??? sql语言里:条件not in 与not exist有什么区别? 三级上机考试模拟软件怎么用? 怎样学API???????? 一个数据查询的问题,在线等待 在哪里可以下载Screnc.exe?急!急!急!急!急!急!急!急!急!急!急!急!急!急!急!急!急!急!急!急!急!急!急!急!急!急 汕尾市曾子文化研究会是不法组织吗?有证据不是合法主体,是宗族性组织. John has been sick for a long time,so he __pain.A.used to B.is used to 频率副词一般位于be动词的——(前面,后面),位于行为动词的——(前面,后面) l miss yuo 哪条河流经莫斯科? 频率副词前面什么时候需要be动词?什么时候不需要? 求详细路线,从巴彦淖尔市临河区出发,途径临河黄河大桥,目的地是鄂尔多斯市东胜区.求详细路线,从巴彦淖尔市临河区出发,途径临河黄河大桥(新修的,前不久刚通车),目的地是鄂尔多斯市 travel on a car?travel on a car,还可不可以说,travel in a car? 初中文化学CAD有什么好的方法让我快点学会吗 俺小学文化,也没电子基础.请问大虾们有什么办法学好电子知识,基础什么的?最重要的是电子方面的东西我什么都不懂,请问我该怎么开始 从那里入门呢?很头疼 , 科学是一门( )的学问,学好科学的基本方法是( ).急啊~~,明天要交的作业,快点回复!科学是一门( )的学问,学好科学的基本方法是( ).急啊~~,明天要交的作业,快点回复! 临平新城打造杭州城东副中心 计划20浙江推广餐馆厨房阳光化 从洗菜到上菜日本自卫队下月将出动逾3万人 演练登杭州有小区物业费每月每平方米涨了两分澳洲林火因澳部队实弹演习引发 强风致奶粉进药店多问题待解 本周开始安装售宁波海曙区已有五个社区无主车“清零”美耶鲁大学19岁大二学生欲徒步闯南极墨西哥一家美国公司糖果厂爆炸20人失美国海军基地再发枪击案 2人受伤枪手美国义诊团感受中国医疗现状 吁加强健“超级碗”变“色情碗”24小时奥巴马普京为一个“乌”吵了90分钟钱少晋升难空闲不多 成职场白领跳槽主你对得起谁今日 天气居民污水处理费每吨上涨9分把“伤害无辜的普通人”作为手段时 你福田“青益会” 等你来加入NISSAN NV200 CVT登场每日轻松一刻
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘