JavaScript的引入方式

QiD-man

已于 2023-04-06 20:13:14 修改

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript es6

于 2023-03-20 17:45:15 首次发布

本文链接：https://blog.csdn.net/shensanbai95/article/details/129672183

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript代码的三种常见引入方式：行内式、内嵌式和外链式，并详细展示了每种方式的代码示例。此外，还讲解了ES6中新增的模块（module）特性，包括export和import的使用，以及模块化的优点。

摘要由CSDN通过智能技术生成

1.行内式

2.内嵌式

3.外链式

补充：E6中新增的模块（module）使用

1.行内式

在HTML标签的内部属性中编写JS代码，比如事件的引入

代码：

<body>
    <div onclick="alert('你触发了点击事件')">行内式引入javascript</div>
</body>

结果：

2.内嵌式

在HTML页面中编写一个script标签，在这个标签里编写JS代码

代码：

<body>
    <div>内嵌式引入javascript</div>
    <script>
        const test = document.querySelector('div');
        test.onclick = function(){
            alert('你触发了点击事件');
        }
    </script>
</body>

结果：

3.外链式

建立外部.js文件，编写JS代码，然后引入到HTML页面中

代码：

demo.js代码

const test = document.querySelector('div');
    test.onclick = function(){
        alert('你触发了点击事件');
    }

html代码

<body>
    <div>外链式引入javascript</div>
    <script src="./demo.js" type="text/javascript"></script>
</body>

结果：

补充：E6中新增的模块（module）使用

在导出文件中用export导出变量、函数或者类等

在导入文件中用import进行导入

script标签中的type属性为'module'

代码：

demo2.js代码

export const x = '--变量打印--这是es6新增的module';
export function show(){
    console.log('--方法调用--这是es6新增的module');
}

html代码

<body>
    <div>es6中新增的module使用</div>
    <script type="module">
        import {x,show} from './demo2.js'
        console.log(x);
        show();
    </script>
</body>

结果：