ES6类的引用和＜Script type=“module“＞导致的跨域问题

最新推荐文章于 2024-04-02 17:54:02 发布
最新推荐文章于 2024-04-02 17:54:02 发布
阅读量2.3k 收藏 4
点赞数 2
分类专栏： 前端学习 文章标签： es6 前端 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fragile98/article/details/126308355
版权

问题

用ES6的class实现了一个类。并且在script中用一个自执行函数，直接new一个实例来执行。类中方法太多，想重构到别的类中。

然而只要Class 加上import语句，script中就报错，找不到这个类。

解决办法

还是用import引入类。并且在主类下面记得export default 类名

然后设置script属性<script type="module">设置后代码才会被当成ES6模块，才能出现import和export关键词。所以在自执行函数前面 import 主类 from './mainClass.js'这样就能够找到了。

紧接着又报了跨域的错误。vscode可以用LiveServer插件解决这个问题。因为HTML使用type="module"会默认产生跨域请求，而file协议并不支持。

直接右键HTML文件选择Open with Live Server

fragile98
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中<script type="module">与<script type="text/javascript">互调的例子
07-01
html中<script type="module">的脚本调用<script type="text/javascript">中的脚本。 元素的onClick事件调用<script type="module">的脚本。
ES6中定义类和对象的方法示例
12-09
本文实例讲述了ES6中定义类和对象的方法。分享给大家供大家参考，具体如下： 类的基本定义和生成实例： // 类的基本定义和生成实例 class Parent{ //定义一个类 constructor(name='xiaxaioxian'){ this.name= name; } } // 生成一个实例 let g_parent = new Parent(); console.log(g_parent); //{name: "xiaxaioxian"} let v_parent = new Parent('v') // 'v'就是构造函数name属性 , 覆盖构造函数
script标签之type=“module“
最新发布
m0_54070657的博客
04-02 884
标签中的 JavaScript 代码是一个模块。浏览器会按照模块化的方式去加载和执行这段代码，包括解析依赖关系、异步加载等。模块具有自己的作用域，模块内部的变量和函数不会污染全局作用域，也不会受到其他模块的影响。标签时，会立即加载并执行其中的 JavaScript 代码。这意味着代码中的全局变量和函数都会污染全局作用域，可能导致命名冲突和变量覆盖等问题。加载 JavaScript 模块时，可能会遇到一些常见的报错。属性告诉浏览器，这个。：当浏览器遇到传统的。
ES6入门教程之Class和Module详解
08-30
主要给大家介绍了ES6中Class和Module的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
script 标签 ＜script type=“module“＞
ikkkp的博客
09-21 2980
一开始都是社区, 前端圈的大佬们自己实现模块化, 比如seajs, nodejs使用的CommonJS规范, 以及异步模块定义 AMD,官方的ES6 Module, 同时ES6 Module也是我们目前前端工程化开发中运用最广泛的模块化规范。在script标签中写js代码，或者使用src引入js文件时，默认不能使用module形式，即不能使用import导入文件，但是我们可以再script标签上加上type=module属性来改变方式。
ES6实现模块化时遇到的跨域问题(module)
weixin_45565864的博客
10-08 3313
ES6实现模块化时遇到的跨域问题(module) 1.HTML代码 <script src="aaa.js" type="module"></script> <script src="bbb.js" type="module"></script> <script src="mmm.js" type="module"></script> 2.浏览器打开报错 3.根据内容翻译 访问脚本文件：aaa.js“from origi
script之type=module
youhebuke225的博客
07-22 1万+
importscript。
script标签之type = module
热门推荐
小鱼酱酱酱~
07-28 5万+
我们知道，在script标签中写js代码，或者使用src引入js文件时，默认不能使用module形式，即不能使用import导入文件，但是我们可以再script标签上加上type=module属性来改变方式。 使用方法如下： //module.js export default function test(){ return 'test...' } // index.js import test from './module.js'; console.log(test()) // i..
web学习——JavaScript(1)
m0_51474171的博客
05-08 2090
1.js的调用方式与执行顺序 使用方式 HTML页面中的任意位置加上<script type="module"></script>标签即可。 常见使用方式有以下几种： 直接在<script type="module"></script>标签内写JS代码。 例如： 在.html文件中： <body> <script type="module"> let x = 3; console.log("x
script 标签 type=‘module‘ defer async的作用
黄彪博客
09-02 3920
文章目录文章参考script 标签的行为默认行为（无任何修饰）<script async ><script defer ><script type="module" ><script type ="module"><script type ="module" async>案例 文章参考 在浏览器中使用JavaScript module(模块) script 标签的行为 默认行为（无任何修饰） 浏览器会立即加载并执行指定的脚本 会阻塞 HTM
ES6标准 Arrow Function（箭头函数=）
11-21
第一个问题：代码输入快了容易输错成 funciton或者functoin或者其它，但是=>这个玩意你要是再写错就只能说有点过分了。 第二个问题：节省大量代码，我们先不用管下面的ES6代码为什么这样的语法能实现同样的功能，...
选择器：es6类，用易于样式化HTML替换默认选择输入
02-23
<option value =“>查看全部</ option> <option value =“>选项1 </ option> <option value =”>选项2 </ option> </ select>从“简单选择器”中导入选择器； const select = document.querySelector（'。js-...
前端跨域的理解和解决跨域的方案详解（全）
txun123的博客
04-18 1757
作为前端开发，我们遇到最多的应该就是跨域问题，对于萌新来说，跨域就是一道墙，不知所措，其实只要理解了跨域的含义和原理，解决它是不难的，今天给大家介绍下什么是跨域和跨域的解决方案！ 什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1、资源跳转：A链接、重定向、表单提交 2、资源嵌入：如<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url.
【JS】跨域问题的解决方法
A_soulmate的博客
07-17 691
一、什么是跨域？ 在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制      什么是同源策略？      同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。  ...
js - 关于ES6 Module模块化的跨域报错
qq_43886365的博客
07-19 995
`来自orgin的null`已被CORS策略(同源策略)阻止:跨源请求只支持协议方案:http，数据，chrome, chrome-extension, https。
type=“module“模式下的跨域问题
baidu_41604826的博客
10-28 5896
html中使用type="module"的模式引入Js文件会报跨域问题 <script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="module"> import './c.js' </script> a.js和b.js引入均正常 c.js引
TypeScript 里的 module 概念
SAP 资深技术专家 Jerry Wang 的技术分享
06-29 2091
Modules JavaScript 在处理模块化代码方面有着悠久的历史。 TypeScript 自 2012 年问世以来，已经实现了对许多这些格式的支持，但随着时间的推移，社区和 JavaScript 规范已经融合到一种称为 ES 模块（或 ES6 模块）的格式上。 您可能知道它是 import/export 语法。 ES Modules 于 2015 年添加到 JavaScript 规范中，到 2020 年在大多数 Web 浏览器和 JavaScript 运行时中得到广泛支持。 为了重点，手册将涵盖 E
将下面的代码换成imports的<!DOCTYPE html> <html> <head> <title>Three.js Example</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <script src="js/libs/three.js"></script> <script src="js/libs/GLTFLoader.js"></script> <script src="js/libs/OrbitControls.js"></script> <script>
05-31
可以用 JavaScript Import Map 的方式来代替在 HTML 中直接引入 JavaScript 模块的方式。具体来说，可以创建多个导入项，然后在代码中使用这些导入项来加载 Three.js 模块、GLTFLoader 模块和 OrbitControls 模块。 在 HTML 文件中添加以下代码： ```html <!DOCTYPE html> <html> <head> <title>Three.js Example</title> <style> body { margin: 0; overflow: hidden; } </style> <script type="importmap"> { "imports": { "three": "./js/libs/three.module.js", "three/examples/jsm/loaders/GLTFLoader": "./js/libs/GLTFLoader.js", "three/examples/jsm/controls/OrbitControls": "./js/libs/OrbitControls.js" } } </script> </head> <body> <script type="module"> import * as THREE from "three"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 在这里编写 Three.js 应用程序的代码 </script> </body> </html> ``` 然后可以在 JavaScript 代码中使用以下方式来加载 Three.js 模块、GLTFLoader 模块和 OrbitControls 模块： ```javascript import * as THREE from "three"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 在这里编写 Three.js 应用程序的代码 ``` 这样就可以将原来在 HTML 中直接引入 Three.js、GLTFLoader 和 OrbitControls 模块的方式改为使用 JavaScript Import Map 和 ES6 模块的方式来加载模块了。需要注意的是，为了让该方式生效，需要在支持 JavaScript Import Map 和 ES6 模块的环境下运行代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值