单页应用组织
单页应用组织
提问于 2013-11-20 04:47:15
来自服务器端呈现视图的世界，我无法让它在我的脑海中点击如何组织一个单一页面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文件，是否会导致提前大量的加载时间？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-11-20 04:59:55
我建议您的应用程序按功能，其中每个功能是一个角模块。参见这里的示例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中(可能是导入的)。对于角度上的可重用标记，您可以构建一个指令，该指令可能是通用的，也可能与特定特性相关。考虑视图而不是页面；考虑指令而不是容器和选择器。 - 是的，对于生产，所有的东西都连接在一个文件中，
app.min.css和app.min.js。
你也需要一些工具。使用褐化的工作流是简单的，require是常规的公共模块，然后构建浏览器脚本。
Stack Overflow用户
发布于 2013-11-20 05:02:45
- 每个页面的单独类听起来很荒谬:)看看Twitter Bootstrap -看看它们是如何使用css类的。
- 创建1连接和加载1文件比为加载少量小文件创建少量连接要快得多。新连接的打开是一件非常耗时的事情。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20087581
复制相关文章
相似问题
腾讯云开发者
