源码分析之Openlayers中核心BaseObject类

访问Openlayers网站(https://jinuss.github.io/Openlayers_map_pages/，网站是基于Vue3 + Openlayers，里面有大量的实践和案例。觉得还不错，可以 给个小星星Star，鼓励一波 https://github.com/Jinuss/OpenlayersMap哦~

概述

本文主要介绍BaseObject类，该类继承于Observable类，一般情况下BaseObject类也是其它类的父类，而很少直接当作构造函数进行实例化。

源码剖析

BaseObject类实现如下：

class BaseObject extends Observable {
  constructor(values) {
    super();
    this.on;
    this.once;
    this.un;
    this.getUid(this);
    this.values_ = null;
    if (values !== undefined) {
      this.setProperties(values);
    }
  }
  get(key) {
    let value;
    if (this.values_ && this.values_.hasOwnProperty(key)) {
      value = this.values_[key];
    }
    return value;
  }
  getKeys() {
    return (this.values_ && Object.keys(this.values_)) || [];
  }
  getProperties() {
    return (this.values_ && Object.assign({}, this.values_)) || {};
  }
  getPropertiesInternal() {
    return this.values_;
  }
  hasProperties() {
    return !!this.values_;
  }
  notify(key, oldValue) {
    let eventType;
    eventType = `change:${key}`;
    if (this.hasListener(eventType)) {
      this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
    }
    eventType = ObjectEventType.PROPERTYCHANGE;
    if (this.hasListener(eventType)) {
      this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
    }
  }
  addChangeListener(key, listener) {
    this.addEventListener(`change:${key}`, listener);
  }
  removeChangeListener(key, listener) {
    this.removeEventListener(`change:${key}`, listener);
  }
  set(key, value, silent) {
    const values = this.values_ || (this.values_ = {});
    if (silent) {
      values[key] = value;
    } else {
      const oldValue = values[key];
      values[key] = value;
      if (oldValue !== value) {
        this.notify(key, oldValue);
      }
    }
  }
  setProperties(values, silent) {
    for (const key in values) {
      this.set(key, values[key], silent);
    }
  }
  applyProperties(source) {
    if (!source.values_) {
      return;
    }
    Object.assign(this.values_ || (this.values_ = {}), source.values_);
  }
  unset(key, silent) {
    if (this.values_ && key in this.values_) {
      const oldValue = this.values_[key];
      delete this.values_[key];
      if (isEmpty(this.values_)) {
        this.values_ = null;
      }
      if (!silent) {
        this.notify(key, oldValue);
      }
    }
  }
}

BaseObject类的主线

BaseObject类构造函数接受一个对象参数values,会调用 getUid方法，该方法就是设置ol_uid的值，初始化this.values_为null,然后判断参数values是否存在，若存在，则调用this.setProperties方法。

setProperties方法就是通过for...in遍历values去调用set方法。而set方法中会去将值绑定到this.values_上，还会进行this.values_[key]的新旧值对比，若二者不等，则会调用this.notify方法，第一次调用时该方法一定会触发；

notify方法会去调用this.hasListener判断该类型的事件是否注册过，若注册过，则调用this.dispatchEvent去派发事件；然后会判断propertychange类型的事件是否被注册过，若注册过，则调用this.dispatchEvent派发事件。

BaseObject类的其它方法

• get方法

get方法就是通过key值获取this.values_[key]的值

• getKeys方法

getKeys方法获取this.values_的key值集合,可能是一个空数组[]

• getProperties方法

getProperties方法就是获取this.values方法，可能是一个空对象{}

• getPropertiesInternal方法

内部方法，作用同上

• hasProperties方法

hasProperties方法用于判断this.values_值是否存在

• addChangeListener和removeChangeListener方法

addChangeListener和removeChangeListener方法就是包装了下type，加了前缀change:,然后调用对应的addEventListener和removeEventListener方法

• applyProperties方法

applyProperties方法就是用来设置this.values_,但是避免了触发事件

• unset方法

unset方法用于清除this.values某个键值对,若silent参数为false,则调用notify方法用于通知相关监听事件

总结

本文介绍了BaseObject类的主线流程以及相关方法。但是在实际应用中一般是先调用addChangeListener注册事件，然后调用setProperties方法设置属性（值），然后触发已经注册过的回调函数。