Dojo AMD没有加载自定义模块

作者: 甲基蓝
发布时间: 2024-08-21 03:14:41 (6天前)
转自：

3 条回复

0#
回复此人
Just do it | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我想你错过了在dojo配置中配置路径以便通过AMD加载器访问fileupload.js文件。 <a href="http://dojotoolkit.org/documentation/tutorials/1.10/dojo_config/" rel="nofollow noreferrer"> dojoConfig doc </A> 有很多类型的配置（basURl，包，路径......），下面你可以看到如何使用配置 <code> packges </code> ，dojo将使用require加载文件，没有任何问题 </p> <P> 所以在加载arcgis js api之前 <code> <script src="url_api_js"></script> </code> 做下面的事情（用dojo配置dojo） <code> dojoConfig </code> VAR） </p> <pre> <code> <script type="text/javascript"> var dojoConfig = { packages: [ { name: "mypackage", location: location.pathname.replace(/[^\/]+$/, '') +"/static" } ] }; <script> <script src="url_api_js"></script> </code> </pre> <P> 并且您的代码内部使用文件包/名称，如下所示 </p> <pre> <code> require(['mypackage/fileUpload'], function(upload) { upload.showDialog(); }); </code> </pre> <P> 注意：根据服务器类型，位置可能会发生变化，在这个例子中，位置如下： <code> {location_name}/static/fileupload.js </code> </p> <P> 希望这会对你有所帮助。 </p> </DIV>

编辑
1#
回复此人
老人与海。 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用AMD时，您可以通过定义事物来管理依赖项 <code> define() </code> 但是模块的客户端必须使用它来导入它 <code> require() </code> 功能， <a href="https://dojotoolkit.org/reference-guide/1.10/dojo/require.html" rel="nofollow noreferrer"> 看文档 </A> 同时你尝试通过实例化所需的模块 <code> new </code> 这是不正确的。 </p> <P> 要在DOM处理程序中使用某些模块，您需要额外的包装，例如你的HTML会做的 <code> onclick="whenClicked()" </code> 如果你在范围内有这个功能： </p> <pre> <code> function whenClicked() { require(['fileUpload'], function(fu) { fu.showDialog(); }); } </code> </pre> <P> 当然假设'fileUpload'是正确指定的AMD模块。 </p> <P> 的<strong> 编辑： </强> Plunker上OP样本的修改版本： <a href="https://plnkr.co/edit/QFckwndDicGpTfzhGwFC?p=preview" rel="nofollow noreferrer"> https://plnkr.co/edit/QFckwndDicGpTfzhGwFC?p=preview </A> </p> <P> 注意 <code> fileUpload.js </code> 模块定义已更改，以便显示基本警报： </p> <pre> <code> define([ "dijit/registry", "dijit/Dialog", "dijit/form/Button", "dojo/domReady!" ], function (registry) { return { // Show the dialog showDialog: function() { //registry.byId("uploads").show(); alert("this is file upload mock"); } } }); </code> </pre> <P> 以及 <code> home.js </code> 托管定义 <code> whenClicked </code> ： </p> <pre> <code> function whenClicked() { require({ packages: [ {name: "fileUpload", // location should point to fileUpload.js on your target server location: "https://run.plnkr.co/uv2ILkhQpQC2wqRV", main: "fileUpload"} ]}, ['fileUpload'], function(fu) { console.log("fileupload"); fu.showDialog(); }); } </code> </pre> <P> 注意显示 <code> location </code> 模块类似于bRIMO在其他答案中所说的。我的方法只为这个由require包装的特定代码配置位置; bRIMO的方法是全球性的。 </p> <P> 但请注意，Plunker正在重建 <code> location </code> 每次重新加载编辑器时的URL：/它实际上意味着您修复位置前缀，运行正常，重新加载Plunker页面，它再次被破坏。 </p> </DIV>

编辑

登录后才能参与评论