MVC 3 中 CSS、Javascript 及其命名约定的管理

Question

最近我正在构建一个严重依赖 javascript/jquery 的项目。当渲染某些部分视图时，它们需要应用一些 JavaScript 或 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 文件，都尽量不要在一个页面中包含很多 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'; 

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

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

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

import { SearchHelpers }  from '_search-helpers'; 

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

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