单页应用程序组织

Question

来自服务器端渲染视图的世界,我无法完全理解如何组织单页javascript应用程序的CSS.我在这种特殊情况下使用AngularJS.

在进行服务器端渲染时,分割和组织CSS文件相对容易,您可以使用以下内容:

/css
    /layouts
        home.css
        account.css
        ...
    /components
        buttons.css
        forms.css
        lists.css
        ...
    /modules
        account-bar.css
        shopping-cart.css
        ...

对于给定的页面,例如购物车页面,您可以只包含所需的布局文件,您可以选择页面特有的组件文件,并包含购物车模块.这导致接近页面需要传递的确切CSS.

说到单页javascript应用程序,我对以下几点感到困惑:

1. 如何为应用程序页面的每个页面制作布局,而不会弄乱其他页面？由于页面没有重新加载,似乎很难使用标题,导航,部分,文章,页脚等通用html元素进行布局.您只需要避免使用这些元素,而是使用单独的类创建div每一页？
2. 我想这与1相关,但是当你提供CSS(和JS真的)时,你只是把它连接成一个巨大的文件吗？是不是为一个体面的应用程序制作一个巨大的CSS和一个巨大的JS文件会导致前期巨大的加载时间？

Answer 1

我建议按功能组织您的应用程序，其中每个功能都是一个 Angular 模块。请参阅此处的示例https://github.com/angular-app/angular-app：

+ src
  + admin
    + users
      . admin-users-add.js
      . admin-users-add.tpl.html
      . admin-users-edit.js
      . admin-users.edit.tpl.html
    . admin.js
  + home
  + posts
  . app.js # bootstrap with requirejs or browserify
+ assets
+ common
. index.html

回答你的2个问题：

1. 页眉和页脚将进入index.html（可以导入）。对于 Angular 中的可重用标记，您需要构建一个可能常见或与特定功能相关的指令。考虑视图而不是页面；考虑指令而不是容器和选择器。

2. 是的，对于生产，所有内容都连接在一个文件中，app.min.css并且app.min.js

您还需要一些工具。使用Browserify，工作流程很简单，require常规的通用模块，然后构建您的浏览器脚本。