js組件的css載入方案

來源:互聯網
上載者:User
組件開發時,通常會有配有一個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>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.