使用ES6中的模块化在页面引入另一个模块

在JavaScript新标准ES6中，有一个重要的新增功能——模块化。通过模块化可以在页面中直接引入一个模块，也可以在一个JS文件引入另一个模块。下面将利用一个具体的实例来说明如何引入自定义的模块。

第一步：创建自定义模块

首先，我们需要双击打开HBuilder编辑工具，然后新建一个JS文件，并命名为person.js。在该文件中，我们可以定义一个class，并添加构造函数和方法showUserName。具体代码如下：

class Person {
    constructor() {}
    showUserName(name) {
        console.log(name);
    }
}
export default Person;

第二步：创建静态页面

接下来，我们需要新建一个HTML5模板文件，命名为。在该文件中，我们将引入上一步创建的person.js模块。具体代码如下：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;headgt;
    lt;titlegt;Person Module Examplelt;/titlegt;
    lt;script type"module" src"person.js"gt;lt;/scriptgt;
lt;/headgt;
lt;bodygt;
    lt;script type"module"gt;
        import Person from './person.js';
        const person  new Person();
        ('John Doe');
    lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;

第三步：引入模块并调用方法

现在，我们返回到person.js文件中，将showUserName方法修改为不再接受参数name，并使用console.log()打印name。具体代码如下：

class Person {
    constructor() {}
    showUserName() {
        const name  'John Doe';
        console.log(name);
    }
}
export default Person;

接着，在HTML5静态页面中，使用import关键字导入person.js模块，并直接调用showUserName方法。然后在浏览器中预览效果，可能会出现报错。这是因为浏览器默认不支持ES6模块化的语法。

第四步：解决浏览器报错

为了解决浏览器报错问题，我们需要在HTML5静态页面中添加type"module"属性，告诉浏览器该文件是一个模块化的文件。具体代码如下：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;headgt;
    lt;titlegt;Person Module Examplelt;/titlegt;
    lt;script type"module" src"person.js"gt;lt;/scriptgt;
lt;/headgt;
lt;bodygt;
    lt;script type"module"gt;
        import Person from './person.js';
        const person  new Person();
        ();
    lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;

第五步：重新引入模块并调用方法

现在，我们需要再次修改person.js文件中的showUserName方法。我们将方法的代码改为返回一个固定的name值，并使用export关键字导出Person类。具体代码如下：

class Person {
    constructor() {}
    showUserName() {
        const name  'John Doe';
        return name;
    }
}
export default Person;

然后，在HTML5静态页面中，我们可以通过创建一个person对象并调用showUserName方法来获取打印结果。具体代码如下：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;headgt;
    lt;titlegt;Person Module Examplelt;/titlegt;
    lt;script type"module" src"person.js"gt;lt;/scriptgt;
lt;/headgt;
lt;bodygt;
    lt;script type"module"gt;
        import Person from './person.js';
        const person  new Person();
        console.log(());
    lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。