普通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>