之前写过es5的组件（忘得差不多了...瞄一眼还是能拾起来的），后来学习es6的时候也写过，今天把它记下来。
es5的基本写法如下：
function dialog(){
this.settings = {
x: '',
y: '',
success: function (data) {} // 设置返回函数
// 这里设置需要传递的参数
}
}
// 初始化
dialog.prototype.init = function(opt){
extend( this.settings,opt);
this.creatEl();
this.doSomething();
};
//相关的功能函数
dialog.prototype.doSomething = function(){
...
return this.settings.success(data);
};
dialog.prototype.creatEl = function(){
...
};
function extend(obj1,obj2){
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}
使用：
html
<div id="btn1" style="width: 80px; height: 30px; text-align: center; line-height: 30px; background-color: #999; cursor: pointer; margin: 100px;" οnclick="btn1()">按钮1</div>
使用组件
function btn1(){
new dialog().init({
x: 0,
y: 1
// 此处填写需要传递的参数
})
}
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
接下来简要的写一下es6的组件写法：
我这里以canvas绘制圆形进度条为例，完整代码如下：
/*
* canvas制作圆形进度条
* 2019-4-3
* mosowe
*
*/
class cirProgress {
/* 构造函数 */
/*
* canvas: canvas元素id
* percent: 进度条高亮百分比展示
* bgColor: 进度条背景颜色
* barColor: 进度条高亮颜色
* cirWidth: 进度条圆弧宽度
* cirRadius: 半径
* animationTime: 动画时长，单位ms
*/
constructor (obj) {
this.canvasId = obj.canvas;
this.bgColor = obj.bgColor || '#CAE1FF';
this.barColor = obj.barColor || '#4876FF';
this.cirWidth = obj.cirWidth || 10;
this.cirRadius = obj.cirRadius || 100;
this.animationTime = obj.animationTime || 0;
this.canvas = '';
this.context = '';
this.centerX = '';
this.centerY = '';
this.rad = '';
this.canvasInit();
this.progressCircle();
this.animationCircle(obj.percent);
}
/* 初始化canvas */
canvasInit () {
this.canvas = document.getElementById(this.canvasId); //获取canvas元素
this.context = this.canvas.getContext('2d'); //获取画图环境，指明为2d
this.centerX = this.canvas.width/2; //Canvas中心点x轴坐标
this.centerY = this.canvas.height/2; //Canvas中心点y轴坐标
this.rad = Math.PI*2/100; //将360度分成100份，那么每一份就是rad度
}
/* 设置进度条高亮圆弧 */
hightLightCircle (n) {
this.context.save();
this.context.strokeStyle = this.barColor; //设置描边样式
this.context.lineWidth = this.cirWidth; //设置线宽
this.context.beginPath(); //路径开始
this.context.arc(this.centerX, this.centerY, this.cirRadius , -Math.PI/2, -Math.PI/2 +n*this.rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
this.context.stroke(); //绘制
this.context.closePath(); //路径结束
this.context.restore();
}
/* 设置进度条背景色 */
progressCircle () {
this.context.save();
this.context.beginPath();
this.context.lineWidth = this.cirWidth; //设置线宽
this.context.strokeStyle = this.bgColor;
this.context.arc(this.centerX, this.centerY, this.cirRadius , 0, Math.PI*2, false);
this.context.stroke();
this.context.closePath();
this.context.restore();
}
/* 进度条动画 */
animationCircle (n) {
let num = 0;
if (n <= 100) {
if (this.animationTime === 0) { // 不要动画
this.hightLightCircle(n);
} else { // 要动画
let t = setInterval(() => {
if (num < n) {
num += n / this.animationTime;
this.hightLightCircle(num);
} else {
clearInterval(t)
}
}, n / this.animationTime);
}
} else {
n = 0;
}
}
}
上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。
除了构造方法，还定义了其他方法，如canvasInit方法等，定义类方法的时候前面不需要加上function关键字，而且方法间不需要用逗号进行分割，用了还会报错。
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法，一个类必须有constructor方法，如果没有显示定义，一个空的constructor方法会被默认添加。