javascript - 你们的前端项目目录结构是如何构建规划的？

Question

一般小的网页的话大体都是 {代码...} 想知道大型项目是如何规划的？有什么好的方案以后不会太乱？

数据分析师 · Answer

javascript - フロントエンドプロジェクトのディレクトリ構造はどのように計画されていますか? -PHP 中国語 Web サイト Q&A-javascript - フロントエンドプロジェクトのディレクトリ構造はどのように計画されていますか? -PHP中国語サイトQ&A

ぜひ見て学んでください。

阿神 · Answer

看你做什么样的开发，项目规模，框架的选择都会有影响。

百度FIS只是一种综合方案，但是也说明他的局限性，可能百度自己用起来很顺手，但不一定适合所有人。你同样可以使用yeoman的某个generator去构建一个project，比如一个web，或者一个angularjs项目，甚至自己创造一个generator，然后再使用bower去管理库，grunt会被yeoman配置好基本的东西完成自动开发流。bower.json,package.json,Gruntfile.js等配置文件将会使你需要一个config文件夹。

如果你使用LESS、SASS或者Stylus去动态生成CSS的话，你还需要一个放置它们的文件夹来隔开它们与其他需要被HTML加载的代码。这个文件夹的名字自然是和它们的名字一致。

当然你还可以有一个名叫Coffee的文件夹用来装CoffeeScript文件用于动态生成Javascript。里面的结构甚至可以和你的Javascript一摸一样，这样就不会弄错地方了。

类似的还有很多，比如使用Javascript的HTML模板等等，不过工作流能决定的仅仅是工作流需要用到的一些特殊文件和配置文件的目录，其实和整体项目的目录没有多少关系。

说到项目，主要是代码，代码结构决定目录结构。

你这样的结构其实适合大部分的前端开发任务，它很好的把前端两个主要的东西CSS和JS分开了，而图片是因为资源比较特殊，会有可能经常变换目录所以也单独放了一个文件夹，虽然也有人把图片做成css sprite看做是样式的一部分而放入了css。

然而，一般大型项目会有很多类似但不同的页面，表单之类的东西，这时一般会选择按页面来分目录结构，每个页面的文件夹中带有一个专属的css和js文件。这样每个页面只需要专门去加载对应文件夹下的所有代码即可，还不会影响到其他部分。

但这样做代码的复用又会非常的低，于是结构跟着代码走，把相同功能的代码抽象出来做成一个通用加载的js文件，它们的名字通常是common、base、core之类的，慢慢形成一个做自有库。

而一个功能广泛应用在所有页面是不可能的，比如在一般的网站开发中最常见会分为登录注册和页面数据浏览两个方面，登录注册的功能一般是表单的验证和提交，而数据浏览又主要集中在DOM操作和加载方面。所以开始往模块化发展，模块js文件越来越，一个文件夹又诞生了，也许它叫做plugin、common、default之类的。

另外随着开源的蓬勃发展，为了快速开发，越来越多的库引入了进来，jQuery应该是你目前的必备，当然还有无数的库，甚至一个表单中的一类数据你就会需要一个特别的库来帮你解决一个大问题。它们的文件夹一般叫做lib或者library，github上就有几万个，总有你需要的，你可以用bower去管理它们，所以这时你肯定会使用bower_components做文件夹的名字，因为它是自动生成的。

接着你会需要一个框架

jQuery不能算作框架，因为它只有一个文件，即时它搞出来了一个map文件。经常见到的MVC框架backbone你应该听过，如果使用它，你可以产生view、model、collection、route等文件夹。但正如我上面提到的，这还得看你的项目规模，否则它们也有可能缩水成4个文件而不是文件夹，被放在common之类的文件夹中。