es6：组件的创建与使用（含es5）

之前写过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;" onclick="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方法会被默认添加。