👸🏾 👩🏿‍🤝‍👩🏽 👩🏿‍🤝‍👨🏻 PHPLego: विनीत AJAX 🧖🏽 🧘🏽 🙅🏻

नमस्कार प्रिय हेब्रतचिटेल!

क्या आपने कभी सोचा है कि आपकी साइट जावास्क्रिप्ट सक्षम और जावास्क्रिप्ट के बिना समान रूप से अच्छी तरह से काम करेगी? ताकि, यदि जावास्क्रिप्ट सक्षम हो, साइट ब्लॉक AJAX- सोम के साथ अतिभारित हो, लेकिन अगर जावास्क्रिप्ट नहीं है, तो क्या सिर्फ एक नए पृष्ठ के लिए एक संक्रमण था?

हम्म ... मुझे लगता है कि यह एक दिलचस्प काम है, और यह एक सरल समाधान है जो मैं साथ आने में कामयाब रहा। इस लेख में, मैं विशेष रूप से निर्बाध विवरण में जाने के बिना, सामान्य रूप से इस निर्णय के सार को रेखांकित करने का प्रयास करूंगा।

अपने लिए, मैंने निम्न मानदंडों के अनुसार कार्य तैयार किया:

ब्लॉक के अंदर और बाहर साइट के अनुभागों के माध्यम से नेविगेशन को नियमित लिंक द्वारा किया जाना चाहिए, बिना किसी भी onclick = "..." के।
जब जावास्क्रिप्ट सक्षम होता है, तो साइट केवल पृष्ठ के उनके क्षेत्र (उनकी div) को ओवरलोड करती है। जब जावास्क्रिप्ट बंद हो जाता है, तो सामान्य क्लिक-थ्रू होना चाहिए।
लिंक $ ("a") पर क्लिक करने के लिए केवल एक वैश्विक हैंडलर होना चाहिए। क्लिक (...), जो आवश्यक पृष्ठ तत्वों को पुनः लोड करने का सारा काम करता है। यदि जावास्क्रिप्ट अक्षम है, तो यह हैंडलर बस काम नहीं करता है, और साइट हमेशा की तरह काम करना जारी रखती है।
जब जावास्क्रिप्ट सक्षम किया जाता है तब पोस्टिंग फॉर्म केवल उस क्षेत्र को अपडेट करता है जिसमें यह फॉर्म स्थित है। अक्षम होने पर, सब कुछ हमेशा की तरह काम करता है।
पेज के कुछ क्षेत्रों के लिए AJAX प्रीलोडिंग को अक्षम करना संभव है, उदाहरण के लिए, उन्हें कुछ प्रकार के "नॉजैक्स" वर्ग में सेट करके। यह तब है, जब लिंक का अनुसरण करने के बाद, पृष्ठ पर बहुत अधिक डेटा बदल जाता है, और वे सभी विभिन्न ब्लॉकों में होते हैं। फिर प्रत्येक ब्लॉक को व्यक्तिगत रूप से अपडेट करने की तुलना में पूरे पृष्ठ को पुनः लोड करना अधिक उचित है। यह और तेज होगा।
लिंक ब्लॉक को निर्दिष्ट करना संभव होना चाहिए कि यह अधिभार होना चाहिए। मान लीजिए अगर हमें न केवल वर्तमान ब्लॉक को ओवरलोड करने की आवश्यकता है, बल्कि मूल ब्लॉक भी।
यदि ब्लॉक पहले लोड किया गया था, तो इसे कैश से लिया जाना चाहिए, ताकि अतिरिक्त ट्रैफ़िक न चलाएं और अतिरिक्त अनुरोध के साथ सर्वर को तनाव न दें।
यदि कैश से ब्लॉक को लोड किया जाता है, तो उपयोगकर्ता को किसी तरह यह समझना चाहिए कि यह सबसे अधिक प्रासंगिक जानकारी नहीं है, और ब्लॉक को अपडेट करने में सक्षम हो।
कोई जावास्क्रिप्ट नहीं। यह निश्चित रूप से मेरी निजी राय है, लेकिन मुझे जावास्क्रिप्ट में लेखन से नफरत है। तो मैंने एक और आइटम जोड़ा। इसका अर्थ यह है कि साइट के लिए मॉड्यूल विकसित करते समय मैं जावास्क्रिप्ट की एक पंक्ति (अच्छी तरह से, प्रति मॉड्यूल एक या दो से अधिक नहीं लिखता हूं, और फिर फॉर्म में कुछ चेकबॉक्स के लिए)। मुझे नहीं पता कि आप, प्रिय हैब्रेटाट कैसे हैं, लेकिन मैं, आपकी माँ, बल्कि अपनी आत्मा को शैतान को बेच दूंगा क्योंकि मैं ब्राउज़रों की सभी किस्मों में अपना जावास्क्रिप्ट डेब्यू करूंगा।

