mask的一些建议

[lianqin7]

1. 如果要show一个和默认style不同的mask，代码如下：

   mask.set({ backgroundColor:'red', opacity:0.5 }).show();

   是否能合并起来，这样使用，更加直观

   mask.show({ backgroundColor:'red', opacity:0.5 });

2. 从设计上来说，mask是一个全局的单例，但是现在的代码，如果在某处修改过style之后，后面再show出来的mask的样式都会跟着改变，mask的show不是互相隔离的，而是互相影响的

代码已经Pull Requests，请 @popomore 同学指正

https://github.com/aralejs/overlay/pull/3

[lifesinger]

这两个修改不建议

第一个，set 和 show 还是分开好，合在一起，看起来简单，但破坏了这两个方法的单一性，并且会使得与其他组件的设计 不一致，比如 overlay 也有 show，那 overlay 的 show 是否也接收 config 参数？会带来混乱。

第二个，目前 mask 是页面级唯一的，是单例，不会有存在多个实例的情况，因此第二个问题不存在哦。

玉伯

2012/10/16 lianqin7 notifications@github.com

1.

如果要show一个和默认style不同的mask，代码如下：

mask.set({ backgroundColor:'red', opacity:0.5 }).show();

是否能合并起来，这样使用，更加直观

mask.show({ backgroundColor:'red', opacity:0.5 });

2.

从设计上来说，mask是一个全局的单例，但是现在的代码，如果在某处修改过style之后，后面再show出来的mask的样式都会跟着改变， mask的show不是互相隔离的，而是互相影响的

代码已经Pull Requests，请 @popomore https://github.com/popomore 同学指正

aralejs/overlay#3 https://github.com/aralejs/overlay/issues/3

— Reply to this email directly or view it on GitHubhttps://github.com/aralejs/overlay/issues/4.

王保平 / 玉伯（射雕） 送人玫瑰手有余香

[lianqin7]

@lifesinger

关于第二个问题，我还是用代码描述一下吧

// 某个组件A用到了mask做模态
show: function(){
    // 显示mask
    mask.show();

    // dosomething
}

// 某个组件B也用到了mask做模态，但是这是个很变态的模态
show: function(){
    // 显示mask，但是样式很BT，红色的90%透明
    mask..set({ backgroundColor:'red', opacity:0.9 });
    mask.show();

    // dosomething
}

// 某个页面上用到了A，B2个组件
var a = new A();
var b = new B();

// a实例显示，同时显示模态mask，样式默认
a.show();

// b实例显示，同时显示模态mask，但是是BT的样式
b.show();

// 然后某个时刻a实例又显示了，同时显示模态mask，样式从默认变成BT样式了！！
a.show();

// 最后这个页面上的mask都变成BT样式了
// ....

总结： mask作为一个页面级的单例，每次被调用都应该是独立的互不干扰的，目前的代码却可能造成互相的污染:( 虽然这种情况一般不会出现，但是却是一个隐藏的陷阱

[lifesinger]

@lianqin7

嗯，理论上让 mask 有状态会更好，不过我觉得目前没必要，原因有二：

1. 如果一个页面中，出现多种 mask 样式，首先需要反思的是交互和视觉设计，直接将需求踢回去就好
2. 组件其实不是越灵活越强大才好，适当的不支持、限制，有可能反而更好

个人觉得等这种 BT 的需求真出现了，而交互、视觉又能把我们说服时，我们再考虑不迟 不做过多的提前设计

玉伯

2012/10/16 lianqin7 notifications@github.com

@lifesinger https://github.com/lifesinger

关于第二个问题，我还是用代码描述一下吧

// 某个组件A用到了mask做模态 show: function(){ // 显示mask mask.show();

// dosomething

}

// 某个组件B也用到了mask做模态，但是这是个很变态的模态 show: function(){ // 显示mask，但是样式很BT，红色的90%透明 mask..set({ backgroundColor:'red', opacity:0.9 }); mask.show();

// dosomething

}

// 某个页面上用到了A，B2个组件 var a = new A(); var b = new B();

// a实例显示，同时显示模态mask，样式默认 a.show();

// b实例显示，同时显示模态mask，但是是BT的样式 b.show();

// 然后某个时刻a实例又显示了，同时显示模态mask，样式从默认变成BT样式了！！ a.show();

// 最后这个页面上的mask都变成BT样式了 // ....

总结： mask作为一个页面级的单例，每次被调用都应该是独立的互不干扰的，目前的代码却可能造成互相的污染:( 虽然这种情况一般不会出现，但是却是一个隐藏的陷阱

— Reply to this email directly or view it on GitHubhttps://github.com/aralejs/overlay/issues/4#issuecomment-9481502.

王保平 / 玉伯（射雕） 送人玫瑰手有余香