layui 事件管理

// config 其实就是每个 layui 实例的 cache 属性

// 自定义模块事件
Layui.prototype.onevent = function (modName, events, callback) {
  if (typeof modName !== "string" || typeof callback !== "function")
    return this;

  // 解释:相当于注册事件回调的功能和执行事件回调的功能都在 event 方法中
  // 注意事项:注册事件
  return Layui.event(modName, events, null, callback);
};

// 执行自定义模块事件
Layui.prototype.event = Layui.event = function (modName, events, params, fn) {
  var that = this;
  var result = null;
  var filter = (events || "").match(/\((.*)\)$/) || []; // 提取事件过滤器字符结构,如:select(xxx)
  var eventName = (modName + "." + events).replace(filter[0], ""); // 获取事件名称,如:form.select
  var filterName = filter[1] || ""; // 获取过滤器名称,,如:xxx

  // 调用事件回调
  var callback = function (_, item) {
    var res = item && item.call(that, params);

    // 赋值事件执行结果
    res === false && result === null && (result = false);
  };

  // 如果参数传入特定字符,则执行移除事件
  if (params === EV_REMOVE) {
    delete (that.cache.event[eventName] || {})[filterName];
    return that;
  }

  // 重点1:这里是将事件添加 layui.cache.event 对象中
  // 添加事件
  if (fn) {
    config.event[eventName] = config.event[eventName] || {};

    if (filterName) {
      // 带filter不支持重复事件
      config.event[eventName][filterName] = [fn];
    } else {
      // 不带filter处理的是所有的同类事件,应该支持重复事件
      config.event[eventName][filterName] =
        config.event[eventName][filterName] || [];
      config.event[eventName][filterName].push(fn);
    }
    
    // 直接结束执行
    return this;
  }

  // 重点2:这里是执行事件回调,就是调用事件
  // 执行事件回调
  layui.each(config.event[eventName], function (key, item) {
    // 执行当前模块的全部事件
    if (filterName === "{*}") {
      layui.each(item, callback);
      return;
    }

    // 执行指定事件
    key === "" && layui.each(item, callback);
    filterName && key === filterName && layui.each(item, callback);
  });

  // 返回事件执行结果
  return result;
};

posted @ 2024-05-10 22:52  灵火  阅读(38)  评论(0编辑  收藏  举报