simple-calendar.js: 动态更新日历内容

simple-calendar.js 加入动态更新内容

为了实现动态更新，我们需要在代码中添加以下几个步骤：

在 SimpleCalendar 构造函数中添加一个 options 参数，用于传递需要动态更新的选项。
在 SimpleCalendar 构造函数中添加一个 update 方法，用于更新日历。
在 SimpleCalendar 构造函数中添加一个 watch 方法，用于监听需要动态更新的选项的变化。
在 update 方法中根据需要动态更新的选项，更新日历的显示。

下面是具体的实现代码：

function SimpleCalendar(selector, options) {
  // ...
  this.options = Object.assign({}, defaultOptions, options);

  // 添加 update 方法
  this.update = function(newOptions) {
    this.options = Object.assign({}, this.options, newOptions);
    this.render();
  };

  // 添加 watch 方法
  this.watch = function() {
    var that = this;
    Object.keys(this.options).forEach(function(key) {
      var value = that.options[key];
      Object.defineProperty(that.options, key, {
        get: function() {
          return value;
        },
        set: function(newValue) {
          value = newValue;
          that.update();
        }
      });
    });
  };

  // 监听需要动态更新的选项的变化
  this.watch();

  // 渲染日历
  this.render();
}

在上面的代码中，我们使用 Object.defineProperty 方法监听需要动态更新的选项的变化，当选项发生变化时，调用 update 方法重新渲染日历。

接下来，我们需要在 render 方法中根据需要动态更新的选项，更新日历的显示。下面是一个简单的例子，我们在 update 方法中更新了日历的标题：

this.update = function(newOptions) {
  this.options = Object.assign({}, this.options, newOptions);
  this.render();
};

this.render = function() {
  var title = this.options.title || 'Simple Calendar';
  this.$element.innerHTML = '<h2>' + title + '</h2>';
  // ...
};

现在，我们就可以在使用 SimpleCalendar 的时候动态更新日历了。例如，我们可以使用以下代码创建一个日历，并在 5 秒钟后动态更新日历的标题：

var calendar = new SimpleCalendar('#calendar', {
  title: 'My Calendar'
});

setTimeout(function() {
  calendar.update({
    title: 'Updated Calendar'
  });
}, 5000);