【IT168 评论】本文作者Cliff Meyers是一个前端工程师，熟悉HTML5、JavaScript、J2EE开发，他在开发过程中总结了自己在应对JavaScript应用越来越庞大情况下的文件结构，深得其他开发者认可。
地板上堆放的衣服
首先，我们来看看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)也能够清楚地描述文件修改记录。虽然已经获得了极大的改进，但是仍有一定的局限性。
