logo标签列表

什么是Web应用程序结构的最佳实践？你有哪些提示？

cssdesign-patternsjavascript-framework
24

我在工作中经常做一些定制应用程序。我正在尝试为新应用程序定义一些标准，与Elements有点相似。

CSS：你如何组织样式表？我应该为整个站点使用一个基本样式表，为每个单独页面使用一个样式表进行自定义吗？我是否需要另一个打印样式表？我听说链接更多文件会让浏览器检索它们所花费的时间更长。 (每页更多的对象...还有大量的javascript文件或图片也是问题)...太多文件是多少？你会在CSS中加入注释吗？提供任何嵌套结构吗？在元素内按字母顺序排列？我需要重置吗？那导入呢？还有排版？

Javascript：基本上是同样的问题。JavaScript文件...我应该包含一个或两个不错的库（例如JQuery和Prototype），然后再为每个页面包含另一个文件吗？现在我突然包含了5或6个CSS和JS文件...

目录结构：你如何组织网站？目前，我使用类似于

/CSS          ... For CSS files
/JS           ... For javascript files
/INC          ... For private code includes
/ASSETS/IMG   ... For images
/ASSETS/AU    ... For audio
/ASSETS/SWF   ... For Flash

同时，欢迎提出任何其他的建议。谢谢！

一般来说，这些是数据驱动的内部网站，大多数使用ASP.NET编写（但通常也使用Java、PHP或其他技术...）。话虽如此，我希望为所有将要外部化的设计建立一个“例行程序”。 - misc090912
好问题。我也期待着一些答案！ - HardCode
6个回答
23

应该实际操作。如果你的规则足够少，可以将它们全部组织在一个文件中，并保持对规则的整体视图。如果某些部分或单独页面的规则很多，则将它们分解为自己的子样式表，但是即使仅包含两条规则也不必为每个单独页面创建单独的样式表。请添加适用于<body>的特定类或id，以便在需要时从共享样式表中提取单个页面。

将样式分离到样式表中是为了方便作者，因此请按照您发现最容易管理的方式进行操作。对于复杂的网站，可能需要使用多个CSS文件，但通常不是数十个。

通常是的。虽然您可以使用@media规则在另一个样式表中嵌入打印样式，但这通常会存在bug，因此在<link>标签中放置媒体通常是最简单的方法。无论如何，在屏幕对应的样式表与其打印对应物之间通常存在很大的不同，因此将它们的规则分开是很有意义的。

是的，但经常夸大了这种影响。 HTTP/1.1通过保持客户端和服务器之间的连接来减少每次请求的延迟，这是一个有效的缓解方法。

足以让您极不可能有那么多样式表。如果您使用需要每个类一个脚本文件的框架，则脚本可能会出现问题，但通常情况下它们都可以正常运行。更常见的问题是大量小图像。

通常应该足够轻型的评论。CSS的声明规则样式通常不会变得足够复杂，需要代码等深入解释。特别是像针对特定浏览器的hack之类的事情应该记录在文档中。

不是除非它使你更容易管理。通常不会，您会尝试将相似的规则或适用于相似元素组的规则分组。

如果您知道自己在做什么，并且可以选择要重置的特定有问题的默认设置，则无需进行完全重置。

除非您绝对必须，否则不要包含多个框架。

如果每个页面都具有特定的自定义行为，则可以这样做。 但是这通常不会发生。如果您制作渐进增强行为脚本，可以将每个行为的脚本包括在使用它的每个页面上，然后让它自动找到要绑定的元素。

就我个人而言，对于我的Python/WSGI应用程序：

appfolder
    application.py       - main WSGI entry point and control/configuration script
    data                 - run-time writable application file store
        private          - files not available through the web server
        public           - mounted as a virtual directory on the web server
    logs                 - access, error, application log files
    system               - all the static application code and data
        htdocs           - web server root folder
            file         - static servable files
            img          - static images
            script       - JavaScript
            style        - CSS
        lib              - Python modules used by site
            appmodule    - main application code package
        templates        - HTML page templates
            mail         - mail text templates

对我来说，将“数据”与“系统”应用程序分开（使用不同的权限）是很重要的。您需要能够更换“系统”文件夹以升级应用程序，而无需担心必须保留 htdocs/img 中上传的图像。

如果您是通过mod_wsgi进行托管，我强烈建议您不要在包含其他任何内容的目录中放置'application.py'，尤其是不要放置包含敏感信息（如配置文件或代码）的子目录中。这是因为您需要在'application.py'所在的目录上设置'Allow from all'，这意味着Apache允许从该目录树中提供文件。如果现在将URL无意中映射到该目录，则客户端可以下载任何他们想要的东西。最好将其放在子目录中，并仅访问该特定子目录。 - Graham Dumpleton
就我个人而言，我根本不使用mod_access，它甚至没有被编译进去；我认为这不是一个非常有效的措施。 - bobince
8

CSS: 我只使用一个样式表，随着我的进展不断追加到底部。我通常在每个页面特定的规则集之前放置注释。如果我需要编辑某些内容，则使用Ctrl + F。

Javascript: 通常只包含一个库，可能还有一些插件。曾经直接将任何页面特定的JS代码放入该页面的头部，但我觉得这样有点丑陋并混淆了“行为”和数据。因此，我正在开始一个新的范例--

MVCB-- 模型，视图，控制器，行为。MVC对于具有相当静态UI的桌面应用程序非常好，但是当您添加大量JS时，我认为需要额外的抽象层。

因此，我的原始文件结构：

index.php
app
    config
        bootstrap.php               -- code that needs to run before anything else, or functions that don't really fit elsewhere
        core.php                    -- timezone, database, and misc settings
        routes.php                  -- default routes
    layouts                         -- layout/template files
        flash                       -- layouts for one-time popup messages
    objects                         -- all files are stored in the same folder as the controller to keep directories
                                            smaller and ease reusability
        object
            controller.php
            model.php
            routes.php              -- object-specific routes to override default routes
            behaviours              -- page-specific javascript files
                action.js           -- included automatically on that page if this file exists
            views
                action.php          -- the view for this action
    public                          -- static media files, sometimes called "assets"
        favicon.ico
        xrds.xml
        css
        img
        js
        uploads         
core
    app.php                         -- initializes stuff
    controller.php                  -- default controller
    dispatcher.php                  -- includes everything and calls all the appropriate functions
    model.php                       -- default model that all other models inherit from
    components                      -- helper functions to used in controllers
    datasources                     -- mysql, oracle, flat-file...
    helpers                         -- functions to be used in views and layouts
    structures                      -- model helpers such as tree or polymorphic behaviours
    utils                           -- functions that are useful everywhere
libs                                -- 3rd party libs

.htaccess

Options -Indexes 

RewriteEngine On

RewriteCond %{REQUEST_URI} !^/app/public/
RewriteCond %{DOCUMENT_ROOT}/app/public%{REQUEST_URI} -f
RewriteRule .* /app/public/$0 [L]

RewriteCond %{REQUEST_URI} !^/app/objects/
RewriteRule ^([^/]+)/(.+\.js)$ /app/objects/$1/behaviours/$2 [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* /index.php?url=$0 [L,QSA]
3

请确保你在文件夹命名时不要使用大写字母。如果你在windows上开发并在linux服务器上部署，这可能会对你造成麻烦。

3

我已经在另一个主题中发布了我的目录结构和注释，但它也适用于这里！

我一直使用以下设置，并取得了很好的结果：

  • /site：这是我的实际工作网站所在的位置。在创建模板后，我会在此目录中安装我的CMS或平台。

    • .htaccess （通常我会启用基本调整）
    • robots.txt （这样我就不会忘记稍后禁止像/admin这样的项目）

  • /source：包含任何组件、笔记、文档、规范等。

  • /templates：从这里开始！创建所有静态模板，最终需要将它们移植到/site的CMS或框架中。

    • /_behavior
      • global.js （站点特定代码；根据需要可以拆分为多个文件）

    • /_media：图片、可下载文件等。按需要组织

    • /_style：我喜欢模块化CSS开发，所以我通常为网站的每个独特部分制作许多样式表。使用Blender可以大大简化这一过程，我强烈推荐使用这个工具！

      • print.css （最终会混合，所以使用@media print）
      • reset.css （Eric Meyer的）
      • screen.css （用于@media screen、handheld）
      • 根据需要添加其他模块

    • /_vendor：所有第三方代码（jQuery、shadowbox等）

    • Blendfile.yaml （用于Blender；见上文）

    • template.html （基本起始模板；可以复制并重命名为每个唯一的模板）

  • /tests：Selenium单元测试

1

尽量使用一个样式表。为每个页面链接单独的样式表会使其失去意义。

您可以通过在样式表顶部包含以下行来继承其他样式表中的样式：

@import url('blueprint/screen.css');
@import url('blueprint/styles.css');

在这种情况下，我继承了蓝图 CSS 样式，然后在其下面添加了自定义样式。

就 JS 库而言，我更喜欢链接 3 个文件。

库、包含所有插件的一个页面，以及最后的页面代码。

对于目录结构，我通常有以下内容：

/_css /_images /_scripts files

但最近我开始将用于使网站看起来/工作的所有内容放入 /_presentation 目录中... 然后像博客文章等的任何其他内容都会放在 /images 中。

希望这可以帮助到您。

0
我总是努力使浏览器不必加载和解释与所提供 HTML 无关的 CSS 规则和 JS 代码。我同意 @bobince 的说法，即只有在必要时才将页面的样式和脚本分成单独的文件进行组织，但如果您的网站很大，那么您将会到达这个点。
然而，由于我只构建基于模板的网站，我开始怀疑为什么要链接到外部文件。例如，如果我有一个基础模板，则放在该模板头部的内容将应用于站点上的所有页面。那么为什么不只把我的样式和脚本放在那里呢？
有两个原因。首先，浏览器可以缓存外部文件并在包含它的每个页面上重复使用它，而无需重新加载。其次，设计师可能不像在处理普通 CSS 文件时那样熟悉 poking around in your templates。
对于适用于网站中的每个页面的全局样式来说这是很好的，但是对于那些只在某个页面中使用而在其他地方没有共享的样式呢？如果您将此样式添加到全局应用的外部文件中，您将增加网站的初始加载时间，而这种样式仅在一个页面上使用。此外，当几个月后您再回到该文件时，您可能已经忘记了那些规则是用来做什么的。

我建议任何未在每个页面上表达的样式规则都应该放置在<style>标签中，这些标签位于呈现HTML的子模板内。这将把负载和复杂性从全局样式表移动到实际需要样式的页面，并为规则提供上下文，以便它们可以在未来得到维护。如果这让你的设计师感到害怕，他们就不需要编写CSS。只需告诉他们坚持使用Photoshop，让你来做大人物的工作。

我知道那不会是一个非常受欢迎的观点 :-) 但我很高兴地说，我已经将其付诸实践，并取得了良好的效果。在开发过程中特别方便，当您不想让缓存的外部CSS文件剩余以混淆您时。 - Jesse Hattabaugh
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接