好吧,我查看了这个网站并找到了几个不同的答案,但没有一个对我有用。 基本上有一个 js 文件,其中包含许多功能以及应用程序的主要代码。我想将我所有的功能移动到另一个 js 文件,这样我就可以稍微清理一下我的代码。我是 js 的新手,但我知道在 python 中它就像说“从(路径)导入(模块)作为(昵称)”一样简单
无论如何,假设我的 functions.js 模块中有一个名为 show message 的函数。
export function show_message(){
alert("Hello");
}
然后我在我的 main.js 文件的顶部
import { show_message } from './functions.js'
//I have also tried to import like this:
import * as func from './functions.js'
//And then I call it
show_message();
//I have also tried
func.show_message();
我知道这很简单,但正如我所说的,我到处都看到了不同的答案,但没有一个对我有用。顺便说一句,我正在使用 Firefox。我还在控制台中收到一条错误消息,提示我的导入声明需要位于模块的顶部,我通过在 HTML 链接中指定类型来解决此问题 (script src="/static/main.js"type="模块”) 错误消失了,但现在说“同源策略不允许读取文件(路径)中的远程资源(原因:cors 请求不是 HTTP)。”
另一个错误是“本文档中不允许使用模块源 URI”。
这让我觉得也许我的导入语法是正确的,错误是在我的 HTML 代码中?
感谢任何帮助。
最佳答案
您需要安装并运行本地网络服务器。 - 有关如何的建议, 继续阅读。
我尝试了一个简单的 HTML 文件 – index.html – 如下:
<!-- index.html - minimal HTML to keep it simple -->
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="#">
</head>
<body>
<h1>Hello world!</h1>
<p>Experimenting with JavaScript modules.</p>
<script type="module" src="js/functions.js"></script>
</body>
</html>
在子文件夹中js我把 JavaScript 文件 functions.js :
// js/functions.js
alert('Hello');
双击时index.html , 我的默认网络浏览器 – Firefox 89.0
(64 位)- 按 F12 后显示以下内容。
请注意 JavaScript 代码是如何未运行的:
错误信息:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/stackexchange/reproduce/jsModule/moduleNW/basics/js/functions.js. (Reason: CORS request not http).
作弊“解决方案”是(暂时)删除 type="module"从 HTML
代码。
警报随后会正确显示。
但是我想将JavaScript代码作为一个模块来运行,所以我放回去
type="module"在 HTML 中。
要将其作为模块运行,需要在网络服务器上运行。
因此,如果您想在自己的计算机上运行代码,则需要
(安装并)启动本地网络服务器。
当前流行的一种替代方法是 live-server。
这对我有用。
cmd.exe。)npm然后按 Enter 查看是否安装了 Node.js。command not found , 下载地址 https://nodejs.org/en/download/
并安装。 1sudo apt install -y nodejs 。)npm install live-server -g .cd <path-to-index.html> .live-server . localhost:8080 并显示警报。
见下文。)注意 1。
我在 Windows 10 上,但上面的说明在 Linux 和
macOS 也是。
注释 2。
这里我使用的是 Firefox 89.0,但我也尝试过 Google Chrome 91.0。
唯一值得注意的区别是 CORS 错误消息,在 Chrome 中显示为:
Access to script at 'file:///C:/stackexchange/reproduce/jsModule/basics/js/functions.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
接下来我创建一个新文件夹 demo2包含以下 demo2.html :
<!-- demo2.html - even shorter HTML for simplicity -->
<body>
<h1>Hello world!</h1>
<p>Javascript modules.</p>
<script type="module" src="js/main.js"></script>
</body>
我还在子文件夹 js 中创建了以下三个 JavaScript 文件:
// js/module1.js
export function hi () { console.log('Hi from module 1.'); }
和
// js/module2.js
export function howdy () { console.log('Howdy from module 2!'); }
和
// js/main.js
import { hi } from './module1.js';
import { howdy } from './module2.js';
hi();
howdy();
现在,我从 demo2.html 所在的文件夹中的终端运行 live-server
居住。
这次我开始打字
live-server --port=1234 --entry-file=demo2.html
并点击 Enter。截图:
1 在 Windows 10 上,我曾经需要 repair the installation .
关于Javascript 模块在浏览器中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52139811/
假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外,还有什么方法可以访问C和m中的其他内容?我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)?如何在使用完匿名模块后将其删除,使其定义的常量不再存在? 最佳答案 三个答案:是的,使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于
作为我的Rails应用程序的一部分,我编写了一个小导入程序,它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是,与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存,我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关,因为当我删除对LDAP内容的调用时,内存使用情况会很好地稳定下来。此外,不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray,它们都是LDAP库的一部分。当我运行导入时,内存使用量最终达到超过1GB的峰值。如果问题存在,我需要找到一些方法来更正我的代
我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah
如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象
在Rails4.0.2中,我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常,但在生产环境中它会抛出如下错误,ActionView::Template::Error(noimplicitconversionofnilintoString)在View中,create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo
我正在尝试在Ruby中制作一个cli应用程序,它接受一个给定的数组,然后将其显示为一个列表,我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了,但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情,但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem,我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点? 最佳答案 我不知道这是否是您正在寻找的,但也许您可以使用我的想法。由于我没有关于您要完成的工作
我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后,我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是,如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误,还是仅仅是Ruby解析变量名的方式的逻辑结果? 最佳答案 Isthisabug,or
我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码,但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如,我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码?我知道在pry中我可以执行类似show-methodmethod的操作,但我如何才能对Rails框架中的方法执行此操作?您对我如何更好地理解Gem及其API有什么建议吗?仅仅阅读源代码似乎真的很难,尤其是对于框架。谢谢! 最佳答案 Ru
我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组,即["apple","boy"]? 最佳答案 为了做到这一点,请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c
我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个,因为它显然有一个缺点?我有一种直觉,它可能与性能有关,因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是,据我所知,没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别,可能也是最著名的,是你的