Comments (3)
这两个修改不建议
第一个,set 和 show 还是分开好,合在一起,看起来简单,但破坏了这两个方法的单一性,并且会使得与其他组件的设计
不一致,比如 overlay 也有 show,那 overlay 的 show 是否也接收 config 参数?会带来混乱。
第二个,目前 mask 是页面级唯一的,是单例,不会有存在多个实例的情况,因此第二个问题不存在哦。
玉伯
2012/10/16 lianqin7 [email protected]
如果要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 同学指正
—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4.
王保平 / 玉伯(射雕)
送人玫瑰手有余香
from overlay.
关于第二个问题,我还是用代码描述一下吧
// 某个组件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作为一个页面级的单例,每次被调用都应该是独立的互不干扰的,目前的代码却可能造成互相的污染:(
虽然这种情况一般不会出现,但是却是一个隐藏的陷阱
from overlay.
嗯,理论上让 mask 有状态会更好,不过我觉得目前没必要,原因有二:
- 如果一个页面中,出现多种 mask 样式,首先需要反思的是交互和视觉设计,直接将需求踢回去就好
- 组件其实不是越灵活越强大才好,适当的不支持、限制,有可能反而更好
个人觉得等这种 BT 的需求真出现了,而交互、视觉又能把我们说服时,我们再考虑不迟
不做过多的提前设计
玉伯
2012/10/16 lianqin7 [email protected]
@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//issues/4#issuecomment-9481502.
王保平 / 玉伯(射雕)
送人玫瑰手有余香
from overlay.
Related Issues (20)
- 属性trigger设置为多个选择器时的问题 HOT 6
- 建议把mask模块从overlay里分离出来 HOT 4
- mask模块建议提供工厂方法,能自由构建实例 HOT 4
- 单独使用mask时在ie6下不会创建iframe HOT 2
- _blurHide 特性和显示浮层的冲突
- 修复 https://github.com/aralejs/tip/issues/12 的后遗症 HOT 4
- 弹层弹出来后怎么回调呀 HOT 2
- spm3 安裝overlay後的問題 HOT 10
- 窗口变化后重新定位 HOT 1
- 建议修改监听window的resize事件的重定位的处理逻辑 HOT 3
- "点击空白处,隐藏"有bug,如果点击页面中的iframe就会没触发 HOT 2
- 能动态改变内容吗 复用 HOT 7
- 使用focus触发时遇到的问题 HOT 3
- spm doc后在127.0.0.1查看examples页面报错 $ is not defined
- 演示网站似乎挂掉了
- mask set bug
- destory 没有处理两个静态实例集合 HOT 1
- selfXY参数具体数值的含义是什么? HOT 1
- [ver. 1.1.0] _onRenderWidth 和 _onRenderHeight 令容器默认尺寸失效 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from overlay.