👨🏾‍🤝‍👨🏽 🤲🏿 👼🏿 कोहना 3: मॉड्यूल "कोहना-स्टैटिक-फाइल्स" 🍞 👨🏻‍🌾 🔈

जब मैं ढांचे से परिचित हो जाता हूं, तो पहली चीज जो मैं देख रहा हूं, वह इसकी क्षमताओं की नहीं है, बल्कि इसके द्वारा तैयार किए गए समाधान हैं। विशेष रूप से, जेएस / सीएसएस फाइलों को भागों में आसानी से इकट्ठा करने की क्षमता और क्लाइंट ऑप्टिमाइज़ेशन (YSlow / Google पेजस्पीड) के लिए सिफारिशों के अनुसार "दे"। मुझे Django (जो वास्तव में, प्रेरित था), यहां तक कि मैंने जो भी कार्यान्वयन देखा, उनमें से कोई भी नहीं देखा, इसलिए मैंने कोहाना v.3 के लिए एक तैयार-से-उपयोग मॉड्यूल के रूप में अपना निर्णय लेने का फैसला किया।

इसलिए, हम बुनियादी जरूरतों / विशलिस्ट का वर्णन करते हैं, जिन्हें मॉड्यूल के विकास से पहले रखा गया था:

1) इनलाइन सीएसएस / जेएस पीस का निर्माण करें

2) पृष्ठ कोड में सम्मिलित करके या डिस्क पर एक अद्वितीय नाम के साथ एक फ़ाइल को लिखकर और लिखकर बिंदु 1 देने की क्षमता।

3) एक निर्माण में बाहरी सीएसएस / जेएस फ़ाइलों को इकट्ठा करने की क्षमता

4) उस स्थिति को निर्दिष्ट करने की क्षमता जिसके तहत बिंदु 3 से एक या कोई अन्य निर्माण जुड़ा हुआ है, साथ ही साथ कोई अन्य बाहरी फ़ाइल (

  <! - [अगर IE 7]>

)।

5) स्टैटिक्स को किसी अन्य डोमेन पर ले जाने की क्षमता, मुख्य बात यह है कि यह एक ही भौतिक सर्वर पर हो।

6) सीडीएन का उपयोग करना

7) CSS / JS को कम करना।

8) सबसे महत्वपूर्ण: METHOD, जो आपको स्टेटिक्स में (और आमतौर पर न केवल CSS / JS को शामिल करता है, बल्कि उदाहरण के लिए चित्र भी शामिल है)। वर्तमान विधि के बाद से, जब मॉड्यूल कार्यक्षमता स्वयं ही स्थानांतरित हो जाती है और मॉड्यूल / से कनेक्ट हो जाती है, और स्थैतिक या तो एक मनमाने स्थान DOCUMENT_ROOT में कॉपी कर लिया जाता है, या एक शर्त DOCUMENT_ROOT में होना है।

9) URL को आसानी से स्टैटिक्स के साथ बदलने की क्षमता, ताकि वह रूटिंग के साथ संघर्ष न करे, उदाहरण के लिए, यदि आप url पर CSS सेक्शन करना चाहते हैं तो अच्छा नहीं है "" इससे पहले जब आपने इसे स्टाइलशीट के लिए एक वास्तविक मौजूदा डायरेक्टरी बनाया था।

यानी आपको भविष्य में किसी तरह के समझौते के साथ आने की जरूरत है।

जो कल्पना की गई थी, वह वास्तव में काम कर रहे मॉड्यूल में सन्निहित थी।

मॉड्यूल के संचालन को दिखाने के लिए, और न केवल इसे एक लिंक देने के लिए, मैं इससे पहले एक सरल कार्य करने की कोशिश करूंगा:

1) आधार के रूप में css-framework.ru लें

2) "कोहन-स्टेटिक-फाइल्स" मॉड्यूल के आधार पर उदाहरण css-framework.ru/demo/css-framework-layout.html को लागू करने का प्रयास करें।

चूंकि मैं उन लोगों की सबसे बड़ी संख्या में दिलचस्पी रखता हूं, जिन्होंने इसे आजमाया है, मैं खरोंच से मॉड्यूल को तैनात करने के तरीके को चित्रित करूंगा, उदाहरण के लिए अनुभवी kokhanovody मुझे माफ कर देगा।

ऐसा करने के लिए, कोहना का नवीनतम संस्करण v.3 डाउनलोड करें।

हम DOCUMENT_ROOT के ऊपर सिस्टम, एप्लिकेशन, मॉड्यूल निर्देशिकाओं को स्थानांतरित करते हैं और तदनुसार, index.php में पथ बदलते हैं:

<? php $application = '../application'; $modules = '../modules'; $system = '../system'; * This source code was highlighted with Source Code Highlighter .

अगला, हम github.com/aberdnikov/kohana-static-files से नवीनतम संस्करण उठाते हैं, सामग्री को मॉड्यूल में कॉपी करते हैं।

फ़ाइल एप्लिकेशन / bootstrapper.php में हम मॉड्यूल कनेक्ट करते हैं

<? php Kohana::modules ( array ( // 'auth' = > MODPATH.'auth', // Basic authentication // 'cache' = > MODPATH.'cache', // Caching with multiple backends // 'codebench' = > MODPATH.'codebench', // Benchmarking tool // 'database' = > MODPATH.'database', // Database access // 'image' = > MODPATH.'image', // Image manipulation // 'orm' = > MODPATH.'orm', // Object Relationship Mapping // 'oauth' = > MODPATH.'oauth', // OAuth authentication // 'pagination' = > MODPATH.'pagination', // Paging of results // 'unittest' = > MODPATH.'unittest', // Unit testing // 'userguide' = > MODPATH.'userguide', // User guide and API documentation ' kohana-static-files' = > MODPATH.' kohana-static-files ', // Static Files (JS/CSS/pictures) )); ? > * This source code was highlighted with Source Code Highlighter .

मॉड्यूल "कोहना-स्टेटिक-फाइल्स" की इनिशियलाइज़ेशन फ़ाइल में हम मॉड्यूल के राउटिंग को लिखते हैं, जो कि लॉजिक कोहन के अनुसार "/ !/static/style.css" पर पहली कॉल पर मिलेगा: find_file ()

- पहले आवेदन / स्टेटिक-फाइल्स / स्टाइल.एससी में

- उसके बाद मॉड्यूल / {मॉड्यूल_नाम} / स्टेटिक- फाइल्स/style.css (जहां {मॉड्यूल_नाम} बूटस्ट्रैपर.फैप में कनेक्शन क्रम में जुड़े मॉड्यूल का पुनरावृत्ति है)

- और उसके बाद ही सिस्टम / स्टैटिक-फाइल्स / style.css में।

तदनुसार, आपने देखा कि मूल निर्देशिकाओं के आगे: कक्षाएं, दृश्य, कॉन्फ़िगरेशन, आदि ... एक नई तरह की "स्टैटिक-फाइल्स" निर्देशिकाएं दिखाई दीं, यहीं पर हम स्टैटिक्स जोड़ेंगे। हम विषय की शुरुआत में पैरा 9 विशलिस्ट के बारे में याद करते हैं। आखिरकार, हमें पता नहीं है कि वर्णित मॉड्यूल का उपयोग करके किसी विशेष साइट के किसी विशेष स्वामी के लिए कौन सी निर्देशिका है।

समझौता संख्या १

इसलिए, फ़ाइल "cssf-base.css" में हम URL के साथ लाइनों की तलाश करते हैं और संपादन करते हैं, निरपेक्ष और सापेक्ष URL को प्रतिस्थापित करते हैं, या यों कहें, ऑटो-प्रतिस्थापन के विकल्प के साथ उनकी शुरुआत "{staticfiles_url" और स्ट्रिंग के प्रकार से होती है

.corners-2 em.tl, .corners-2 em.tr, .corners-2 em.bl, .corners-2 em.br {चौड़ाई: 4px; ऊंचाई: 4 पीएक्स; पृष्ठभूमि-छवि: url (.. / i / कोनों / कोनों -png); }

हमें मिल जाएगा

.corners-2 em.tl, .corners-2 em.tr, .corners-2 em.bl, .corners-2 em.br {चौड़ाई: 4px; ऊंचाई: 4 पीएक्स; पृष्ठभूमि-छवि: url ({staticfiles_url} i / कोनों / कोनों-2. पीएनजी); }

बाद में

url ({staticfiles_url} i / कोनों / कोनों-2. पीएनजी);

जैसे कुछ बन जाएगा

url (http://static.site.ru//static/i/corners/corners-2.png);

समझौता संख्या २

स्थिर फ़ाइलों के नामों के टकराव से बचने के लिए, आपको उन्हें निम्न सिद्धांत के अनुसार रखना चाहिए:

1) मॉड्यूल के लिए, उन्हें क्रमशः एक नाम के साथ एक निर्देशिका में रखा जाना चाहिए जो क्रमशः मॉड्यूल के नाम से मेल खाता है, जिसके परिणामस्वरूप समाचार मॉड्यूल शैलियों फ़ाइल के लिए URL होगा: {staticfiles_url} news / style.css

तदनुसार, फ़ाइल सिस्टम में यह फ़ाइल यहां उदाहरण के लिए स्थित होगी:

MODDIR.'news / static-files / style.css '

2) वर्तमान साइट के डिजाइन के लिए, स्टेटिक्स को उपनिर्देशिकाओं के बिना रखा जाना चाहिए, उदाहरण के लिए, साइट के डिजाइन के लिए मुख्य स्टाइलशीट में यूआरएल होगा

{staticfiles_url} /style.css

और इसका रास्ता इस तरह हो सकता है:

APPDIR। ' स्टैटिक-फाइल्स / स्टाइल.एससी '

हम आगे बढ़ते हैं:

हम आधार नियंत्रक Conrtoller_Welcome को बदलते हैं, जो कि हम कोकेर के विचारों का उपयोग करने में सक्षम होने के लिए नियंत्रक_Template से विरासत में प्राप्त करते हैं।

एक डमी के बजाय

public function action_index() { $this- > request- > response = 'hello, world!'; } * This source code was highlighted with Source Code Highlighter .

हम वह सब कुछ जोड़ते हैं जो कार्य को हल करने के लिए आवश्यक है, स्पष्टीकरण के बिना कोड स्पष्ट है:

public function action_index() { StaticCss::instance()- > addCss(Kohana::config('staticfiles.url').'news/style.css'); StaticCss::instance()- > addCssStatic('news/style.css'); StaticCss::instance()- > addCssStatic('css/cssf-base.css'); StaticCss::instance()- > addCssStatic('css/cssf-ie6.css', 'lte IE 6'); StaticCss::instance()- > addCssStatic('css/cssf-ie7.css', 'IE 7'); StaticJs::instance()- > addJsStatic('js/common.js'); StaticCss::instance()- > addCssInline(' .lb-1 .corners { background: #818181; } .lb-2 .corners { background: #9a9a9a; } .lb-3 .corners { background: #b4b4b4; } .lb-4 .corners { background: #dadada; } '); StaticJs::instance()- > addJsInline('CornersInit();'); StaticJs::instance()- > addJsOnload('alert(123)'); } * This source code was highlighted with Source Code Highlighter .

यह केवल addJsStatic और addJs फॉर्म के तरीकों के बीच के अंतर को समझाने के लिए आवश्यक है

वे अनिवार्य रूप से समान हैं, बस अपने अंदर की पहली विधि में एक आवरण होता है, जो उपसर्ग को URL की शुरुआत से जोड़ता है। समाचार {staticfiles_url} समाचार / style.css के लिए स्टाइलशीट फ़ाइल के साथ उदाहरण में

आप यह कर सकते हैं:

StaticCss::instance()- > addCss(Kohana::config('staticfiles.url').'news/style.css'); * This source code was highlighted with Source Code Highlighter .

या तो एक सरल तरीके से

StaticCss::instance()- > addCssStatic('news/style.css'); * This source code was highlighted with Source Code Highlighter .

मैं स्क्रिप्ट के कुछ हिस्सों में असेंबली पर ध्यान आकर्षित करना चाहूंगा जिन्हें ऑनलोड घटना के दौरान निष्पादित किया जाएगा। चूंकि jQuery मॉड्यूल में मुख्य JS फ्रेमवर्क के रूप में स्वीकार किया जाता है, फिर जब बुलाया जाता है

StaticJs::instance()- > addJsOnload('alert(123)'); * This source code was highlighted with Source Code Highlighter .

प्रपत्र की एक संरचना उत्पन्न की जाएगी:

< script language ="JavaScript" type ="text/javascript" > jQuery( document ).ready( function (){ alert(123) } ); </ script > * This source code was highlighted with Source Code Highlighter .

यानी आपको एक रैपर ("jQuery (डॉक्यूमेंट)। पहले से ही") बनाने की जहमत नहीं उठानी पड़ेगी या डिफ़ॉल्ट रूप से jQuery को कनेक्ट करना होगा, पहली बार addJsOnload को कहा जाता है, jQuery को कनेक्ट किया जाएगा, इसके लिए एक विशेष आवश्यकता () (Kohana_StaticJs क्लास) विधि है। स्वाभाविक रूप से, यदि आप इंटरनेट का उपयोग किए बिना इंट्रानेट पर मॉड्यूल का उपयोग करेंगे, तो बस डिस्क से फाइल को शामिल करने के लिए स्टैटिकजेस में जरूरतJquery () विधि को ओवरराइड करें।

और अब हम अपना ध्यान भागों में मॉड्यूल कॉन्फिगर करने के लिए लगाते हैं

'js' = > array( // 'min' = > true, // (external, inline, onload) 'build' = > false, ), 'css' = > array( // 'min' = > true, // (external, inline) 'build' = > true, ), * This source code was highlighted with Source Code Highlighter .

इस स्थान पर आपके पास सामग्री प्रकार (JS / CSS), प्रकार (बाहरी, इनलाइन, ओनोलोड), स्थितियों द्वारा एक फाइल में स्मार्ट असेंबली की आवश्यकता को नियंत्रित करने की क्षमता है (

  <! - [अगर IE 7]>

)

न्यूनतमकरण (टिप्पणियों को हटाने, अतिरिक्त रिक्त स्थान और लाइन ब्रेक)।

समझौता संख्या 3

यदि कोई विकल्प ".min" है, तो कनेक्ट की गई फ़ाइल से पहले URL में - इसे पहले से ही संपीड़ित माना जाता है और भले ही संपीड़न विकल्प सक्षम हो, इस फ़ाइल को अनदेखा कर दिया जाएगा, और यदि बिल्ड बनाने का विकल्प सक्षम है। फिर इसे "जैसा है" बिल्ड में उचित रूप से जोड़ा जाएगा।

'path' = > realpath(DOCROOT), * This source code was highlighted with Source Code Highlighter .

यह स्थिर डोमेन के लिए DOCUMENT_ROOT निर्देशिका है, डिफ़ॉल्ट रूप से यह एक ही डोमेन है।

// 'url' = > '/!/static/', // 'cache' = > '/!/cache/', * This source code was highlighted with Source Code Highlighter .

यहाँ मैं एक विस्मयादिबोधक चिह्न की उपस्थिति पर टिप्पणी करना चाहूंगा: यह विशलिस्ट के अनुच्छेद 9 के बारे में सटीक है, संघर्षों और उनके खिलाफ लड़ाई के बारे में।

'host' = > 'http://'.$_SERVER['HTTP_HOST'], * This source code was highlighted with Source Code Highlighter .

यह वास्तव में वह डोमेन है जहां से स्टैटिक्स वितरित किए जाएंगे, मामलों का उपयोग करें:

1) "" - लिंक इस तरह दिखेंगे: "/pic.jpg"

2) " ya.ru " - लिंक की तरह दिखेगा: " ya.ru/pic.jpg "

