MVC3中CSS、Javascript及其命名规范的管理

Question

最近，我正在构建一个严重依赖于javascript/jquery的项目。当呈现一些局部视图时，它们需要应用一些javascripts或CSS样式。您是否有任何关于管理这些文件的高效/有效方法的想法？

Answer 1

我发现在我自己的项目中需要这样做，因为我希望每个视图都有一个单独的javascript\css文件。

我最终要做的是创建一个控制器来为我聚合服务器上的文件，然后只将一个css\js文件发送到浏览器。然而，答案可能比您要求的更复杂，所以我将推荐第一部分。

您可以创建一个扩展方法，您可以在每个页面的顶部调用该方法，将JS文件添加到请求的TempData字典中的列表中。然后从布局中调用一个单独的方法，该方法将呈现任何其他链接。

这是因为TempData只为请求保留，而布局的视图是最后呈现的(在所有视图和部分运行之后)。

我在这里有一个完整的类示例：http://pastebin.com/EUC2fAca，但我还形成了到聚合器的链接，所以您需要修改。要点如下：

public static string JSKey = "pageJSList";      

private static void AddToDictionary(HtmlHelper helper, string[] files, string key)
{
    if (files == null || files.Length == 0)
        return;

    TempDataDictionary dict = helper.ViewContext.TempData;
    if (!dict.ContainsKey(key))
        dict.Add(key, new List<string>());

    (dict[key] as List<string>).AddRange(files);
}

private static void InsertToDictionary(HtmlHelper helper, string[] files, string key)
{
    if (files == null || files.Length == 0)
        return;

    TempDataDictionary dict = helper.ViewContext.TempData;
    if (!dict.ContainsKey(key))
        dict.Add(key, new List<string>());

    (dict[key] as List<string>).InsertRange(0, files);
}       

public static void AddJS(this HtmlHelper helper, params string[] files)
{
    AddToDictionary(helper, files, JSKey);
}

public static void AddJSToTop(this HtmlHelper helper, params string[] files)
{
    InsertToDictionary(helper, files, JSKey);
}

public static MvcHtmlString GetJsTagHtml(HtmlHelper helper)
{
    var files = helper.ViewContext.TempData[JSKey] as List<string>;
    StringBuilder tags = new StringBuilder();
    string jsTemplate = "<script type=\"text/javascript\" src=\"/Scripts/{0}\"></script>";

    foreach (string file in files)
    {
        tags.AppendLine(String.Format(jsTemplate, file));
    }

    return MvcHtmlString.Create(tags.ToString());   
}

您会希望Insert方法在布局上运行它，因为它再次最后运行，所以您需要插入jquery库或其他依赖项，这些库或依赖项应该放在列表的第一位。

您的GetJS方法可能会返回一个包含您需要的所有标记的MvcHtmlString。

希望这会有帮助，不要说太长的话=)

Answer 2

CSS文件和JavaScript文件以及几乎所有其他文件的管理取决于您的分类收藏夹，或者换句话说，您的分类。我认为更好的问题是，我应该遵循什么指导方针，才能让我的项目变得更成功。例如，无论您如何管理和分类您的JavaScript文件，尽量不要在一个页面中包含太多的文件，因为每个文件都会向服务器发出单独的HTTP请求。或者，尽量在命名上保持一致，这样以后你就不会被你的代码搞糊涂了。对于CSS和JavaScript，我建议使用LDSW。

Answer 3

使用webpack来管理您的文件。一个简单的webpack设置如下所示

# /webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const postcssPresetEnv = require("postcss-preset-env");

module.exports = (env, argv) => {
  const devMode = argv.mode !== "production";

  return {
    mode: argv.mode,

    entry: {
      // Main / Shared
      'main': './Content/styles/main.scss',
      'theme': './Content/styles/theme.scss',
    
      // Pages
      'page-home': './Content/styles/pages/home/home.scss',
      'page-register': './Content/styles/pages/register/register.scss',

      // If we import _register-forms.scss at the top of register.scss,
      // there is no need to include it here. That has nothing to do with webpack.

      // Components / Partials
      'component-search': './Content/styles/components/search/search.scss',

      // Javscripts
      'client': './Content/client/client.js',
      'home': './Content/client/pages/home/index.js',
      'component-search': './Content/client/components/search/search.js',

      // Got more partial files? Just import { Helper } from './_search-helpers.js' inside  
      // search.js, and the code will be included.
    },

    resolve: {
      alias: {
        // Setup optional aliases
        pages: path.resolve(__dirname, 'Content/styles/pages'),
        components: path.resolve(__dirname, 'Content/styles/components'),
      }
    },
    output: {
      path: path.resolve(__dirname, "Content/dist"),
      publicPath: "/css",
      filename: devMode ? "js/[name].js" : "js/[name].min.js"
    },

    ... more webpack stuff here.

这样，您就不需要在webpack中引用所有scss文件了。例如，现在您可以使用以下命令导入较小的文件：

# /Content/styles/pages/register/register.scss

@import './_register-form'; 
@import './_register-layout'; 

您不必将它们包含在您的导入中，因为它们是使用scss @ webpack.config.js拉入到register.scss中的。

同样，在您的javascript文件中，您可以只导入所需的内容。

# /Content/client/components/search/search.js

import { SearchHelpers }  from '_search-helpers'; 

search.js现在将包含_search-helpers.js中的所有内容。

对我来说，这似乎是MVC项目中前端代码的逻辑结构。