在一个文件中定义多个 html amd 模块答案

【问题标题】：Define multiple html amd modules in one file在一个文件中定义多个 html amd 模块
【发布时间】：2014-02-17 18:30:25
【问题描述】：

有什么方法可以在文本文档中定义 requirejs 吗？还是html文档？

我有一个包含表格标题和单元格模板的文档

<body>
    <th data-fieldname="PatientPerson">Name <span data-bind="attr: { class: sortField() == 'PatientPerson' ? 'inline-block' : 'hide' }"></span></th>
    <td><span class="glyphicon glyphicon-expand"></span><a data-bind="click: function () { $parent.loadReportSummary(PatientPerson.ID()) }"><span data-bind="text: PatientPerson.FullName"></span></a></td>

    <th data-fieldname="StudyType">Study Type <span data-bind="attr: { class: sortField() == 'StudyType' ? 'inline-block' : 'hide' }"></span></th>
    <td data-bind="text: StudyType"></td>


    <th data-fieldname="ServiceDate">Service Date<span data-bind="attr: { class: sortField() == 'ServiceDate' ? 'inline-block' : 'hide' }"></span></th>
    <td data-bind="text: ServiceDate"></td>


    <th>Export Summary</th>
    <td><a data-bind="click: function (data) { $parent.exportReportSummary(data, PatientPerson.ID, SummaryID, !StudyExported()) }">View</a></td>


    <th>Print All Reports</th>
    <td><a data-bind="click: function (data) { $parent.printAllReports('/PrintReports/Reports?summaryID=' + SummaryID) }">Print</a></td>

etc.......
</body>

在另一个模块中，我有一个数组，它确定这些列中的哪些列用于剔除计算的 observable 中。我希望我可以将它们中的每一个都制作成一个模块，而不是使用 jquery 来解析它们，但我希望它们都在一个文件中。我正在使用requirejs的文本插件，但似乎没有办法将这些中的每一个声明为一个文件中的一个模块，并且必须将它们中的每一个拆分成单独的文件似乎很浪费。

可能是这样的

<!--export name:"PatientPerson" -->
    <th data-fieldname="PatientPerson">Name <span data-bind="attr: { class: sortField() == 'PatientPerson' ? 'inline-block' : 'hide' }"></span></th>
    <td><span class="glyphicon glyphicon-expand"></span><a data-bind="click: function () { $parent.loadReportSummary(PatientPerson.ID()) }"><span data-bind="text: PatientPerson.FullName"></span></a></td>
<!-- /export-->

然后像这样引用模块

require('filename').PatientPerson;

【问题讨论】：

标签： html text module requirejs

【解决方案1】：

我创建了一个插件，您可以在其中添加 !define 到某些文件的要求末尾，它将使 OP 建议的规范起作用。它适用于 requirejs 的官方文本插件。

define(['text', 'module'], function (text, module) {
    var exportRegExp = /<!--\s*?export[^>]*>([\s\S]*?)<!--\s*?\/export\s*?-->/g,
    masterConfig = (module.config && module.config()) || {},
    buildMap={};
    text.export = function (content) {
        var exports = null;
        if (content) {
            var matches = content.match(exportRegExp) || [],
                match, _i, _len;
            exports = matches.length ? {} : null;
            for (_i = 0, _len = matches.length; _i < _len; _i++) {
                match = matches[_i];
                var exportName = match.match(/(<!--\s*?export\s*?name\:")(.*?)\"\s*?-->/).slice(-1)[0];
                exports[exportName] = match.replace(/<!--\s*?export[^>]*>\n?/, '').replace(/<!--\s*?\/export\s*?-->/, '');
            }
        }
        return exports;
    };
    var baseParseName = text.parseName;
    text.parseName = function(name) {
        var index, parseExport = false;
        index = name.indexOf('!export');
        if (index !== -1) {
            parseExport = true;
            name.split('!export').join('');
        }
        var out = baseParseName(name);
        out["strip"] = { "export": parseExport, "strip": out["strip"] };
        return out;
    };

    text.finishLoad = function (name, strip, content, onLoad) {
        var exports = strip.export ? text.export(content,name) : content;
        if (exports == null) content = strip.strip ? text.strip(content) : content;
        else content = exports;
        if (masterConfig.isBuild) {
            buildMap[name] = content;
        }
        onLoad(content);
    };
    text.write = function (pluginName, moduleName, write, config) {
        if (buildMap.hasOwnProperty(moduleName)) {
            var content = text.jsEscape(buildMap[moduleName]);
            write.asModule(pluginName + "!" + moduleName,
                           "define(function () { return '" +
                               content +
                           "';});\n");
        }
    };
});

以下将起作用

require([text!somefile!define],function(){})

这也有效，但如果文件中存在任何导出，它会忽略 !strip 命令。

require([text!somefile!strip!define],function(){})

那你就可以打电话了

require(['someModuleNameInDefineComment'],function(){})

我还没有处理标题中带有开头定义的条带。

Here is a Gist

【讨论】：