JavaScript（不要与Java混淆）是一种高级，动态，多范式，面向对象，基于原型的弱类型语言，用于客户端和服务器端脚本。它的主要用途是渲染和操作网页。使用此标记可以了解有关ECMAScript及其各种方言/实现的问题（不包括ActionScript和Google-Apps-Script）。
无法从 Cloudflare R2 访问 JavaScript 模块...为什么我会收到 CORS 错误？
我正在使用 R2 为我的网页 index.html 提供静态文件： <p>我正在使用 R2 为我的网页 index.html 提供静态文件：</p> <pre><code> <script type="module" src="{% static 'js/display.js' %}"></script> <script type="module" src="{% static 'js/run-model.js' %}"></script> <script src="{% static 'js/file.js' %}"></script> </code></pre> <p>显示.js</p> <pre><code>import { variable1, function1} from "./run-model.js"; </code></pre> <p>运行模型.js</p> <pre><code>import { variable2, function2} from "./display.js"; </code></pre> <p>该站点能够加载 js 文件，但是当模块尝试导入变量时，它还会引发 CORS 错误。我尝试在 Cloudflare 中添加一条规则，将 Access-Control-Allow-Origin 标头设置为 *，并在存储桶上为我的域<a href="https://www.example.com" rel="nofollow noreferrer">https://www.example.com</a> 中的任何内容设置 CORS 策略。还是同样的问题...这是为什么？</p> <blockquote> <p>从源“https://www.example.com”访问“https://<>.r2.cloudflarestorage.com/bucket/js/display.js”处的脚本已被 CORS 策略阻止：无“访问” -Control-Allow-Origin'标头存在于请求的资源上。</p> </blockquote> <blockquote> <p>获取 https://<>.r2.cloudflarestorage.com/bucket/js/display.js net::ERR_FAILED 400（错误请求）</p> </blockquote> <blockquote> <p>从源“https://www.example.com”访问“https://<>.r2.cloudflarestorage.com/bucket/js/run-model.js”处的脚本已被 CORS 策略阻止：否请求的资源上存在“Access-Control-Allow-Origin”标头。</p> </blockquote> <blockquote> <p>获取 https://<>.r2.cloudflarestorage.com/bucket/js/run-model.js net::ERR_FAILED 400（错误请求）</p> </blockquote> <p>这两个失败的项目没有 Access-Control-Allow-Origin 标头，并且 Content-Type 标头为“application/xml”：</p> <p><a href="https://i.sstatic.net/82dB7LET.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvODJkQjdMRVQucG5n" alt="enter image description here"/></a></p> </question> <answer tick="false" vote="0"> <p>在 Cloudflare 仪表板上，转到相关 R2 存储桶的设置，并更新 CORS 策略以允许您的主机名。</p> <p>例如：</p> <pre><code>[ { "AllowedOrigins": [ "http://localhost:3000", "https://my-app.pages.dev" ], "AllowedMethods": [ "GET" ], "AllowedHeaders": [ "*" ] } ]``` </code></pre> </answer> </body></html>
我写了一个模块： 窗口.FileReader = (函数() { var 读取 = 函数（文件）{ var reader = new FileReader(); reader.onload = 函数 (e) { 合作...
考虑我们有这个示例组件： 函数计数器() { const [count, setCount] = React.useState(0); 返回 （ {计数} 考虑我们有这个示例组件： function Counter() { const [count, setCount] = React.useState(0); return ( <div> <div> {count} </div> <button onClick={() => { setCount(count + 1); }} > Increase </button> </div> ); } 我有时会遇到一些代码，其中有人在渲染中将反应组件调用为函数： const App = () => ( <div> {Counter()} </div> ) vs 将其渲染为元素： const App = () => ( <div> <Counter/> </div> ) 在react hooks中，是否允许将组件作为函数调用？如果我们这样做会出现什么问题？ 似乎有一个问题可以认为与此类似；尽管那不是专门关于钩子的。而且这个问题似乎强调了性能影响。 React docs 不鼓励将组件作为函数调用： 组件只能在 JSX 中使用。不要像平常那样称呼他们 功能。 React 应该调用它。 他们提到的原因之一是： 如果组件包含Hooks，很容易违反Hooks规则 当直接在循环中或有条件地调用组件时。 虽然他们没有详细说明上面的引用，但我认为下面的示例显示了他们可能的含义。 当您将组件作为函数调用并且其中包含钩子的使用时，在这种情况下，React 会认为该函数中的钩子属于父组件。因此，如果您有条件地调用此类组件（就像我们对下面的TestB()所做的那样），您将违反钩子的rules之一。点击重新渲染按钮可以看到错误： 错误：渲染的钩子数量少于预期。这可能是由于 意外提前退货声明。 function TestB() { let [B, setB] = React.useState(0); return ( <div onClick={() => { setB(B + 1); }} > counter B {B} </div> ); } function App() { let [A, setA] = React.useState(0); return ( <div> <button onClick={() => { setA(A + 1); }} > re-render </button> {/* Conditionally render TestB() */} {A % 2 == 0 ? TestB() : null} </div> ); } ReactDOM.render( <App />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div> 现在您可以使用上面的<TestB/>来代替并查看差异。 文档还提到将组件呈现为元素（而不是将其作为函数调用）允许组件类型参与协调。 这意味着，当您将反应组件渲染为反应元素时，例如 <TestB/> ，然后在下一次渲染时，由于协调算法（并且因为组件类型已更改），React 将卸载 <TestC/> 组件（其所有状态都将消失）并安装一个新组件 <TestB/>。但是，如果您将其称为函数（例如<TestC/>），则组件类型将不再参与协调，您可能无法获得预期的结果。见下面的例子： TestB() function TestB() { return ( <div > <input/> </div> ); } function TestC() { console.log("TestC") return ( <div > <input/> </div> ); } function App() { let [A, setA] = React.useState(0); return ( <div> <button onClick={() => { setA(A + 1); }} > re-render </button> {/* Here we are alternating rendering of components */} {A % 2 == 0 ? TestB() : TestC()} </div> ); } ReactDOM.render( <App />, document.getElementById("react") ); 在输入框中输入内容 现在单击重新渲染按钮 您现在可以从日志中看到组件 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div> 已渲染，但输入显示的值与您之前键入的值相同 - 这可能不是您想要的，因为您渲染了不同的组件。发生这种情况是因为 Reacts 协调算法无法检测到我们移动到了不同的组件（从 TestC 到 TestB）并且没有从 DOM 中删除先前的输入实例。 现在将这些组件渲染为元素（TestC和<TestB/>）以查看差异。将组件渲染为元素的好处 文档还提到了将组件渲染为元素的以下好处： 组件不再只是功能。 React 可以通过以下方式增强它们 通过 Hooks 绑定到本地状态等功能 组件在树中的身份。 组件类型参与协调。通过让 React 调用 你的组件，你还告诉它更多关于概念结构的信息 你的树。例如，当您从渲染移动到 页面，React 不会尝试重用它们。 React 可以增强您的用户体验。例如，它可以让 浏览器在组件调用之间做一些工作，以便重新渲染 大组件树不会阻塞主线程。 更好的调试故事。如果组件是一等公民 该库知道，我们可以构建丰富的开发工具 在发展中反省。 更高效的对账。 React 可以准确决定哪个 树中的组件需要重新渲染并跳过那些 不。这使您的应用程序更快、更敏捷。
考虑我们有这个示例组件： 函数计数器() { const [count, setCount] = React.useState(0); 返回 （ {计数} 考虑我们有这个示例组件： function Counter() { const [count, setCount] = React.useState(0); return ( <div> <div> {count} </div> <button onClick={() => { setCount(count + 1); }} > Increase </button> </div> ); } 我有时会遇到一些代码，其中有人在渲染中将反应组件调用为函数： const App = () => ( <div> {Counter()} </div> ) vs 将其渲染为元素： const App = () => ( <div> <Counter/> </div> ) 在react hooks中，是否允许将组件作为函数调用？如果我们这样做会出现什么问题？ 似乎有一个问题可以认为与此类似；尽管那不是专门关于钩子的。而且这个问题似乎强调了性能影响。 React docs 不鼓励将组件作为函数调用： 组件只能在 JSX 中使用。不要像平常那样称呼他们 功能。 React 应该调用它。 他们提到的原因之一是： 如果组件包含Hooks，很容易违反Hooks规则 当直接在循环中或有条件地调用组件时。 虽然他们没有详细说明上面的引用，但我认为下面的示例显示了他们可能的含义。 当您将组件作为函数调用并且其中包含钩子的使用时，在这种情况下，React 会认为该函数中的钩子属于父组件。因此，如果您有条件地调用此类组件（就像我们对下面的TestB()所做的那样），您将违反钩子的rules之一。点击重新渲染按钮可以看到错误： 错误：渲染的钩子数量少于预期。这可能是由于 意外提前退货声明。 function TestB() { let [B, setB] = React.useState(0); return ( <div onClick={() => { setB(B + 1); }} > counter B {B} </div> ); } function App() { let [A, setA] = React.useState(0); return ( <div> <button onClick={() => { setA(A + 1); }} > re-render </button> {/* Conditionally render TestB() */} {A % 2 == 0 ? TestB() : null} </div> ); } ReactDOM.render( <App />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div> 现在您可以使用上面的<TestB/>来代替并查看差异。 文档还提到将组件呈现为元素（而不是将其作为函数调用）允许组件类型参与协调。 这意味着，当您将反应组件渲染为反应元素时，例如 <TestB/> ，然后在下一次渲染时，由于协调算法（并且因为组件类型已更改），React 将卸载 <TestC/> 组件（其所有状态都将消失）并安装一个新组件 <TestB/>。但是，如果您将其称为函数（例如<TestC/>），则组件类型将不再参与协调，您可能无法获得预期的结果。见下面的例子： TestB() function TestB() { return ( <div > <input/> </div> ); } function TestC() { console.log("TestC") return ( <div > <input/> </div> ); } function App() { let [A, setA] = React.useState(0); return ( <div> <button onClick={() => { setA(A + 1); }} > re-render </button> {/* Here we are alternating rendering of components */} {A % 2 == 0 ? TestB() : TestC()} </div> ); } ReactDOM.render( <App />, document.getElementById("react") ); 在输入框中输入内容 现在单击重新渲染按钮 您现在可以从日志中看到组件 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div> 已渲染，但输入显示的值与您之前键入的值相同 - 这可能不是您想要的，因为您渲染了不同的组件。发生这种情况是因为 Reacts 协调算法无法检测到我们移动到了不同的组件（从 TestC 到 TestB）并且没有从 DOM 中删除先前的输入实例。 现在将这些组件渲染为元素（TestC和<TestB/>）以查看差异。将组件渲染为元素的好处 文档还提到了将组件渲染为元素的以下好处： 组件不再只是功能。 React 可以通过以下方式增强它们 通过 Hooks 绑定到本地状态等功能 组件在树中的身份。 组件类型参与协调。通过让 React 调用 你的组件，你还告诉它更多关于概念结构的信息 你的树。例如，当您从渲染移动到 页面，React 不会尝试重用它们。 React 可以增强您的用户体验。例如，它可以让 浏览器在组件调用之间做一些工作，以便重新渲染 大组件树不会阻塞主线程。 更好的调试故事。如果组件是一等公民 该库知道，我们可以构建丰富的开发工具 在发展中反省。 更高效的对账。 React 可以准确决定哪个 树中的组件需要重新渲染并跳过那些 不。这使您的应用程序更快、更敏捷。
我有一个 Shadcn UI 轮播，应该显示一堆图像；轮播控件在那里，它们似乎适合屏幕，但图像没有显示。 注意：如果我更换
我有一个 Google 表单，我正在尝试举办慈善抽奖活动。其中一个问题是多项选择：1 张抽奖券 - 20 美元，另一个选项是：3 张抽奖券 - 50 美元。如果有人选择...
OfflineAudioContext.suspend 的浏览器兼容性表对于 Firefox 有一个空单元格，这非常令人困惑。 它在 Chrome 中运行良好。我仍然认为 OfflineAudioContext.suspend 是
articles.js 中有一个错误 文章.js： 从'react'导入React，{Component}； 导入'./index.css'; 导出默认类 类扩展组件 { 构造函数（道具）{ 超级(pr...
我正在尝试一个新的 Angular-Cli 应用程序，由于某种原因，当我添加路线时，主页（仪表板）停止加载。 这是我要添加路线的组件： 导入 { 组件，OnIn...
我有一些代码基本上在Javascript中调用fetch。第三方服务有时需要很长时间才能返回响应，为了更加用户友好，我希望能够...
我是 CSS 框架的新手，我尝试了解我的配置哪里出了问题。 安装 Tailwind 并正常工作 使用以下命令通过 npm 安装 Flowbite JS： npm 安装 flowbite 修改了
仅使用内置加密模块在 Node.js 中实现密码哈希和验证的最佳方法是什么？ 基本上需要什么： 函数passwordHash(password) {} // => 密码Hash
应用程序生成 HTML 错误“意外的令牌”<'" when setting the src attribute to a js file
我正在尝试使用一个 .js 文件，该文件是使用 index.html 文件中的脚本标记中的 src 属性设置的。该应用程序使用 Node JS 启动服务器并提供此 index.html 文件。 ...
我编写了一个库，可以像这样导出单个对象 导出默认类 JWTSigner 这在导入库的测试中效果很好，如下所示： 从 '../
我正在编写一些使用反应钩子形式来捕获输入状态的代码，但我不确定为什么当我输入输入时，特别是占位符文本为“或搜索...
用数据填充卡（Javascript 和 Firestore）
我目前正在构建一个 KDS，它将使用 javascript 和 firestore 显示订单。订单用卡片展示。但是，当我尝试显示每个
我试图找出为什么会出现以下错误： 类型错误：无法读取未定义的属性（读取“包含”） 错误发生在 var nameIndex = dataFlatArr.findIndex(...
我需要使用零依赖 JavaScript 生成确定性的 ECDSA 密钥集，为此我用原始字节生成一个 pkcs8 密钥，然后将其导入为 ECDSA 私钥。这符合逻辑吗...
TypeScript 中是否需要进行 Null 检查以确保运行时安全？
TypeScript 类型仅在编译时强制执行，在运行时不存在。鉴于此，如果我定义一个接受字符串参数的 TypeScript 函数，是否有必要执行 null 检查...
使用 Spring Boot，我实现了一个 RestController，如下所示： @RestController @RequestMapping(“/api/v1/student/img”) @CrossOrigin(“*”) 公共类 ProfilePictureController { ...