YUI 阻止动态css加载
skinnable动态加载
在YUI Module中,经常采用skinnable参数来动态加载css,如:
YUI().use('w-paginator', function(Y) { }, required: [], skinnable: true);
YUI Config中配置的参数如
skin: { defaultSkin: 'sam', base: 'assets/skins/' }
非override情况下,默认的css模块的加载路径和模块名称为:
SKIN_PREFIX = 'skin-'; name: SKIN_PREFIX + {skin.defaultSkin} + '-' + {modname} path: {modname}/{skin.base}/{skin.defaultSkin}/{modname}.css
判断是否加载成功
- 判断YUI.Env._cssLoaded[name]中是否已经存在
- 判断cssStampEl元素在当前文档中的display属性是否为none
- 在加载css的过程中,会将模块名作为className放到cssStampEl上, 判断display属性后在移除className
isCSSLoaded: function(name, skip) { //TODO - Make this call a batching call with name being an array if (!name || !YUI.Env.cssStampEl || (!skip && this.ignoreRegistered)) { return false; } var el = YUI.Env.cssStampEl, ret = false, mod = YUI.Env._cssLoaded[name], style = el.currentStyle; //IE if (mod !== undefined) { return mod; } //Add the classname to the element el.className = name; if (!style) { style = Y.config.doc.defaultView.getComputedStyle(el, null); } if (style && style.display === 'none') { ret = true; } el.className = ''; //Reset the classname to '' YUI.Env._cssLoaded[name] = ret; return ret; },
阻止CSS自动加载
由于在动态加载css过程中,会将模块的名称作为className加到cssStampEl上,可以直接使用id和模块名的组合方式,设置cssStampEl元素的display即可做到阻止动态加载模块的css
#yui3-css-stamp.skin-sam-w-table-editable { display:none }
应用场景
当应用层不需要组件层提供默认样式的时候,就可以通过这种方式来阻止Loader动态加载默认的css。