- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在实现一个将在第三方网站上使用的面向 AMD 模块的 js 框架。
通过这一行,框架用户将配置必要的模块
<script data-main="/main.js" src="/require.js"></script>
问题是 data-main
引用是异步加载的,因此任何依赖 main.js
加载的模块的 js 逻辑都会失败,除非我可以确定它已完成加载中。
我对 requirejs 还很陌生,所以不确定创建一个供其他人使用的框架的最佳做法是什么。
如何解决这个非常简单的问题?
编辑一个例子来解释我的观点
main.js
requirejs.config({
paths: {
jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
}
});
主要 js 引用 + 额外代码
<script data-main="/main.js" src="/require.js"></script>
<script>
require(['jquery'], function($) {
// since main.js is not loaded yet, it will assume that there is a jquery.js
// file on the same folder that this file
console.log('myModule was also loaded and can use jQuery');
});
</script>
最佳答案
如果你想依赖其他库并且特别针对在 Require 管道中,你需要做的就是用
声明一些依赖项define(
'myModule', // module name
['foo'], // module dependencies
function(foo){ // module construction
var myModule = {};
.... code to set up the module ....
return myModule;
});
并且 Require 会处理事情。这将使用 Require 注册您的模块,并且在您的所有依赖项都可用之前不会尝试构建您的模块。讨论了此功能 here .
用例子更新
Require JS 被设计为可以在有和没有预构建配置的情况下工作。 Require 配置对象的 paths
属性仅向 Require 提供有关如何尝试查找尚未注册的库的信息。但是,无论模块是如何/在何处注册的,注册和依赖解析都是由 Require 处理的。请看this JSFiddle有关您如何注册和使用依赖项的工作示例。
关于配置的更新 2
由于 RequireJS 异步加载所有内容,您是正确的,您的代码示例将无法运行。但是,您对它“应该”如何工作做出了错误的假设。您有一个不正确的示例,说明您的图书馆客户的 Require 配置将是什么样子。如果其他人正在使用 RequireJS 构建应用程序并且他们想要使用您的库,他们应该在他们的 require.config
中声明您的库的路径:
require.config({
paths: {
// this tells require how to load jQuery (a library maintained neither by you nor your clients).
'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
// this tells require how to load myModule (the library you are building for your clients).
'myModule': '//example.com/js/my-module.min',
// this tells require how to load foo (a library built and hosted by your clients).
'foo': 'scripts/foo'
}
});
另一方面,如果您的客户不能更新他们的 Require 配置以在声明中包含您的库,那么您就不走运了。您所能做的就是获取所有依赖项并将它们捆绑在分发文件中,然后声明没有依赖项:
define(
'myModule',
[], // can't declare any dependencies
function() {
// these dependencies are inside of the definition function to keep the global namespace clean
// since we need jQuery, we have to inline it:
var jQuery = ....
// same goes for d3.js
var d3 = ....
// now we can set up the module itself
var myModule = {};
.... code to set up the module ....
return myModule;
}
);
显然,这个选项意味着您不能使用您的客户正在使用的库。这意味着您的库会更重,并且包含有效的重复代码和数据。
希望这能帮助您了解 Require 的工作原理以及其他人将如何使用您的库。
关于javascript - 如何让用户访问 main 之外的 requirejs 模块?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22204882/
如何使用 requirejs 导入 recaptcha。我已经尝试了几件事,但没有任何效果。 我需要这样做,以便能够在加载后使用 reCaptcha 的渲染方法自行渲染它。 require.confi
我正在尝试将 OpenLayers 库与 RequireJS 一起使用。 问题是,OpenLayers 一直处于“未定义”状态,即使它被列为我的模块的唯一依赖项: define(['OpenLayer
我正在尝试使用 gulp-requirejs构建一个演示项目。我希望结果是一个包含所有 js 依赖项和模板的单个文件。这是我的 gulpfile.js var gulp = require('gulp
没有 Require.js 就可以在浏览器控制台中调用全局对象,例如 app app.movies 当我将代码包装在 RequireJS 模块中时,如何在浏览器控制台中访问模块中的数据?我会发现这有助
这个问题有 3 个部分。我有两个模块 a 和 b。 如何在最初需要 b 后重新定义它? 如果 a 依赖于 b,我该如何更新 a 以使用新的 b? 如何找到所有依赖于 b 的模块并更新它们? 例如;
我正在尝试找到一种将 Backbone-relational 子模型与 RequireJS 一起使用的方法,其中子模型与 super 模型位于不同的文件中。 例如: // app.js define(
使用 require.js (r.js) 优化 js 代码时,将所有 js 源代码复制到目标目录(dir 属性)。 有没有办法(一些配置)来防止 requirejs 复制源文件? 最佳答案 如果添加
main.js 文件中的代码如下: phantom.injectJs("libs/require-1.0.7.js"); require.config( {
我在 require-config.js 中配置了一些路径,如下所示: var require = { baseUrl: '/javascript', paths: {
我正在重构一个大型 javascript 代码库以使用 RequireJS。不幸的是,我正在处理的许多文件都不是面向对象的,并且在不进行重大修改的情况下无法返回对象。是否有更有效的方法让“依赖”模块访
我是 RequireJS 的新手,我对加载顺序感到困惑。 我有一个全局项目配置,需要在位于 js/app/* 的模块之前加载。 这是我的结构: index.html config.js js/
我已经使用 requireJS 设置了一个 Angular 应用程序。在部署之前,我将所有内容捆绑到一个唯一的文件中。通常,外部库没有 requireJS“定义”包装器。 例如Angular Para
假设我有一个如下所示的模块: define(['jquery', 'actions', 'util', 'text!../templates/dialog.html!strip', 'text!../
如何使用 grunt-contrib-requirejs配置或什至r.js Config不缩小特定文件。 我可以使用optimize: 'none'选项禁用所有文件的缩小。但我不知道如何对单个文件禁用
好吧,我已经知道你应该像这样使用 RequireJS 配置路径 require.config({ paths: { name: 'value' } }); 并这样调用它。 requir
我希望能够有选择地定义一个模块,然后在我的代码中使用或不使用它。我正在考虑的特殊情况是在调试/测试环境中加载模拟/ stub 模块,但不是在我上线时加载。这是示例: 在 html 文件中,可以选择加载
我为构建过程创建了一个任务,其中 requirejs 作为它的子任务之一,并且在 requirejs 之后几乎没有其他任务。该任务在运行 requirejs 后停止,即使使用详细信息也不会抛出错误。任
我想创建一个可以从我的 RequireJS 项目中的任何模块访问的变量。 例如,在初始化时我想设置: this.myVar = 123; 并且能够在我的 RequireJS 项目内部(但不是外部)的任
我正在使用 TypeScript、Backbone 和 Mustache 编写网络应用程序。我想使用 Requirejs 进行依赖加载。 我还在使用 TypeScript 的 Web Essentia
我正在尝试创建一个节点样板,并尝试创建一个任务来运行 Jasmine 测试。我的 Gruntfile.js 中有以下配置: jasmine: { src : ['static/test/spec/
我是一名优秀的程序员,十分优秀!