标签：function es6 es5 obj 进度条 canvas animationTime context 组件
之前写过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方法会被默认添加。
Mosowe
发布了89 篇原创文章 · 获赞 41 · 访问量 35万+
私信
关注
标签：function,es6,es5,obj,进度条,canvas,animationTime,context,组件 来源： https://blog.csdn.net/skyblacktoday/article/details/89017740
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。