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方法會被默認添加。