普通html文档使用ES6模块

普通html文档使用ES6模块

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

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

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

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

使用ES6模块

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

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

    
    
    
    
    
    



    获取
    
    

2. 其中里面的引用的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));

3. 实现的效果如图
   
4. 但是我现在要想使用ES6进行开发,将所有的组件都封住成为ES6的模块,让我不仅仅是能在普通的文档使用,还能在vue或者node使用,需要一些设置
5. 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;

6. 你需要安装一个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文件

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

原因: 要想在html文档中使用es6模块,其实根本的原因需要通过webpack工具进行打包,因为webpack在打包的过程中根据依赖帮我们实现了一个异步加载的功能,同时省略自己通过require来书写许多回调,没有了回调的书写,就能按照常规写代码的方式进行业务处理,一个词"舒服"