खैर, यह वास्तव में सभी इच्छाएं हैं। तो, चलिए शुरू करते हैं ...

शुरू करने के लिए, हमें मॉड्यूल की एक प्रणाली के साथ आना होगा, और उन्हें एक दूसरे में कैसे डाला जाएगा।

सवाल यह है कि प्रत्येक ब्लॉक की स्थिति के बारे में डेटा कहाँ संग्रहीत करें? ऐसा करना बेहतर है, कुकीज़ में, $ _SESSION चर में, $ _GET सरणी में या डेटाबेस में? मैंने पता बार चुना, क्योंकि आप हमेशा एक दोस्त को एक लिंक भेज सकते हैं और सुनिश्चित करें कि वह वही काम करता है जो हम करते हैं।

इसलिए, हमने तय किया कि प्रत्येक मॉड्यूल की स्थिति को जीईटी मापदंडों में परिलक्षित किया जाना चाहिए। यानी GET लाइन में मापदंडों के अनुसार, प्रत्येक मॉड्यूल यह निर्धारित करने में सक्षम होगा कि उसे इस अनुरोध पर कौन सी जानकारी प्रदर्शित करनी है।

मैंने मॉड्यूल लेगो वस्तुओं को बुलाया, और उन्हें PHP भाषा में कक्षाओं के रूप में डिजाइन करने का निर्णय लिया।

प्रत्येक लेगो ऑब्जेक्ट को निम्नानुसार लॉन्च किया गया है:

$lego = new MyLego('my_name'); // -      // .   run()   GET-   : $lego->run(); echo $lego->getOutput(); //      Lego-

आइए इसे बनाते हैं ताकि प्रत्येक लेगो ऑब्जेक्ट पता बार से इसके चर को सुनता है, जो यह बताएगा कि क्या करना है, किस वर्ग विधि को निष्पादित करना है। और यदि आवश्यक हो, तो वह डेटा को एक चर से ले लें, क्योंकि क्रियाएं आमतौर पर सिर्फ उसी तरह नहीं की जाती हैं, बल्कि कुछ डेटा पर - फोटो पहचानकर्ता, टिप्पणी, आदि।

और यह भी मान लें कि पता बार फॉर्म का है:

 // http://example.ru/?my_name[act]=index&my_name[0]=1&my_name[1]=abc

यह लेगो ऑब्जेक्ट के सूचकांक () विधि को my_name नाम से पुकारेगा, इस पद्धति के दो तर्क - '1' और 'abc'।

इस प्रकार, हम आपके साथ ऐसी वस्तुएं बनाएंगे, जिनके तरीकों को एड्रेस बार से सीधे कॉल किया जा सकता है। सुरक्षा के लिए, निश्चित रूप से, हम इस तरह के तरीकों को किसी प्रकार के उपसर्ग में देंगे, उदाहरण के लिए कार्रवाई_। ऐसा इसलिए है ताकि हमलावर किसी भी सिस्टम पद्धति को कॉल न कर सके और हमारी साइट को नुकसान पहुंचा सके।

