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。