* कोरल सीडीएन का उपयोग करना

* स्थैतिक के साथ वर्तमान डोमेन के नाम में प्रत्यय ".nyud.net" जोड़ें

* उदाहरण के लिए, डोमेन "google.com" के लिए होस्ट "google.com.nyud.net" सेट करें

* यहाँ अधिक जानकारी: habrahabr.ru/blogs/i_recommend/82739 3) " ya.ru.nyud.net " - लिंक इस तरह दिखेंगे : " ya.ru.nyud.net/pic.jpg "

पहले से ही उत्पन्न प्रतिक्रिया में स्वतः पूर्ण का उपयोग करने में सक्षम होने के लिए, हम नियंत्रक की विधि को थोड़ा संशोधित करेंगे:

public function after() { parent::after(); $this- > request- > response = str_replace('{statifiles_url}', STATICFILES_URL, $this- > request- > response); } * This source code was highlighted with Source Code Highlighter .

खैर, यह प्रस्तुति डिवाइस के बारे में बात करने के लिए बनी हुई है (देखें)

जैसा कि YSlow / GooglePageSpeed द्वारा अनुशंसित है, सिर अनुभाग में सीएसएस डालें

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head profile ="http://gmpg.org/xfn/11" > < title > css-framework / layout-box </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> < meta http-equiv ="imagetoolbar" content ="no" /> < link rel ="icon" href ="{statifiles_url}favicon.ico" type ="image/x-icon" /> < link rel ="shortcut icon" href ="{statifiles_url}favicon.ico" type ="image/x-icon" /> <? php echo StaticCss::instance () - > getCssAll(); ? > </ head > * This source code was highlighted with Source Code Highlighter .

