分割JS文件时解决JS的跨域问题

一、什么是跨域？

在了解跨域之前，首先要知道什么是同源策略（same-origin policy）。简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略，从而限制他们之间如下的交互行为：

1.Cookie、LocalStorage和IndexDB无法读取；

2.DOM无法获得；

3.AJAX请求不能发送。

跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域。

解决方法

将所有js文件的后缀改为mjs即可

解决方法：https://stackoverflow.com/questions/58384179/syntaxerror-cannot-use-import-statement-outside-a-module

注意 ：导入时要写完整后缀.mjs，不可以省略

import Animal from “./animal.mjs”;

animal.mjs

class Animal {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log("こんにちは");
    }

    info() {
        this.greet();
        console.log(`名前は${this.name}です`);
        console.log(`${this.age}歳です`);
    }
}
export default Animal;

dog.mjs

import Animal from "./animal.mjs";
class Dog extends Animal {
    // constructorを追加してください
    constructor(name, age, breed) {//参数别忘了
        super(name, age);//或者写super()，this.name = name;this.age = age;
        this.breed = breed;
    }

    info() {
        this.greet();
        console.log(`名前は${this.name}です`);
        // 「犬種は〇〇です」と出力してください
        console.log(`犬種は${this.breed}です`);
        console.log(`${this.age}歳です`);
        const humanAge = this.getHumanAge();
        console.log(`人間年齢で${humanAge}歳です`);
    }

    getHumanAge() {
        return this.age * 7;
    }
}
export default Dog;

dogData.mjs

import Dog from "./dog.mjs";

const dog = new Dog("レオ", 4, "チワワ");
export default dog;

script2.mjs

import dog from "./dogData.mjs";
dog.info();