用es6语法写ts导入html——面向对象实现点击div变随机色，刷新页面随机变色
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用es6语法写ts导入html——面向对象实现点击div变随机色，刷新页面随机变色相关的知识，希望对你有一定的参考价值。
Uncaught SyntaxError: Cannot use import statement outside a module的解决方法
这里报错的原因是用了es6的语法， 浏览器默认将它作为js解析会出现问题，需要将它作为模块导入，script标签默认type=“text/javascript”，需要改为type=“module”，
<script src="./js/Main.js" type="module"></script>
导入之后这个文件相当于就在这个当前环境中了。如果当前js中有类需要在另外一个<script>中使用，也可以直接导入，注意的是需要这个模块化的类型使用 <script type="module">
例如：
在同一个html引入这个Mainjs（由Maint.s转变而来）
既可以在在ts中写出直接运行的es6语法的ts代码，也可以通过这个import导出ts中的写的export default class Box类，但是注意的是，在ts中导入其他类时，这个来源的后缀名一定要写，而且这个后缀是.js,像是个bug，但是需要牢记。
<div class="div1"></div>
<script type="module">
import ball from './js/ball.js'
import Box from './js/Main.js'
ball.instance.play();
new Box().fun();
</script>
<script src="./js/Main.js" type="module"></script>
import app from "./app.js";
export default class Box
constructor()
//没有写ts的强大接口，只为说明问题
public fun()
console.log("fun");
var div = document.querySelector('div');
console.log(div);
console.log("aa");
var a = new app(div as HTMLDivElement);
那就总一下在es6模块化的时候：
- 导入的类的来源的文件后缀名必须加上
.js import app from "./app.js";- 外部调用需要写
type="module"
面向对象写简单的demo
TS面向对象：实现刷新变色和点击变色
onClick.ts代码描述
import BoxColor from "./Main.js"
export default class onclick
private static div:HTMLDivElement;
constructor(div:HTMLDivElement)
onclick.div = div;
div.addEventListener("click",e=>onclick.onclickHandler(e))
private static onclickHandler(e:MouseEvent)
new BoxColor(onclick.div);
Main.ts代码描述
export default class BoxColor
constructor(div:HTMLDivElement)
div.style.backgroundColor = BoxColor.radom();
private static radom():string
return Array(6).fill(1).reduce(v=>
return v +(~~(Math.random()*16)).toString(16);
,"#")
index.html代码描述
<body>
<div class="div1"></div>
<script type="module">
var div = document.querySelector(".div1");
import BoxColor from './js/Main.js';
new BoxColor(div);
/* 两个功能相互隔离不影响之间的操作 */
import onclick from "./js/onClick.js";
new onclick(div);
</script>
</body>
以上是关于用es6语法写ts导入html——面向对象实现点击div变随机色，刷新页面随机变色的主要内容，如果未能解决你的问题，请参考以下文章