और बंद करने से पहले हम जेएस आवेषण के लिए एक कॉल करते हैं

<? php echo StaticJs::instance () - > getJsAll(); ? > </ body > </ html > * This source code was highlighted with Source Code Highlighter .

मेरी राय में, मॉड्यूल कार्यों के साथ सामना किया:

- HTTP अनुरोधों की संख्या कम;

- सीडीएन वैकल्पिक रूप से जुड़ा हुआ है;

- पृष्ठ के शीर्ष पर सीएसएस डाला गया है;

- पृष्ठ के अंत में JS डाला गया है;

- केवल आवश्यक फाइलें जुड़ी हुई हैं (व्यक्तिगत रूप से या बिल्ड से) (एक छोटी सी खामी भी है - सभी कार्यों के लिए अलग-अलग बिल्ड बनाए जाएंगे);

- इनलाइन शैलियों और लिपियों को प्लग-इन फ़ाइलों में बनाया जा सकता है;

- डुप्लिकेट स्क्रिप्ट और स्टाइल कनेक्शन को बाहर रखा गया है।

अब हमें केवल दिए गए स्टैटिक्स के लिए सही हेडर की व्यवस्था करने के लिए nginx को कॉल करने की आवश्यकता है (gzip, ETags, Expense)।

मैं आपको एक बार फिर याद दिलाता हूं कि आप यहां मॉड्यूल को उठा / कांटा कर सकते हैं:

