组织Javascript库和CSS文件夹结构的最佳实践[关闭]

2 回答

• 7

  How to organize your HTML, CSS, and Javascript files

  我将概述一个推荐的结构来组织HTML5应用程序中的文件 . 这不是创建任何标准的尝试 . 相反，我将就如何以合理的方便方式对文件进行分组和命名提出建议 . 您的项目让我们假设您正在构建HTML5应用程序 . 在某些情况下，您可以使用服务器的根作为主容器，但出于本文的目的，我假设您将HTML5应用程序包含在一个文件夹中 . 在此文件夹中，您必须创建应用程序索引文件或主入口点 . appcropolis-project my-index.html通常，您的应用程序将包含HTML，CSS，图像和Javascript文件 . 其中一些文件将特定于您的应用程序，而其他一些文件可用于多个应用程序 . 这是一个非常重要的区别 . 要对文件进行有效分组，必须首先将通用文件与特定于应用程序的资源分开 . 完整的“> appcropolis-project资源供应商my-index.html这种简单的分离使您可以更轻松地浏览文件 . 一旦将库和通用文件放在vendor文件夹中，很明显您要编辑的文件将是位于资源文件夹中 . 除了HTML代码之外，应用程序中的其余文件主要是CSS，Javascript和图像 . 有可能您已将应用程序文件分组到与这些资产相对应的文件夹中.appcropolis-project资源css js图像数据供应商my-index.html js文件夹将保存您的Javascript代码 . 同样，images文件夹是您应该添加直接从index.html或应用程序中的任何其他页面使用的图像的位置 . 此图像文件夹不应用于托管样式表相关文件 . 您的CSS代码和相关图像应位于css文件夹内 . 通过这样做，您可以构建可以轻松使用不同t的页面hemes和你允许你的应用程序更便携 . appcropolis-project resources css blue-theme background.png images background.png blue-theme.css my-index.css js my-index.js my-contact-info.js images products computer.jpg cellphone.png printer.jpg my -company-logo-small.png my-company-logo-large.png数据some-data.json more-data.xml table-data.csv extra-data.txt供应商jquery images ajax-loader.gif icons-18- white.png jquery.min.js jquery.mobile-1.1.0.min.css jquery.mobile-1.1.0.min.js some-css-library some-plugin.jquery my-index.html my-contact-info .html my-products.html上一个示例显示了css文件夹的内容 . 请注意，有一个名为default.css的文件应该用作主CSS文件 . 默认样式表使用的图像应放在images文件夹中 . 如果要创建备用样式表，或者如果要覆盖默认样式表中定义的规则，则可以创建其他CSS文件和对应的文件夹 . 例如，您可以创建blue-theme.css样式表并将所有相关图像放在蓝色主题文件夹中 . 如果您有仅由一个页面使用的CSS或Javascript代码（在本例中为my-index.html），则可以使用相同的页面名称将.css和.js文件中的页面特定代码分组（ei my-index .css和my-index.js） . 您的CSS和Javascript代码应该是通用的，但您可以通过将它们放在单独的文件中来跟踪异常 . 最终建议必须围绕文件夹和文件名做出一些最终建议 . 作为一般规则，请确保在所有文件夹和文件名中使用小写字母 . 使用多个单词命名时文件或文件夹用连字符分隔它们（即my-company-logo-small.png） . 如果您遵循本文中的建议，您应该能够将多个页面组合在一起，同时将公共资源保持在一起，并将自定义代码很好地分开 . 最后，即使您不选择使用本文中推荐的结构，遵循惯例也很重要 . 它将提高您的工作效率，更重要的是，它将使您轻松理解的工作成为他人的理解 .

  回复于 2024-04-26T05:09:20+08:00
• 120

  root/
     assets/
        lib/-------------------------libraries--------------------
            bootstrap/--------------Libraries can have js/css/images------------
                css/
                js/
                images/  
            jquery/
                js/
            font-awesome/
                css/
                images/
       common/--------------------common section will have application level resources             
            css/
            js/
            img/
  
   index.html
  

  这就是我组织应用程序静态资源的方式 .

  回复于 2024-04-26T05:09:20+08:00