JQuery शैली की कार्यक्षमता का विस्तार

JQuery के साथ काम करते समय, टैग करने के लिए बड़ी संख्या में CSS नियम गुणों को लागू करने की थोड़ी असुविधा। ज्यादातर मामलों में इस समस्या का समाधान $.(“”).css(“”, “”); दोहराव में आता है $.(“”).css(“”, “”); , जो अच्छा नहीं है, लेकिन कोड की कुछ पंक्तियों ने स्थिति को ठीक किया।
कैसे? नीचे पढ़ें।

43 लाइनें - सभी विस्तार

अंतर्निहित विचार इस प्रकार है:
नियमित अभिव्यक्तियों का उपयोग करते हुए, हम CSS फ़ाइल को नियमों ( getStyles ), नियमों को एक मान संपत्ति ( setStyle ) में पार्स करते हैं और इसे लोड किए गए दस्तावेज़ पर लागू करते हैं।
और, वास्तव में, कार्यान्वयन।

$.fn.extend({
setStyle : function (selector, rulesString) {
var rules = (rulesString + ';' ).match( /([^:]+)\:([^\;]*)\;/gi );
for ( var id in rules) {
rules[id].replace( /[\s]*([^\s]+)[\s]*\:([^\;]*)\;/gi ,
function (rule, propery, value) {
$(selector).css(propery, value)
})
}
},
getStyles : function (styleRef){
var styles = styleRef.replace( /\/\*(.|\s)*?\*\//gi , "" , "$1" ).match( /[^\}]*\{([^\}]*)\}/gi );
for ( var id in styles) {
styles[id].replace( /\s+/gi , " " , "$1" ).replace( /([^\{]*)\{([^\}]+)\}/gi ,
function (style, selector, rules){
$.fn.setStyle(selector, rules)
});
}
},
_css : function (styleRef) {
if ( /.*\.css/gi .test(styleRef)) {
$.ajax({
type : "GET" ,
url : styleRef,
success : function (retValue) {
$.fn.getStyles(retValue)
},
error : false
})
} else if ( /[^\}]*\{([^\}]*)\}/gi .test(styleRef)) {
$.fn.getStyles(styleRef)
} else {
$.fn.setStyle( this .selector, styleRef)
}
return true
}
})

$.extend({
_css : function (styleRef) {
return $.fn._css(styleRef)
}
})

Dzz.org के साथ रंगीन
एक संपीड़ित फ़ाइल का वजन 700 बाइट होता है।

यह क्या कर सकता है?

या शायद यह निम्नलिखित है:

• फ़ाइल से शैलियों को लोड करें, उदाहरण के लिए, $._css("../css/style.css") ;
• सीएसएस नियमों द्वारा निर्दिष्ट शैलियों को इस तरह टैग करने के लिए लागू करें। $._css("div {color2: red; font-size: 16px;}"); , या तो $("p")._css("font-weight: bold; color: green;");
• और आखिरी, बहुत स्पष्ट संभावना नहीं: CSS फाइलों में jQuery के चयनकर्ताओं का उपयोग करें

परीक्षण और परिणाम

परीक्षण एक सेट पर किया गया था:

• Denwer
• Google Chrome 9.0.597 ...
• सीएमएस पीएचपी-फ्यूजन v7.01.05
• यही विस्तार है

परीक्षण का सार निम्नानुसार है: चयनित सीएमएस के विषय में, एक फ़ाइल शैलियों के लिए जिम्मेदार है - style.css , हम इसे स्क्रिप्ट के साथ और बिना style.css करते हैं, क्रोम डेवलपर टूल का उपयोग करके समय को मापते हैं। स्क्रिप्ट के var currentDate = new Date(); console.log(" " + currentDate.getTime() + "ms"); जैसे कंसोल पर संदेश भेजकर मापा जाता है var currentDate = new Date(); console.log(" " + currentDate.getTime() + "ms"); var currentDate = new Date(); console.log(" " + currentDate.getTime() + "ms");

कई मापों के परिणामों के आधार पर, हम डाउनलोड गति का अनुमान लगाते हैं।
नीचे दी गई तस्वीर में, बाईं ओर स्क्रिप्ट पर डेटा है, दाईं ओर सीएसएस डाउनलोड का समय इसके बिना है। क्रम में कॉलम:

1. नेटवर्क पेज डाउनलोड गति
2. कंसोल संदेशों द्वारा मापी गई गति (किसी कारण से, उच्चतर, हालांकि GET अनुरोध के पहले और बाद में माप की गई थी)
3. किसी दस्तावेज़ में शैली नियम लागू करने की गति
4. योग

समय का अंतर 12% निकला, जो लगभग = 10ms है, इसलिए हम कह सकते हैं कि विस्तार का काम ध्यान देने योग्य नहीं है, कम से कम क्रोम में।