github.com/aberdnikov/kohana-static-files

बस मामले में, मैं आपको दिखाऊंगा कि मॉड्यूल के संचालन के परिणामस्वरूप क्या हुआ (मैंने मैन्युअल रूप से HTML को क्षैतिज रूप से दिखाने के लिए केवल लाइन ब्रेक में प्रवेश किया)

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head profile ="http://gmpg.org/xfn/11" > < title > css-framework / layout-box </ title > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> < meta http-equiv ="imagetoolbar" content ="no" /> < link rel ="icon" href ="http://static.site.ru/!/static/favicon.ico" type ="image/x-icon" /> < link rel ="shortcut icon" href ="http://static.site.ru/!/static/favicon.ico" type ="image/x-icon" /> < link rel ="stylesheet" href ="http://static.site.ru/!/cache/css/3/7/3741c0ac0c2f8409beea116d6f4d6922.css" media ="all" type ="text/css" />   < link rel ="stylesheet" href ="http://static.site.ru/!/cache/css/inline/e/c/ec905aaa7ee63d90a646593b7e665936.css" media ="all" type ="text/css" /> </ head > < body > ... [skip html code] ... < script language ="JavaScript" type ="text/javascript" src ="http://static.site.ru/!/cache/js/8/e/8e022d3b6bcba59dcba5c586d408f7b2.js" ></ script > <script language= "JavaScript" type= "text/javascript" src= "http://static.site.ru/!/cache/js/inline/b/2/b2044b150de0ef43233d3491d060a5f6.js" ></script> <script language= "JavaScript" type= "text/javascript" src= "http://static.site.ru/!/cache/js/onload/1/5/15fb097828dd52d44bf36e77a96144b6.js" > </ script > </ body > </ html > * This source code was highlighted with Source Code Highlighter .

पुनश्च: स्टैटिस्टिक बांटने के लिए यूजरगाइड मॉड्यूल से विचार का मुख्य अंतर यह है कि यहां पहले के अनुरोध पर जटिल बिल्ड उत्पन्न होते हैं, क्योंकि उन्हें पेज कोड से एक अलग अनुरोध के रूप में कहा जाता है, और सरल स्टैटिक्स को HTTP पर पहली बार कॉल करने वाली निर्देशिका में कॉपी किया जाता है। अनुरोध, और फिर यह पहले से ही वेब सर्वर द्वारा दिया गया है, लेकिन PHP के माध्यम से नहीं।

यानी पहले अनुरोध पर तैनात किया जाता है।

कमियों में से, मुझे केवल उस फ़ाइल में परिवर्तन का स्वतः पता लगाने की असंभवता दिखाई देती है जिसमें से बिल्ड बनाया गया था, क्योंकि बिल्ड का नाम कनेक्टेड फ़ाइलों के नामों से प्राप्त होता है (अन्यथा यह मॉड्यूल की गति को बहुत प्रभावित करेगा), यह केवल इनलाइन शैलियों / स्क्रिप्ट के मामले में है कि बिल्ड का नाम सामग्री के आधार पर प्राप्त होता है।

इसलिए, अपडेट करते समय, बस बिल्ड और कैश के साथ /! / डायरेक्टरी को मारें।

योजनाओं में स्टैटिक्स की स्वचालित तैनाती के लिए तरीके जोड़ना (जिसमें असेंबली की आवश्यकता नहीं है) + भारी भार से पहले कैश को गर्म करने की सलाह, उदाहरण के लिए साइट के चारों ओर ड्राइविंग करना, जो कि अधिकांश आवश्यक कैश बनाएंगे।

कोहना 3: मॉड्यूल "कोहना-स्टैटिक-फाइल्स"

More articles: