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应用程序，我对以下几点感到困惑：

如何为应用程序页面的每个页面制作布局，而不会弄乱其他页面？由于页面没有重新加载，似乎很难使用标题，导航，部分，文章，页脚等通用html元素进行布局。您只需要避免使用这些元素，而是使用单独的类创建div每一页？
我想这与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

回答你的两个问题：

页眉和页脚将进入index.html（可能已导入）。对于Angular中的可重用标记，您将构建一个可能与特定功能相同或相关的指令。想想观点而不是页面;想一想指令而不是容器和选择器。
是的，对于制作而言，所有内容都在一个文件app.min.css和app.min.js

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

Answer 2

每个页面的单独类听起来很荒谬:)看看Twitter Bootstrap - 看看他们如何使用css类。
创建1个连接并加载1个文件比创建少量连接以加载少量小文件更快。新的连接开放是一件非常耗时的事情。

单页应用程序组织

2 个答案: