普通html文档使用ES6模块

本文链接：https://blog.csdn.net/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/getbrandproductlist',
                type: 'get',
                data:{
                    brandtitleid:1
                },
                success: function (res) {
                    console.log(res);
                    
                }
            });

        }
    });
    buttonSetTime('btn2').init({
        index: 5,
        start: '获取验证码',
        during: '秒后重新获取..',
        end: '重新获取',
        fn: function () {
            $.ajax({
                url: ' http://mmb.ittun.com/api/getbrandproductlist',
                type: 'get',
                data:{
                    brandtitleid:1
                },
                success: function (res) {
                    console.log(res);
                    
                }
            });

        }
    })

    buttonSetTime('btn3').init({
        index: 60,
        start: "来获取",
        during: '秒后重新获取..',
        end: '重新获取',
        fn:function() {
            console.log(123);
        }
    })
</script>

其中里面的引用的jQuery只是用来进行进行ajax请求,下面是buttonSetTime.js的代码

/**
 * 倒计时功能
 */

;(function (w) {

    function ButtonSetTime(ele) {
        this.element = document.getElementById(ele);
    };

    /**
     * 
     * @param {初始化obj} obj 
     */
    ButtonSetTime.prototype.init = function (obj) {
        this.index = obj.index;
        this.start = obj.start || "获取验证码";
        this.during = obj.during || '秒后重新获取..';
        this.end = obj.end || this.start;
        this.element.innerHTML = this.start;
        this.edge=obj.index;
        var that = this;
        this.element.onclick = function () {
            that.element.setAttribute('disabled', true);
            that.element.innerHTML=that.index+that.during;
            var timeId = setInterval(function () {
                that.index--;
                if(that.index==0) {
                    clearInterval(timeId);
                    that.element.innerHTML=that.end;
                    that.element.removeAttribute('disabled');
                    that.index=obj.index;
                }else {
                    that.element.innerHTML=that.index+that.during;
                }
            }, 1000);
            if(obj.fn) {
                that.fn(obj.fn);
            }
        }
    }


    /**
     * 
     * @param {回调函数} fn 
     */
    ButtonSetTime.prototype.fn=function(fn) {
            fn();
    }
    w.buttonSetTime = function (ele) {
        return new ButtonSetTime(ele);
    }
}(window));

实现的效果如图
但是我现在要想使用ES6进行开发,将所有的组件都封住成为ES6的模块,让我不仅仅是能在普通的文档使用,还能在vue或者node使用,需要一些设置
buttonSetTime.js模块需要进行export导出

/**
 * 倒计时功能
 */

function ButtonSetTime(ele) {
    this.element = document.getElementById(ele);
}

/**
 * 
 * @param {初始化obj} obj 
 */
ButtonSetTime.prototype.init = function (obj) {
    this.index = obj.index;
    this.start = obj.start || "获取验证码";
    this.during = obj.during || '秒后重新获取..';
    this.end = obj.end || this.start;
    this.element.innerHTML = this.start;
    this.edge = obj.index;
    var that = this;
    this.element.onclick = function () {
        that.element.setAttribute('disabled', true);
        that.element.innerHTML = that.index + that.during;
        var timeId = setInterval(function () {
            that.index--;
            if (that.index == 0) {
                clearInterval(timeId);
                that.element.innerHTML = that.end;
                that.element.removeAttribute('disabled');
                that.index = obj.index;
            } else {
                that.element.innerHTML = that.index + that.during;
            }
        }, 1000);
        if (obj.fn) {
            that.fn(obj.fn);
        }
    }
}


/**
 * 
 * @param {回调函数} fn 
 */
ButtonSetTime.prototype.fn = function (fn) {
    fn();
}
var buttonSetTime = function (ele) {
    return new ButtonSetTime(ele);
}


export default buttonSetTime;

你需要安装一个webpack打包工具
npm i webpack -S
npm i webpack-cli -S
7.配置打包工具webpack.config.js

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './test.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

在这里插入图片描述

8.创建一个test.js的文件,这个文件导入buttonSetTime.js文件,并且写上业务处理代码

import buttonSetTime from './buttonSetTime'

buttonSetTime('btn').init({
  index: 5,
  start: '获取验证码',
  during: '秒后重新获取..',
  end: '重新获取'
  })

在这里插入图片描述
9.在根目录下运行终端,
webpack命令’’
10.webpack会生成一个dist文件,里面就有一个js文件

创建一个test.html文档,将生成的打包文件引入,html文档就能像原来一样正常跑起来

<!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>Document</title>
</head>

<body>
  <button id="btn"></button>
</body>

</html>

<script src='./dist/bundle.js'></script>

在这里插入图片描述