您对web应用程序结构的最佳实践有哪些建议？

Question

我在工作中做了很多定制的应用程序。我试图为新的应用程序定义一些标准。有点像元素的东西。

CSS：您如何组织样式表？我是否应该为整个网站提供一个基本样式表，并为每个单独的页面提供一个用于自定义的样式表？我应该要另一种印刷样式吗？我听说链接更多的文件需要更多的时间来让浏览器检索它们。(每个page...also有更多对象-存在大量javascript文件或图像的问题).多少才是太多？你会评论你的CSS吗？提供嵌套结构吗？元素内的字母化？我需要重置吗？进口呢？还有排版？

Javascript：基本上相同的问题。Javascript包括一两个不错的库(例如，files...Should和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

此外，任何其他提示都将受到欢迎。谢谢！！

Answer 1

我是否应该为整个网站提供一个基本样式表，并为每个单独的页面提供一个用于自定义的样式表？

讲求实效。如果你没有足够多的规则，你可以把它们组织在一个文件中，并保留对做什么的疏忽，那就去做吧。如果您有大量的规则只适用于站点中的某些部分或单个页面，那么一定要将它们划分到自己的子样式表中，但不要觉得有必要为每个页面创建一个单独的样式表，即使它只包含两个规则。向其中添加一个特定于页面的类或id，以便在需要时可以从共享样式表中选择单个页面。

将样式分离到样式表对于您作为作者是有益的，所以做您认为最容易管理的事情。对于一个复杂的站点，可能会有多个CSS文件，但不会有几十个。

我应该要另一种印刷样式吗？

一般是的。虽然您可以使用@media规则将打印样式嵌入到另一个样式表中，但这在传统上是错误的，因此将媒体放在标记中通常是最简单的。在任何情况下，打印样式表通常都与它们的屏幕对应程序非常不同，因此将它们的规则保持独立是有意义的。

我听说链接更多的文件需要更多的时间来让浏览器检索它们。

是的，但这种影响往往被夸大了。HTTP/1.1通过保持客户端和服务器之间的连接活动来减少每个请求的延迟，这是一个很强的缓解措施。

多少才是太多？

足够了，您不太可能有那么多样式表。如果您所使用的框架要求每个类都有一个脚本文件，那么脚本可能是一个问题，但否则通常是可以的。更常见的问题是有很多小图像。

你会评论你的CSS吗？

光评论通常应该是足够的。CSS的声明性规则风格通常不会变得复杂到需要深入解释代码所要求的程度。特别是，记录任何违反直觉的东西，比如浏览器特定的黑客。

元素内的字母化？

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

我需要重置吗？

完全复位？如果你知道你在做什么，并且可以选择你想要重置的特定的有问题的默认值，那就不行了。

我应该包括一两个好的库(例如JQuery和Prototype )吗？

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

然后为每一页再加一页？

如果每个页面都有特定的自定义行为，则可以。但这种情况通常不会发生。如果你做出渐进增强的行为脚本，绑定到例如。类名，您可以在使用它的每个页面上包含每个行为的脚本，然后让它自动找到要绑定到的元素。

目录结构:如何组织站点？

就我个人而言，对于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

对于我来说，在“system”中将“数据”保存在一个单独的位置(具有不同的权限)是很重要的。您需要能够交换出“system”文件夹来升级应用程序，而不必担心htdocs/img中有上传的图像，您必须担心保存这些图像。

Answer 2

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]

Answer 3

我已经在另一个线程中发布了我的目录结构和评论，但它也适用于这里！

我已经使用了以下设置一段时间了，并取得了很好的效果：

• /site:这就是我实际工作的网站。创建模板后，我将在这个目录中安装CMS或平台。

- .htaccess _(basic tweaks I usually find myself enabling anyway)_
- robots.txt _(so I don't forget to disallow items like /admin later)_

​

• /source:包含任何化合物、注释、文档、规格等。
• /templates:从这里开始！创建最终需要移植到CMS或/site框架中的所有静态模板。

- /\_behavior  
    - global.js _(site-specific code; may be broken out into multiple files as needed)_

​

- /\_media: Images, downloadable files, etc. Organized as necessary
- /\_style: I prefer modular CSS development so I normally end up with many stylesheet for each unique section of the website. This is cleaned up greatly with [Blender](http://github.com/cgriego/front-end-blender/tree/master) - I highly recommend this tool!

    - print.css _(this eventually gets blended, so use @media print)_
    - reset.css _(_[_Eric Meyer's_](http://meyerweb.com/eric/tools/css/reset/)_)_
    - screen.css _(for @media screen, handheld)_
    - _additional modules as necessary_

​

- /\_vendor: all 3rd party code (jQuery, shadowbox, etc.)
- Blendfile.yaml _(for Blender; see above)_
- template.html _(basic starting template; can be copied and renamed for each unique template)_

​

• /tests：硒单元测试