• 微信

ligerui return$

时间:09:06:43作者:admin分类:时刻浏览:3评论:0

  从API来看,它们之间视乎没有根本性的区别,下面看对比图,

  我这里只列出了API文档中参数的对比图,两个类其他的API也与图中情况差不多,Dialog的API比较多,但几乎都涵盖了Window中的API,可以自行访问下面的网址查看:

  

  Window的API里面比Dialog多出了一样东西,那就是事件回调函数。

  为什么他们的API这么接近,为啥不是一个东西呢?下面我找到了它的源码:

  

  在 ligerWindow.js 中,我发现第46行,如下

  l.controls.Window.ligerExtend(l.core.Win, {

  同样我在 ligerDialog.js 中,104行,有同样的一句话,如下

  l.controls.Dialog.ligerExtend(l.core.Win, {

  这表示Dialog与Window是继承自同一个父类 l.core.Win,随后我查看了 js/core/base.js,在这个文件的770行我看到了 liger.core.Win 的真实面目。liger.core.Win 并没有做很多的事情,只实现遮罩功能和定义一些抽象接口。

  最后我又重新回去阅读了 ligerDialog.js 的代码,从第 875 行开始一直到结束,这才是 Dialog 与 Window 最大的区别所在,Dialog 是单例对象,不建议在使用的时候继承与扩展,而 Window 是一个多例类,允许直接继承并扩展。

  我拿出源码里面 5个 最基本的函数,来说明 Dialog 是单例类的事实:

  $.ligerDialog.open = function (p)

  {

  // 实例化一个 l.controls.Dialog 对象

  // 内部可以追述到第33行,使用 liger.run() 函数构造 Dialog 实例

  return $.ligerDialog(p);

  };

  $.ligerDialog.close = function ()

  {

  // 根据 Dialog类型 查到到所有的 dialog 实例对象

  var dialogs = l.find(l.controls.Dialog.prototype.__getType());

  // 循环每一个 dialog实例并销毁

  for (var i in dialogs)

  {

  var d = dialogs[i];

  d.destroy.ligerDefer(d, 5);

  }

  // 隐藏遮罩层

  // 在ligerUI中,所有的窗口使用的是一个全局的mask

  // 相关代码可以看 js/core/base.js 598行

  l.win.unmask();

  };

  $.ligerDialog.show = function (p)

  {

  var dialogs = l.find(l.controls.Dialog.prototype.__getType());

  if (dialogs.length)

  {

  for (var i in dialogs)

  {

  // 如果已经存在 dialog实例,那么就直接使用实例对象

  // 显示已存在的dialog,并返回

  dialogs[i].show();

  return;

  }

  }

  // 如果不存在 dialog实例,则初始化一个实例并返回

  return $.ligerDialog(p);

  };

  $.ligerDialog.hide = function ()

  {

  var dialogs = l.find(l.controls.Dialog.prototype.__getType());

  // 隐藏dialog实例也是相同的方式

  for (var i in dialogs)

  {

  var d = dialogs[i];

  d.hide();

  }

  };

  $.ligerDialog.tip = function (options)

  {

  // 初始化选项参数

  options = $.extend({

  showType: 'slide',

  width: 240,

  modal: false,

  height: 100

  }, options || {});

  $.extend(options, {

  fixedType: 'se',

  type: 'none',

  isDrag: false,

  isResize: false,

  showMax: false,

  showToggle: false,

  showMin: false

  });

  // 构造一个Dialog实例

  return $.ligerDialog.open(options);

  };

  根据上面的代码解读,结论就很清晰了:

  Dialog是一个单例对象,不建议继承与扩展

  Window是多例类,允许继承并扩展

  我觉得ligerUI对Window的设计没有 Ext 设计得好,Dialog应作为Window的一个单例对象才相对合理,Ext就是这么做的。有兴趣的话,可以了解下Ext,Ext是目前我认为前端UI组件化设计得最好的一个框架。