लेगो ऑब्जेक्ट के प्रत्येक वर्ग के लिए समान कोड नहीं लिखने के लिए, आइए इसे एक बेस क्लास में रखें। इसे लेगो कहते हैं। और हम मॉड्यूल के सभी वर्गों से विरासत में लेंगे।

 abstract class Lego{ private $name; private $output; public function __construct($name = false){ //     ,        if(!$name) $name = get_class($this); $this->name = $name; } public function getName(){ return $this->name; } public function getOutput(){ return $this->output; } public function run(){ $action = $this->getAction(); //  , ,       action_ $method_name = 'action_'.$act; if(method_exists($this, $method_name)){ //    ,      GET !!! //  ,    ,    $this->output $this->output = call_user_func_array( array( $this, $method_name ), $this->getActionParams($action)); } else $this->output = "method {$action} does't exists"; //     AJAX.       ajax={_} if($this->_get("ajax") == $this->getName()){ echo $this->output; //        die; //   . } } //      (  my_name[act]=index); public function getAction(){ $lego_params = $this->getLegoParams(); if(!is_array($lego_params)) return; if(isset($lego_params["act"])) return $lego_params["act"]; return "default"; //     ,    GET   } //   ,    Lego    public function getLegoParams($lego_name = false){ if(!$lego_name) $lego_name = $this->getName(); return $this->_get($lego_name, array()); } //      (  &my_name[0]=1&my_name[1]=abc); public function getActionParams($action){ $lego_params = $this->getLegoParams(); if(!isset($lego_params[$action])) return array(); if(!is_array($lego_params[$action])) return array(); return $lego_params[$action]; } //     ,      GET static public function _get($key_name, $default_value = false){ return self::__get_from_array($_GET, $key_name, $default_value); } //  ,  ,    static private function __get_from_array($array, $key_name, $default_value = false){ if(!isset($array[$key_name])) return $default_value; return $array[$key_name]; } }

अब, कोई लेगो मॉड्यूल कुछ इस तरह दिखाई देगा:

 class FotoLego extends Lego{ //      http://example.ru/?{lego_name}[act]=allfotos public function action_allfotos(){ $out = "     "; return $out; } //      http://example.ru/?{lego_name}[act]=onefoto&{lego_name}[0]={id_} public function action_onefoto($foto_id){ $out = "        id=$foto_id"; return $out; } //      http://example.ru/?{lego_name}[act]=bestfotos public function action_bestfotos(){ $out = "      "; return $out; } }

और यह भी, यह निकला कि एक लेगो-ऑब्जेक्ट में कई लेगो-ऑब्जेक्ट्स हो सकते हैं:

 class SomeLego extends Lego{ .... .... public function action_someMethod(){ //   Lego- $lego = new SomeSublego("sublego_name1"); $lego->run(); //  return $lego->getOutput(); //     } public function action_someMethodElse(){ //    Lego- $lego = new SomeSublegoElse("sublegoelse_name1"); $lego->run(); // , ,      Lego : Smarty::assign("content", $lego->getOutput()); return Smarty::fetch("some_template.tpl"); //     } .... .... }

और केवल वांछित लेगो ऑब्जेक्ट का आउटपुट प्राप्त करने के लिए, हमें एड्रेस बार में ajax पैरामीटर को जोड़ना होगा

 // : // http://example.ru/?LegoSite=fotos&ajax={______} //        Lego::run(),

ठीक है, आप किसी भी AJAX के बिना इस स्तर पर एक साइट बनाना शुरू कर सकते हैं, लेकिन यह पूरी तरह कार्यात्मक है

हम मूल लेगो नियंत्रक के वर्ग का वर्णन स्वयं करते हैं:

 class LegoSite extends Lego{ //   public function action_default(){ //? Default ,        //        : $lego = new LegoAuth(); $lego->run(); //  Smarty::assign("auth_block", $lego->getOutput()); //  LegoAuth   //   : $lego = new LegoHotNews(); $lego->run(); //  Smarty::assign("hotnews_block", $lego->getOutput()); //  LegoHotNews   //  ,   , : $lego = new LegoArticles(); $lego->run(); //  Smarty::assign("articles_block", $lego->getOutput()); //  LegoArticles   //    -: Smarty::fetch("body.tpl"); //        } //   " ".      public function action_about(){ return Smarty::fetch("about_site.tpl"); //     } }

हमारी पूरी साइट में एक एकल फ़ाइल शामिल होगी - index.php:

 include ".common/autoload.php"; //    $lego = new LegoSite(); //            $lego->run(); //   echo $lego->getOutput();// !

बस इतना ही, साइट तैयार है, यह केवल टेम्पलेट्स (आप खुद) को सजाने के लिए बनी हुई है और, सबसे दिलचस्प, थोड़ा जीवन देने वाला जावास्क्रिप्ट जोड़ें। मैंने इसे jQuery प्लगइन के रूप में डिज़ाइन किया है।

Jquery.lego.js फ़ाइल:

 // ,      jQuery.fn.lego.load = function(lego_name, url, data, nocache){ jQuery.fn.lego.lastLoadedUrl = urldecode(url); jQuery.fn.lego.loadedUrls[lego_name] = urldecode(url); var lego = $("div.lego[name="+lego_name+"]"); lego.addClass("loading"); var pellicle = $("<div>"); //  ,    pellicle.addClass('pellicle'); $(".lego[name="+lego_name+"]").prepend(pellicle); var no_ajax_url = jQuery.fn.lego.getNoAjaxUrl(url); //  -   ,      if($(".lego[name="+lego_name+"]").length != 1){ document.location = no_ajax_url; return; } location.hash = url; //      //   var from_cache = LegoCache.get(lego_name, url); if(from_cache && data == null && !nocache){ //    $(".lego[name="+lego_name+"]").replaceWith(from_cache); return; } $.ajax({ type: data == null ? "GET" : "POST", url: url, data: data, success: function(received){ $().lego.log(", : "+received.length+"    "+lego_name+"..."); if($(received).hasClass('lego')){ $(".lego[name="+lego_name+"]").replaceWith(received); //   LegoCache.put(lego_name, url, received); } else{ $().lego.log(lego_name+":     Lego: "+url); document.location = no_ajax_url; } }, error: function(x){ $().lego.log("   url: "+url); } }); } jQuery.fn.lego.ajaxEnable = function(selector){ jQuery.fn.lego.startProcessHash(); if(!selector) selector = ""; //    $(selector+":not(.noajax) a:not(.noajax)").live("click.myEvent", function(e){ var href = $(e.currentTarget).attr("href"); //    if(href.match(/^(http(s)?:\/\/)|(javascript)/i)) return true; var name = $(e.currentTarget).lego().attr("name"); var legotarget = $(e.currentTarget).attr("legotarget"); if(typeof legotarget == "undefined") legotarget = name; var ajax_url = jQuery.fn.lego.getAjaxUrl(href, legotarget); jQuery.fn.lego.load(legotarget, ajax_url); return false; }); //    $("form:not(.noajax)").livequery("submit", function(e){ var name = $(this).lego().attr("name"); var legotarget = $(this).attr("legotarget"); if(typeof legotarget == "undefined") legotarget = name; jQuery.fn.lego.load(legotarget, $().lego.getAjaxUrl($(this).attr("action"), legotarget), $(this).serialize()); return false; }); } //  var LegoCache = { cache: {}, put: function(lego_name, url, data){ this.cache[lego_name+url] = data; }, get: function(lego_name, url, data){ if(typeof this.cache[lego_name+url] != 'undefined'){ var ret = $(this.cache[lego_name+url]); var reload_block = $("<a href='javascript:void(0)' onclick='jQuery.fn.lego.reload(this)' />"); reload_block.html("   , "); reload_block.addClass('reload_block'); try{ ret.prepend(reload_block); }catch(e){} return ret; } } }

बेशक, पूर्ण संस्करण में अभी भी कुछ छोटे कार्य हैं जिन्हें मैंने यहां शामिल नहीं किया है, मुझे डर है कि लेख इस वजह से खराब पढ़ा जाएगा। लेकिन वे हमेशा आपकी सेवा में एसवीएन पर उपलब्ध होते हैं।

स्रोत कोड PHPLego का पूर्ण संस्करण आप Google कोड पर रिपॉजिटरी में देख सकते हैं:

code.google.com/p/phplego

वहां आप विकास में भाग लेने के लिए आमंत्रित कर सकते हैं।

आप परीक्षण कर सकते हैं कि यह यहां कैसे काम करता है ।

धन्यवाद, मुझे आशा है कि कोई काम आएगा। हमेशा तुम्हारा, जोज़िक।

PS उन सभी के लिए जो अपने लेगो मॉड्यूल का आदान-प्रदान करना चाहते हैं, मुझे लिखें, मेरे पास एक्सचेंज बनाए रखने के लिए पहले से ही कुछ है :)

PHPLego: विनीत AJAX

More articles: