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

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

解读全新Google Play Games:多屏游戏时代终于来了! 设计神器PaintCode 2.1发布,完全支持Swift 一周消息树:天河二号以每秒3.3亿亿次的速度再居世界超算榜首 传闻微软计划用Lumia品牌取代Surface 【CTO俱乐部读书会】杨立东:技术团队留人“三板斧” 蓝港在线王世颖:浅谈手机游戏发行的成功基因 美国高通公司执行董事长Paul E. Jacobs:移动科技——精彩现在,辉煌未来 告别公用云,Instagram已将服务迁至Facebook数据中心 华为助力凤凰实现全媒体战略 跨平台2D/3D游戏开发框架libGDX发布1.2.0更新 Docker CEO Ben Golub:Docker借助开源、天时走向成功 社交网络先驱、服役十年的Orkut被谷歌关闭 支付宝风控系统对外输出 联合机构建支付安全生态圈 不同设备不同界面:Windows 9正在逼近! 福特联手英特尔 为汽车打造智慧感应系统 《近匠》环信:标准化即时通讯与未来社交构想 支持Swift!全新“四步测”BDD框架Quick诞生 中国式移动办公 纷享销客完成B轮融资千万美元 打造完美用户体验:“天翼平台开放日”沙龙纪实 我的编程认知:多思考、多编码、多测试 聚焦应用开发 2014年微信开发者大会即将召开 继续补Bug,jQuery Mobile发布1.4.3版本 手游SDK服务商棱镜公司获A轮投资 东方弘道领投 广而告之:Databricks终止Shark项目,转至Spark SQL DeNA China副总裁黄雪斌:IP战国时代的生存法则 巴别时代首席执行官赵暕:从页游到手游的完美转身 Oracle借助RESTFUL API扩展移动端版图 优秀求职者应主动问的5个问题 高德LBS智能硬件编程马拉松:硬件复兴,等你挑战! 首届bong线上黑客马拉松:运动数据分析应用bong+获大奖 英特尔推出基于WebRTC的协同通讯方案 凸显本土创新“软”实力 请问 ListCtrl Item里的 Checkbox 被点击时对应的消息是什么? 100分~~100分~~高分求购。。。我也‘倾家荡产求购优秀系统分析案例’(paste from yyzh)。。。100分~~ 全中文的用Rose做的实际项目的UML模型! 救命!!我的机器不能下载东西了,怎么回事?? 求教邮件编程问题,邮件客户端如何实现“在服务器端保留备份的功能“? ciscoworks 各位大哥大虾,VC下如何用ADO连SQL SERVER?(急) ShellExecute和CreateProcess有什么区别? 关于海量数据、最有效率的排序、硬盘缓冲与映射、专业数据库的讨论 如何用VB编启动是可以带参数的程序呢?(例如:我自定义了一种文件,双击用我的程序打开,程序自动会打开这个文档 昨天我过生日,今天分蛋糕给大家 请问哪有《java图形设计2Swing篇》可以下? 我要用一个数据库去实时访问另一个据库,我该怎么办 URLghj1976@csdn.net----别吓我,有请您老人家! 谁给我介绍一下sql server7.0教材的比较好的下载网站,我给他20分。 我都急死了,到搜索引擎里搜到的好几个站点都不能用,到底哪儿可以当到3DMAX? 谁有写的比较好的邮件收发程序? 一个微软证书的私钥问题 微软证书的私钥问题 求助,简单问题 男人最快乐的十个瞬间! solaris下装oracle8.1.6遇到jre环境问题 怎抹加分?我准备给别人加40分,可我最多只能加20,请问另外20分怎末加分,为此我可能已得罪了一些人了。 请教下载的问题 如何在运行时动态修改Quick Report的打印机设置? 怎样做一个接受拽拖的LISTBOS(例如,把资源管理器里的文件拖到上面,就自动增加一项 ,就是拖的文件名) 怎样才能隐藏在ctrl+atl+del中进程列表中的项目啊 用C写DLL 请问:airhorse(编程至尊宝),infopower3000的注册码可以用于商业目的吗? 结构化异常处理 linux下如何配置内置Mondem? red hat linux7.0下安装oracle8.1.6遇到问题 我是菜鸟,问一个关于类的问题 问题:TWebbrower中,InnerHtml和OuterHtml以及InnerText和OuterText之间的区别 (加急)我要傻了,快救命啊!高分求救!!(回答正确者尽管开口要分!) ==============VC中怎样调试控制台程序=============? 再问:MS SQL6.5 的.DAT文件怎么恢复,请高手帮忙,(100分绝对对线) 白桦林 我需要自定义一个鼠标按下的事件,可我不知道该去那个参数?有人能告诉我吗? 有谁有比较好的javacript教学方面的电子文本? 两个关于数据库的问题(上次写的不太清楚),我的分快用完了,只能随便给点意思意思了! DotNet时代真正来临了/VB.NET/Beta2正式版下载地址/大家要就快点/如果FTP停了/可不要怪我 那里有DIRECTX编程的书或资料呢?(用VB编) @_@````兄弟们!!有在WIN2K下用VC6搞开发OR学习的吗? 该是到了绝望的时侯了 DotNet时代真正来临了/VS.NET/Beta2正式版下载地址/大家要就快点/如果FTP停了/可不要怪我 在用户登录后,她要更改密码或用户信息,怎么实现?用cookie吗? 建议增加UNIX开发板块! 寻VB好书 用N-Up样式的数据窗口,检索出的数据有 1,2,3,4,5类数据,1类的有1行,2类的有2行, 在应用程序和DLL中如何永久保留用户的一些设置,在程序从新启动后仍然有上次的设定 已知关于X的方程K的平方X的平方+(2K-1)X+1=0有两个不相等的实数根,求K的取值范围 解一元一次方程如何移项,方法. 整式的加减,以去括号和合并同类项为基础,化简后的结果不含( )和( ). 求证:无论k为何值,方程x 的平方-(k+3)x+2k-1=0总有两个不相等的实数根 解一元一次方程移项的理论依据是什么 初一数学整式的加减怎样去括号= =.我是傻× 求证:方程x平方+(2k+1)x-k平方+k=0一定有两个不相等的那个的实数根 解一元一次方程时移项为什么要变号?求详细原因. 解一元一次方程(去括号),已知x=2是关于x的方程(2m-1)x=8的解,则m的值是--------------.方程2(12+x)=4的解是-----------.(1)3x-2(1-2x)=5;(2)3(2x-5)-(4x+2)=1;(3)5(x+2)=1+2(3x-2);(4) 已知关于x的方程X^2+(2k+1)x+k^2-2=0的两个实数根的平方和为11,求k的值. 不等式移项变号法则 注是不等号 解用一元一次方程 去括号 求证:关于X的方程X的平方+(2K+1)X+2K-1=0有两个不相等的实数根 这是不等式的什么变号法则? 用括号解一元一次方程! 求证:关于x的方程x的平方+(2k+1)+k-1=0有两个不相等的实数根 不等式变号法则还是没搞清楚不等式什么时候要变号.谁能跟我说说清楚?2X-4 用去括号法和去分母法解一元一次方程四道题带过程 若关于x的方程x平方-(2k-1)x+k平方=0有两个不相等的两个实数根,求k的最大整数值若关于x的方程x平方-(2k-1)x+k平方=0有两个不相等的两个实数根,求k的最大整数值 什么是解方程,解不等式的移项法则 去括号+去分母的一元一次方程~快·····今天(2007.12.08)帮我找道题目者,加赏分50~ 求证 关于x的方程x的平方+(2k+1)x+k-1=0有两个不相等的实数根 不等式怎么变号? 用去分母法解一元一次方程 :(1)2y-1/6=5y+1/8 ,(2) x-1/2+1=x-1 ,(3) 1+3-x/2=x+4/3-2 ,(4)1/2(x+1)-x+1/6=1 ,(5)1/3x+1/2=2/3 (6)3(2x+1)/4-1=2(2x-1)/3 (7)4(2y+3)+5(y-2)=8(1-y) (8)如果2x^5a-4-3=0是关于x的一元一次方程,那么a=( 已知关于x的方程¼x²-(m-2)x+m²=0 是否存在正数m使方程的两个实数根的平方和为224 一元一次方程的移项怎么移?移项我总是弄不懂 那个数怎么移我也不知道 移过去是加还是减,乘还是除,我就是搞不懂 谁来教教我 普通的移项我会移,但是稍复杂的我就不会移了,像有理数那一 一元一次方程 去括号 是否存在实数m,使关于x的方程4x的平方-4mx+m+2=0的两个实数根的平方和最小?若存在求出m的值及这个最小值 一元一次方程移项怎么移 去括号解一元一次方程 方程3×y的平方+4x+3K=0的两个根的平方和等于7,求k的值 解一元一次方程移项怎么移明确着点 一道解一元一次方程的题(去括号的)!2(10-0.5y)=-(1.5y+2)把去括号的过程写下来 已知方程2x的平方+4X+M等于0的两根平方和是34,求m的值 一元一次方程怎么移项?老是移不来 一元一次方程 去括号与去分母 要有格式!三分之5y+4 + 4分之y-1 = 2 -12分之5y-53分之x+6 - 5=4x3分之7x-1 — 2分之5x+1 = 1格式是:去分母,得去括号,得移项,得合并同类项,得系数化为1,得 满足方程{2x=y=k,-4x-3y=k+8 的x、y和等于3k,则k=满足方程{2x+y=k,-4x-3y=k+8 的x、y和等于3k,则k= 初一数学整式的加减去括号和化简有什么区别 关于解一元一次方程——去括号和去分母的题七年级二班买了35张电影票,公益共用了125元,其中甲种每张8元,乙种每张6元,问甲、乙两种票各买了多少张? 设( )x张,则乙种票买(35- 若关于x的不等式(1减a)x的平方减4x加6大于0的解为x大于负3小于1则a等于? 已知ab互为相反数,cd互为倒数,x的绝对值为5,则x的平方+(a+b)的2010次方+(-cd)的2011次方的值为? 七年级数学整式的加减与什么什么无关的题 求不等式4x的平方减4x加1大于0的解集 解方程(采用移项法)谢谢 1.(有些东西打不出来用文字代替了,在草稿本上把式子写下来容易看懂)试说明多项式a的三次方b的三次方 + b的二次方- 1/2a的二次方b + 0.5a的二次方b - 2a的三次方b的三次方 + b的二次方 + a的 X平方减4X大于0的不等式怎么解? 利用移项法解一元一次方程, 请写出同时满足一下三个条件的两个整式:①这两个整式的和为3x2+x-1;②它们都是三次多项式;③一个多项式的系数都是正数,另一个多项式系数都是负数 不等式x的平方减4x+5大于0 的解集 要过程 移项法比利用等式性质法解方程更为_______,但同时容易出现一个常见的错误是________的问题 第二章 整式的加减单元检测A卷 好好好,如果你给我写出来了,我把我分全给你。 已知关于x的方程x^2-(k-1)x+k=0的两个实数根的平方和等于4求实数K的值 x+4.6=10.9用移项法怎么做 代数 整式的加减 已知方程x²+(2k+1)x+k²-2=0的两实数根的平方和等于11,则k的取值是 带上讲解A.-3或1B.-3C.1D.3 移项利用了什么数学原理? 去括号,并合并同类项.-3(2x的二次方-xy)+4(x的二次方+xy-6)a+[2a-2-(4-2a)] 已知关于x的方程x²+(2k+1)+k²=0的两个实数根的平方和是7,求k的值 解一元一次方程,合并同类项与移项.解方程(1)-3x=3-x/9 (2)6y-3/4=4y+5/4 (3)3x+4=x/3 (4)-2x=2-x/6(5)2.5y+10y=6.5y-3 (6)1/2x-1=2/3x+3/2 (7)0.5x-0.7=6.5-1.3x要有移项,合并同类项,系数化为1这些过程 整式的加减以去括号和合并同类项为基础化简后的结果不含什么什么,它的依据是加法
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn