js oop 一問

js oop

diu7me 2021-12-13 15:56:43 ‧ 1150 瀏覽

分享至

大家好, 請問一下各位, 因為下面的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 }} |

直播中

2 個回答

天黑

iT邦研究生 5 級 ‧ 2021-12-13 16:44:39

最佳解答

也許你需要的是json file
參考連結: https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript

回應 1
分享
檢舉

清心明月 iT邦新手 3 級 ‧ 2021-12-14 06:27:47 檢舉

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

登入發表回應

居然解出來了

iT邦好手 1 級 ‧ 2021-12-13 16:42:20

若有特別的指定型態需求，用 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();