js组件的css加载方案

组件开发时，通常会有配有一个css文件资源。
但是在实用时，为了减少请求数，这个css有可能被合并在页面的css中。
那么，写组件时是否需加要载这个css呢？

应对策略：
组件的css前加一个.js_xcomponent_css_loaded的规则，来标识该组件对应的css是否已加载。
而在组件的js里，作一个判断，如果css未预加载（包括独立预加载、或被包含在其它的css文件中一起预加载），则进行加载。
典型代码如下： 
<html>
<head>
<link hrefffff="dddd/panel.css" rel="stylesheet" type="text/css"><!-- 这里没引用 -->
<style>
.js_panel_css_loaded {width:30px;display:none;}/*用".js_panel_css_loaded"来表示这里已经有了panel对应的css了*/
.js_panel {/*更多css*/}
</style>
</head>
<body>
</body>
<SCRIPT LANGUAGE="JavaScript" remark="panel组件里与css相关代码的示意">
(function() {
        /** 
         * 获得element对象当前的样式
         * @method    getCurrentStyle
         * @param    {element|string|wrap}    el        id,Element实例或wrap
         * @param    {string}                attribute    样式名
         * @return    {string}                
         */
        var getCurrentStyle = function(el, attribute) {
            if(el.currentStyle) {
                return el.currentStyle[attribute];
            } else {
                var style = el.ownerDocument.defaultView.getComputedStyle(el, null);
                return style ? style.getPropertyValue(attribute) : null;
            }
        };

        var el=document.createElement('div');
        document.body.appendChild(el);
        el.className='js_panel_css_loaded';
        if(getCurrentStyle(el, 'width') == '30px') alert('panel_css已经加载过了，不需再加载');
        else alert('需要加载panel_css');
        document.body.removeChild(el);
}());
</SCRIPT>  
</html>

posted on 2011-03-24 15:59  JKisJK  阅读(1210)  评论(0)  编辑  收藏  举报

导航