普通html文档使用ES6模块_html es6-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43143404/article/details/82828131

普通html文档使用ES6模块

在普通的html文档使用ES6模块配合webpack进行模块开发

在以前的前端技术发展中是没有模块的概念,早期的开发中,如果要实现模块化的使用,是要通过script标签引入才能使用,但是不可避免要想使用不同的标签内的变量或者封装好的插件,则需要将构造函数或者变量通过window来进行暴露,但是就用了弊端,如果多人开发,同时变量名冲突的情况下就很难解决

于是就用了common.js使用require来进行解决,在ES6后,JS有了export和import来进行导出和导入,模块化的开发也是未来发展的趋势

因为JS语言的发展不局限于单单的前端,还想走更远,对标不同的语言

使用ES6模块

ps.相信你在阅读这篇文章之前已经回应用Vue或者node进行开发了,这篇文章是html通过script标签使用模块
废话不多说,马上开始

现在有一个我封装好的插件buttonSetTime.js文件,这个文件是一个对获取验证码的一个封装,点击button按钮后实现如下效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>按钮倒计时</title>
    <script src='./buttonSetTime.js'></script>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
</head>

<body>
    <button id='btn'>获取</button>
    <button id='btn2'></button>
    <button id='btn3'></button>
</body>

</html>
<script>
    buttonSetTime('btn').init({
        index: 5,
        start: '获取验证码',
        during: '秒后重新获取..',
        end: '重新获取',
        fn: function () {
            $.ajax({
                url: ' http://mmb.ittun.com/api/getbrandpro