javascript - 同步使用requirejs

标签 javascript requirejs

我有一个 requirejs 项目,已优化为单个文件,我正在同步加载该文件。代码按预期加载,但模块仍然异步加载(它们直到加载过程的后期才可用),并且它给一些遗留代码带来了问题,我希望它能够使用。

鉴于下面的代码,有没有办法让 main-build 的方法在加载后、加载 legacy_code.js 之前立即可用?

<script type="text/javascript" src="/scripts/vendor/require.js"></script>
<script type="text/javascript" src="/scripts/main-build.js"></script>

<!-- At this point, the code is set up and it will be invoked later -->
<!-- ...but the next file requires to access methods in the modules.-->

<script type="text/javascript" src="/script/legacy_code.js"></script>

如果最坏的情况发生,我可以编写自己的 define()require() 版本(这也会释放大量带宽,因为所有这些需要做的是编目并调用模块),但我希望有一种内置的方法可以做到这一点。

最佳答案

在这里回答我自己的问题。查了半天,我找不到任何同步加载 Requirejs 代码或加载后立即调用模块的方法。所以我最终编写了一些代码来临时覆盖 requiredeclare 方法。它适用于我的用例,但如果其他人需要它,可能需要更改。我确信它可以比现在进行更多优化,但它确实有效。

您可以找到代码on GitHub ,我会尽力维护这一点。

此时的代码如下所示:

(function () {
    var self = {},
        originalDefine = window.define,
        originalRequire = window.require,
        modules = [];

    var define = function (id, deps, fn) {
        if (id !== 'requireLib' && id !== 'text') {
            modules.push({"id": id, "deps": deps, "fn": fn});
        }
    };



    var require = function (deps, fn) {
        var sortedModules = [],
            unsortedModules = [],
            resolvedDeps = {},
            maxAttempts = 1000,
            module,
            dep,
            depList,
            canAdd,
            i,
            j;

        unsortedModules = ([]).concat(modules);
        while (unsortedModules.length > 0 && --maxAttempts > 0) {

            for (i = unsortedModules.length - 1; i >= 0; i--) {
                canAdd = true;
                module = unsortedModules[i];

                for (j = 0; j < module.deps.length; j++) {
                    dep = module.deps[j];
                    if (resolvedDeps[dep] === undefined) {
                        canAdd = false;
                        break;
                    }
                }
                if (canAdd) {
                    resolvedDeps[module.id] = module;
                    sortedModules.push(unsortedModules.splice(i,1)[0]);
                }
            }
        }

        for (i = 0; i < sortedModules.length; i++) {
            module = sortedModules[i];
            depList = [];
            for (j = 0; j < module.deps.length; j++) {
                depList.push(resolvedDeps[module.deps[j]]);
            }
            resolvedDeps[module.id] = module.fn.apply(this, depList);
        }

        depList = [];
        for (i = 0; i < deps.length; i++) {
            depList.push(resolvedDeps[deps[i]]);
        }

        fn.apply(this, depList);

        window.define = originalDefine || function () {};
        window.require = originalRequire || function () {};
    };

    window.define = define;
    window.require = require;
    window.require.config = function() {};

    return self;
} ());

关于javascript - 同步使用requirejs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12121155/

相关文章:

javascript - 在加载了 AJAX 的 DOM 元素上运行 jQuery 脚本

javascript replace 方法有效,除非在循环中转义 html

javascript - RequireJS 模块的 TypeScript 编译生成行 Object.defineProperty(exports, "__esModule", { value : true }); How to get rid of it?

jquery - 诗农的假服务器没有响应

javascript - 谷歌地图 : get latitude and longitude from map element

javascript - 如何使用 jQuery 将文本复制到客户端的剪贴板?

javascript - Python解析JavaScript生成的HTML表格

javascript - 如何处理同一页面中两个不同的数据主属性?

javascript - 不匹配的匿名 define() 模块

playframework - 是否可以通过 RequireJS 强制 Play Framework 将所有 js 文件编译为一个文件?