有关组织文件的JavaScript样式指南

Question

我曾经参与过一个重要的JavaScript项目,我注意到没有样式如何使用JavaScript.让我最不安的是每个人都在这里和那里添加了文件,这导致组织和交付它们的混乱.因为这将在每个新项目中发生,我希望有类似JavaScript的样式指南.此样式指南应解决以下问题:

是否有公开可用作开发我们自己的风格指南的起点？您使用样式指南的经历是什么？开发人员是否可以轻松地跟踪它,它有哪些简单,哪些是困难的部分？

(我知道,问题多于一个,但我对这里的整个故事感兴趣.作为背景,我们使用了JQuery和JSF,但我认为这不会对答案产生影响.)

Answer 1

如果你正在做重的客户端,你可能会采用MVC方式.

所以我会用早午餐采取的方法回答你的问题.早午餐项目使用MVC库Backbone.js,并具有严格的目录结构.

在开发过程中如何在文件系统中组织JavaScript文件？

src/
  app/
    collections/
    controllers/
    models/
    styles/
    templates/
    views/
  vendor/
build/
  web/
config.yaml

使用Stitch将文件组织为CommonJS模块.然后,您将能够使用require()它们来定义它们之间的依赖关系,以及稍后将它们组合到一个文件中.

如何将JavaScript部分与HTML和应用程序的其他部分分开？

build目录用于存储html; build/web用于存储javascript,图像和CSS.

如何在真实应用程序中传递 JavaScript文件,以便每个请求都必须加载更少的代码,而不必发送太多请求？

在构建阶段,所有JavaScript都缩小并合并为一个文件(build/web/js/app.js),这样客户端第一次访问您的站点时,只需要发出一个HTTP请求.

使建筑过程尽可能简单可能是一个好主意.Brunch通过提供brunch watch命令来实现这一点,该命令监视文件系统的变化并在Stitch和其他一些工具的帮助下立即构建代码.

(应该注意的是,在开发过程中,早午餐项目也使用CoffeeScript作为主要语言;在拼接生成的JavaScript之前,它是由早午餐透明地编译的.但是,只要涉及文件组织,这并不重要,并且超出了范围你的问题.)