Question

我在互联网上搜索但我无法找到问题的答案。我只想弄清楚一种简洁的方法来构建我的项目中的CSS和JS文件。我们假设我有一个CSS文件夹，我有一个自定义的my.css文件，而且我有一个Scripts文件夹，里面有一个myscript.js。我了解my.css将放在CSS文件夹中，myscript.js将放在此文件夹设置的Scripts文件夹下：

root
     css
            my.css

     Scripts

           myscript.js

我的问题是，如果我想使用像jstree这样的jQuery插件。这个库要求我添加一个js和一个css文件。我应该将这些文件保存在Scripts和CSS文件夹下吗？

Plan A
root
     css
            my.css
            jstree.css

     Scripts
           myscript.js
           jstree.js

或者我应该将它们分成不同的文件夹以获得更清洁的结构，例如

PLan B
root
     css
            jstreeFolder  --->   jstree.css
            my.css

     Scripts
           jstreFolder    --->  jstree.js
           myscript.js

这种结构可以接受吗？有任何标准方法可以实现这一目标吗？

感谢任何帮助。

Answer 1

Root 
-- styles 
     |-- your_file.css 
-- scripts
     |-- your_file.js 
-- libs (or plugins)
     |-- jquery
     |-- jquery-ui
     ...

我认为这个结构会更好，你选择的所有第三方库（无论是css或javascript库）都应该位于libs目录下。它将使维护变得更容易和清晰。

Answer 2

出于好处，我更喜欢另一种方法。库jstreee以某种方式组织javascript文件，css文件和图像。

 /libs/
       /jstree/  // <-- folder
               /themes/ <-- folder 
                  /default/  <-- folder
                      style.css
                      32px.png
               jstree.js
               jstree.search.js
      /other-plugin/

我将所有内容放在libs下，并放在具有库名称的文件夹中。这样，库的外部依赖性是明确的，并且外部库的内部路径结构（css文件可能指向图像）是不受影响的。

如何在Web应用程序中管理CSS和JS文件结构（自定义与插件）？

2 个答案: