皮皮网

1.ligerUI中ligerDialog和ligerWindow的区别

ligerUI中ligerDialog和ligerWindow的区别

       ä»ŽAPI来看，它们之间视乎没有根本性的区别，下面看对比图，

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

/

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

       ä¸ºä»€ä¹ˆä»–们的API这么接近，为啥不是一个东西呢？下面我找到了它的源码：

/ligerui/LigerUI/tree/Release/Source/lib/ligerUI/js/plugins

       åœ¨ ligerWindow.js 中，我发现第行，如下

l.controls.Window.ligerExtend(l.core.Win,源码猫眼 源码 {

       åŒæ ·æˆ‘在 ligerDialog.js 中，行，有同样的一句话，如下

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

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

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

       æˆ‘拿出源码里面 5个 最基本的函数，来说明 Dialog 是单例类的事实：

$.ligerDialog.open = function (p)

       {

           // å®žä¾‹åŒ–一个 l.controls.Dialog å¯¹è±¡

           // å†…部可以追述到第行，使用 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 è¡Œ

           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: ,

               modal: false,

               height: 

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