iT邦幫忙

0

js oop 一問

  • 分享至 

  • xImage

大家好, 請問一下各位, 因為下面的this.chartGroup 之後會不停加入新的record, 可以怎樣把這一部分抽出來(新class?新的file), 再include 到這個class 的constructor, 謝謝

class chartAction {
    constructor() {
            this.svg;
            this.chartGroup = {
                "rf3": {
                    initgrid: 16,
                    title: '1-hour Rainfall / mm',
                    domain: [0, 0],
                    intv: 5,
                    ylabel_unit: 'mm',
                    ylabel: '',
                    def_station: '[30 HK Grids] ',
                    sel_station: '[30 HK Grids] ',
                    unit: ' mm',
                    dp: 1
                },
                "spd": {
                    initgrid: 11,
                    title: '10-m Wind Speed / m s\u207b\u00b9',
                    domain: [0, 0],
                    intv: 5,
                    ylabel_unit: 'm s\u207b\u00b9',
                    ylabel: '',
                    def_station: '[WGL] ',
                    sel_station: '',
                    unit: ' m s\u207b\u00b9',
                    dp: 1

                },
                "dir": {
                    initgrid: 11,
                    title: '10-m Wind Direction',
                    domain: [0, 360],
                    intv: 90,
                    ylabel_unit: '',
                    ylabel: '',
                    def_station: '[WGL] ',
                    sel_station: '',
                    unit: '\u00b0',
                    dp: 1
                },
                ...
           }
      }
}
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

3
天黑
iT邦研究生 5 級 ‧ 2021-12-13 16:44:39
最佳解答

我也覺得樓主用 json 比較好解決問題

3

若有特別的指定型態需求,用 Typescript 比較方便
JS 我可能會設計成:

class ChartAction {
  constructor() {
    this.svg;
    this.chartGroup = {};
  }

  addRecord(data) {
    if (data instanceof ChartData) {
      this.chartGroup = Object.assign(this.chartGroup, data);
    } else {
      throw new Error('Type error');
    }
  }

  printGroup() {
    console.log(this.chartGroup);
  }
}

class ChartData {
  constructor(
    key,
    initgrid,
    title,
    domain,
    intv,
    ylabel_unit,
    ylabel,
    def_station,
    sel_station,
    unit,
    dp
  ) {
    this[key] = {
      initgrid,
      title,
      domain,
      intv,
      ylabel_unit,
      ylabel,
      def_station,
      sel_station,
      unit,
      dp
    }
  }
}

let testData = {
  "rf3": {
    initgrid: 16,
    title: '1-hour Rainfall / mm',
    domain: [0, 0],
    intv: 5,
    ylabel_unit: 'mm',
    ylabel: '',
    def_station: '[30 HK Grids] ',
    sel_station: '[30 HK Grids] ',
    unit: ' mm',
    dp: 1
  },
  "spd": {
    initgrid: 11,
    title: '10-m Wind Speed / m s\u207b\u00b9',
    domain: [0, 0],
    intv: 5,
    ylabel_unit: 'm s\u207b\u00b9',
    ylabel: '',
    def_station: '[WGL] ',
    sel_station: '',
    unit: ' m s\u207b\u00b9',
    dp: 1

  },
  "dir": {
    initgrid: 11,
    title: '10-m Wind Direction',
    domain: [0, 360],
    intv: 90,
    ylabel_unit: '',
    ylabel: '',
    def_station: '[WGL] ',
    sel_station: '',
    unit: '\u00b0',
    dp: 1
  }
}

let test = new ChartAction();
for(let obj in testData){
  test.addRecord(new ChartData(...[obj, ...Object.values(testData[obj])]));
}
test.printGroup();
diu7me iT邦新手 3 級 ‧ 2021-12-13 17:09:58 檢舉

謝謝你的回答, 但這樣如果有很多record的話, 那就要寫好多次addRecord 了 ;(

用迴圈跑 addRecord 就可以了
也可以加入 Class 寫成方法呼叫
已更新範例

我要發表回答

立即登入回答