Question

ligerUI中ligerDialog和ligerWindow的区别

Answer 1

ligerUI中ligerDialog和ligerWindow的区别：

Dialog 与 Window 最大的区别所在，Dialog 是单例对象，不建议在使用的时候继承与扩展，而 Window 是一个多例类，允许直接继承并扩展。Dialog与Window是继承自同一个父类 l.core.Win。
下面举例证明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是多例类，允许继承并扩展

Answer 2

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

1

http://api.ligerui.com/

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

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

1

http://git.oschina.net/ligerui/LigerUI/tree/Release/Source/lib/ligerUI/js/plugins

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

1

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

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

1

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 是单例类的事实：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

$.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组件化设计得最好的一个框架。