模块化与类(newInstance, get , set)

最新推荐文章于 2025-09-18 21:56:29 发布

原创最新推荐文章于 2025-09-18 21:56:29 发布 · 385 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vtkjs

Vtkjs 专栏收录该内容

6 篇文章

订阅专栏

本文档详细介绍了如何使用JavaScript创建类、实例化对象、属性的默认值设定、属性的访问和设置方法，以及类的继承机制。通过`macro.newInstance`和`extend`方法实现对象的实例化和扩展，`vtkFullScreenRenderWindow`展示了如何定义类的特定方法，如`setControllerVisibility`和`toggleControllerVisibility`。同时，文章还阐述了如何通过`macro.setGet`来暴露对象的get和set方法，以便于属性的访问和修改。

类的定义与导出

都以这种方式导出类，类.newInstance获取类实例，内部通过 publicAPI来定义类方法，model管理类属性

// ----------------------------------------------------------------------------
const DEFAULT_VALUES = {        //输入参数
  background: [0.32, 0.34, 0.43],
  listenWindowResize: true,
  container: null,
};

export function extend(publicAPI, model, initialValues = {}) {
  Object.assign(model, DEFAULT_VALUES, initialValues);
  console.log('publicapi',publicAPI)
  // Object methods
  macro.obj(publicAPI, model);
  macro.get(publicAPI, model, [
    'renderWindow',
    'renderer',
    'openGLRenderWindow',
    'interactor',
    'rootContainer',
    'container',
    'controlContainer',
  ]);


  // Object specific methods
  vtkFullScreenRenderWindow(publicAPI, model);
}


// ----------------------------------------------------------------------------


export const newInstance = macro.newInstance(extend);

// ----------------------------------------------------------------------------

export default { newInstance, extend };

一个类模块导出方法newInstance和extend ，

newInstance方法调用macro.newInstance方法来创建新的实例

extend方法用于类继承

创建实例

一个类模块导出方法newInstance

newInstance方法调用macro.newInstance方法来创建新的实例

macro.newInstance
export function newInstance(extend, className) {
  const constructor = (initialValues = {}) => {
    const model = {};
    const publicAPI = {};
    extend(publicAPI, model, initialValues);

    return Object.freeze(publicAPI);
  };

  // Register constructor to factory
  if (className) {
    vtk.register(className, constructor);
  }

  return constructor;
}

内部方法的定义

function vtkFullScreenRenderWindow(publicAPI, model) {
  publicAPI.setControllerVisibility = (visible) => {
    model.controllerVisibility = visible;
    if (model.controlContainer) {
      if (visible) {
        model.controlContainer.style.display = 'block';
      } else {
        model.controlContainer.style.display = 'none';
      }
    }
  };


  publicAPI.toggleControllerVisibility = () => {
    publicAPI.setControllerVisibility(!model.controllerVisibility);
  };

}

属性:

默认属性的定义

const DEFAULT_VALUES = {
  radius: 1.0,
  resolution: 6,
  center: [0, 0, 0],
  pointType: 'Float32Array',
  lines: false,
  face: true,
};
export function extend(publicAPI, model, initialValues = {}) {
  Object.assign(model, DEFAULT_VALUES, initialValues);
    ...
}
export const newInstance = macro.newInstance(extend, 'vtkCircleSource');

通过调用newInstance方法传参来设置属性

CircleSource.newInstance({ radius: 1, resolution: 80, lines: true, face: false });

属性的访问：

通过macro.setGet macro.setGetArray等方法为属性加上get/set方法来暴露属性：

  macro.setGet(publicAPI, model, ['radius', 'resolution', 'lines', 'face']);
  macro.setGetArray(publicAPI, model, ['center'], 3);

如上面暴露了方法：

setRadius()
getRadius()

macro.setGet源码：（macro是一个语法糖工具用于为对象提供一定特别功能）

export function setGet(publicAPI, model, fieldNames) {
  get(publicAPI, model, fieldNames);
  set(publicAPI, model, fieldNames);
}

export function get(publicAPI, model, fieldNames) {
  fieldNames.forEach((field) => {
    if (typeof field === 'object') {
      publicAPI[`get${capitalize(field.name)}`] = () => model[field.name];
    } else {
      publicAPI[`get${capitalize(field)}`] = () => model[field];
    }
  });
}

export function set(publicAPI, model, fields) {
  fields.forEach((field) => {
    if (typeof field === 'object') {
      publicAPI[`set${capitalize(field.name)}`] = findSetter(field)(
        publicAPI,
        model
      );
    } else {
      publicAPI[`set${capitalize(field)}`] = findSetter(field)(
        publicAPI,
        model
      );
    }
  });
}

继承

每个类的定义都是一个extend方法来扩展publicAPI对象和数据模型对象model,同时这个extend方法被导出，

继承通过类名.extend方式来让publicAPI和model继承父类方法属性。

如下：

vtkCellArray 继承于vtkDataArray

export function extend(publicAPI, model, initialValues = {}) {
    vtkDataArray.extend(publicAPI, model, initialValues);
}