👨🏻‍💻 🍥 🎚️ वेनिलाजेएस का उपयोग करके जीथब पर उपयोगकर्ता खोज कैसे करें 💨 🍰 👨🏽‍⚕️

नमस्ते मेरा नाम अलेक्जेंडर है और मैं 2018 में एक वैनिला ES5.1 डेवलपर हूं।

यह लेख लेख-उत्तर "प्रतिक्रिया के बिना GitHub पर उपयोगकर्ताओं की खोज कैसे करें + RxJS 6 + पुनर्प्राप्ति" है , जिसने हमें SvelteJS का उपयोग करने का तरीका दिखाया।

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

हम GitHub उपयोगकर्ता प्लेट प्रदर्शित करते हुए एक ही इनपुट करेंगे:

त्याग

यह लेख आधुनिक जावास्क्रिप्ट और वेब विकास के सभी संभव प्रथाओं की उपेक्षा करता है।

ट्रेनिंग

हमें कॉन्फ़िगर करने और लिखने की आवश्यकता नहीं है, सभी आवश्यक लेआउट के साथ index.html बनाएं:

index.html

<!doctype html> <html> <head> <meta charset='utf-8'> <title>GitHub users</title> <link rel='stylesheet' type='text/css' href='index.css'> </head> <body> <div id='root'></div> <div id='templates' style='display:none;'> <div data-template-id='username_input'> <input type='text' data-onedit='onNameEdit' placeholder='GitHub username'> </div> <div data-template-id='usercard' class='x-user-card'> <div class='background'></div> <div class='avatar-container'> <a class='avatar' data-href='userUrl'> <img data-src='avatarImageUrl'> </a> </div> <div class='name' data-text='userName'></div> <div class='content'> <a class='block' data-href='reposUrl'> <b data-text='reposCount'></b> <span>Repos</span> </a> <a class='block' data-href='gistsUrl'> <b data-text='gistsCount'></b> <span>Gists</span> </a> <a class='block' data-href='followersUrl'> <b data-text='followersCount'></b> <span>Followers</span> </a> </div> </div> <div data-template-id='error'><b data-text='status'></b>: <span data-text='text'></span></div> <div data-template-id='loading'>Loading...</div> </div> </body> </html>

अगर किसी को CSS में दिलचस्पी है, तो आप उसे रिपॉजिटरी में देख सकते हैं।

हमारे पास सबसे आम शैलियों हैं, कोई सीएसएस-मॉड्यूल और अन्य स्कोपिंग नहीं है। हम बस x- से शुरू होने वाली कक्षाओं के घटकों को चिह्नित करते हैं और गारंटी देते हैं कि परियोजना में और अधिक नहीं होगा। हम उनके विषय में कोई भी चयनकर्ता लिखते हैं।

इनपुट फ़ील्ड

हम अपने इनपुट क्षेत्र से चाहते हैं कि इसके बदलाव की घटनाएँ, साथ ही साथ इनपुट शुरू होने की घटना भी हो, ताकि यह तुरंत लोड संकेत दिखाता है। यह इस तरह से निकला:

 in_package('GitHubUsers', function() { this.provide('UserNameInput', UserNameInput); function UserNameInput(options) { var onNameInput = options.onNameInput, onNameChange = options.onNameChange; var element = GitHubUsers.Dom.instantiateTemplate('username_input'); var debouncedChange = GitHubUsers.Util.delay(1000, function() { onNameChange(this.value); }); GitHubUsers.Dom.binding(element, { onNameEdit: function() { onNameInput(this.value); debouncedChange.apply(this, arguments); } }); this.getElement = function() { return element; }; } });

यहां हमने कुछ उपयोगितावादी कार्यों का उपयोग किया है, हम उनके माध्यम से जाएंगे:

चूँकि हमारे पास RequireJS नहीं है, कोई भी RequireJS , कोई भी RequireJS नहीं है, हम सब कुछ निम्नलिखित फ़ंक्शन का उपयोग करके वस्तुओं में करते हैं:

packages.js

 window.in_package = function(path, fun) { path = path.split('.'); var obj = path.reduce(function(acc, p) { var o = acc[p]; if (!o) { o = {}; acc[p] = o; } return o; }, window); fun.call({ provide: function(name, value) { obj[name] = value; } }); };

consumeTemplates() फ़ंक्शन हमें DOM तत्व की एक गहरी प्रति देता है, जो हमारे index.html में consumeTemplates() तत्व से consumeTemplates() फ़ंक्शन द्वारा प्राप्त किया जाएगा।

templates.js

 in_package('GitHubUsers.Dom', function() { var templatesMap = new Map(); this.provide('consumeTemplates', function(containerEl) { var templates = containerEl.querySelectorAll('[data-template-id]'); for (var i = 0; i < templates.length; i++) { var templateEl = templates[i], templateId = templateEl.getAttribute('data-template-id'); templatesMap.set(templateId, templateEl); templateEl.parentNode.removeChild(templateEl); } if (containerEl.parentNode) containerEl.parentNode.removeChild(containerEl); }); this.provide('instantiateTemplate', function(templateId) { var templateEl = templatesMap.get(templateId); return templateEl.cloneNode(true); }); });

Dom.binding() फ़ंक्शन किसी तत्व, विकल्प को स्वीकार करता है, विशिष्ट डेटा विशेषताओं के लिए खोज करता है और तत्वों के साथ हमारे द्वारा आवश्यक क्रियाएं करता है। उदाहरण के लिए, data-element विशेषता के लिए, यह चिह्नित तत्व के लिंक के साथ परिणाम के लिए एक फ़ील्ड जोड़ता है, data-onedit विशेषता के लिए, keyup और change हैंडलर विकल्प हैंडलर के साथ तत्व पर लटकाए जाते हैं।

binding.js

 in_package('GitHubUsers.Dom', function() { this.provide('binding', function(element, options) { options = options || {}; var binding = {}; handleAttribute('data-element', function(el, name) { binding[name] = el; }); handleAttribute('data-text', function(el, key) { var text = options[key]; if (typeof text !== 'string' && typeof text !== 'number') return; el.innerText = text; }); handleAttribute('data-src', function(el, key) { var src = options[key]; if (typeof src !== 'string') return; el.src = src; }); handleAttribute('data-href', function(el, key) { var href = options[key]; if (typeof href !== 'string') return; el.href = href; }); handleAttribute('data-onedit', function(el, key) { var handler = options[key]; if (typeof handler !== 'function') return; el.addEventListener('keyup', handler); el.addEventListener('change', handler); }); function handleAttribute(attribute, fun) { var elements = element.querySelectorAll('[' + attribute + ']'); for (var i = 0; i < elements.length; i++) { var el = elements[i], attributeValue = el.getAttribute(attribute); fun(el, attributeValue); } } return binding; }); });

खैर, delay की जरूरत है कि हम किस प्रकार की बहस से निपटते हैं:

debounce.js

 in_package('GitHubUsers.Util', function() { this.provide('delay', function(timeout, fun) { var timeoutId = 0; return function() { var that = this, args = arguments; if (timeoutId) clearTimeout(timeoutId); timeoutId = setTimeout(function() { timeoutId = 0; fun.apply(that, args); }, timeout); }; }); });

उपयोगकर्ता कार्ड

इसका कोई तर्क नहीं है, केवल एक टेम्पलेट है जो डेटा से भरा है:

 in_package('GitHubUsers', function() { this.provide('UserCard', UserCard); function UserCard() { var element = GitHubUsers.Dom.instantiateTemplate('usercard'); this.getElement = function() { return element; }; this.setData = function(data) { GitHubUsers.Dom.binding(element, data); }; } });

बेशक, हर बार जब हम डेटा बदलते हैं, तो कई querySelectorAll करते हैं, लेकिन यह बहुत अच्छा नहीं है, लेकिन यह काम करता है और हम इसे पूरा करते हैं। यदि यह अचानक पता चलता है कि इसकी वजह से सब कुछ धीमा हो रहा है, तो हम संग्रहीत data-element को डेटा लिखेंगे। या हम एक और बाध्यकारी कार्य करेंगे, जो स्वयं तत्वों को बचाता है और नए डेटा को पढ़ सकता है। या हम न केवल स्थैतिक मूल्यों, उनके परिवर्तनों की एक धारा के उद्देश्य के लिए विकल्पों के हस्तांतरण का समर्थन करेंगे ताकि बाइंडर उनका अनुसरण कर सकें।

लोडिंग / अनुरोध त्रुटियों का संकेत

हम मानते हैं कि ये प्रतिनिधित्व भी स्थिर होंगे, केवल एक ही स्थान पर उपयोग किए जाएंगे, और संभावना है कि उनके पास अपने स्वयं के तर्क बेहद छोटे होंगे (उपयोगकर्ता के कार्ड के विपरीत), इसलिए हम उनके लिए अलग घटक नहीं बनाएंगे। वे आवेदन घटक के लिए सिर्फ टेम्पलेट होंगे।

डेटा अनुरोध

हम उपयोगकर्ता अनुरोध विधि के साथ एक वर्ग बनाएंगे, जिस स्थिति में हम आसानी से इसके उदाहरण को मोच / अन्य कार्यान्वयन के साथ बदल सकते हैं:

 in_package('GitHubUsers', function() { this.provide('GitHubApi', GitHubApi); function GitHubApi() { this.getUser = function(options, callback) { var url = 'https://api.github.com/users/' + options.userName; return GitHubUsers.Http.doRequest(url, function(error, data) { if (error) { if (error.type === 'not200') { if (error.status === 404) callback(null, null); else callback({ status: error.status, message: data && data.message }); } else { callback(error); } return; } // TODO: validate `data` against schema callback(null, data); }); }; } });

बेशक, हमें XMLHttpRequest पर एक आवरण की आवश्यकता है। हम fetch उपयोग नहीं करते हैं क्योंकि यह अनुरोधों के व्यवधान का समर्थन नहीं करता है, और न ही हम एक ही कारण के लिए वादों के साथ संवाद करना चाहते हैं।

ajax.js

 in_package('GitHubUsers.Http', function() { this.provide('doRequest', function(options, callback) { var url; if (typeof options === "string") { url = options; options = {}; } else { if (!options) options = {}; url = options.url; } var method = options.method || "GET", headers = options.headers || [], body = options.body, dataType = options.dataType || "json", timeout = options.timeout || 10000; var old_callback = callback; callback = function() { callback = function(){}; // ignore all non-first calls old_callback.apply(this, arguments); }; var isAborted = false; var request = new XMLHttpRequest(); // force timeout var timeoutId = setTimeout(function() { timeoutId = 0; if (!isAborted) { request.abort(); isAborted = true; } callback({msg: "fetch_timeout", request: request, opts: options}); }, timeout); request.addEventListener("load", function() { var error = null; if (request.status !== 200) { error = { type: 'not200', status: request.status }; } if (typeof request.responseText === "string") { if (dataType !== "json") { callback(error, request.responseText); return; } var parsed; try { parsed = JSON.parse(request.responseText); } catch (e) { callback(e); return; } if (parsed) { callback(error, parsed); } else { callback({msg: "bad response", request: request}); } } else { callback({msg: "no response text", request: request}); } }); request.addEventListener("error", function() { callback({msg: "request_error", request: request}); }); request.open(method, url, true /*async*/); request.timeout = timeout; request.responseType = ""; headers.forEach(function(header) { try { request.setRequestHeader(header[0], header[1]); } catch (e) {} }); try { if (body) request.send(body); else request.send(); } catch (e) { callback({exception: e, type: 'send'}); } return { cancel: function() { if (!isAborted) { request.abort(); isAborted = true; } if (timeoutId) { clearTimeout(timeoutId); timeoutId = 0; } } }; }); });

अंतिम आवेदन

app.js

 in_package('GitHubUsers', function() { this.provide('App', App); function App(options) { var api = options.api; var element = document.createElement('div'); // Create needed components var userNameInput = new GitHubUsers.UserNameInput({ onNameInput: onNameInput, onNameChange: onNameChange }); var userCard = new GitHubUsers.UserCard(); var errorElement = GitHubUsers.Dom.instantiateTemplate('error'); var displayElements = [ { type: 'loading', element: GitHubUsers.Dom.instantiateTemplate('loading') }, { type: 'error', element: errorElement }, { type: 'userCard', element: userCard.getElement() } ]; // Append elements to DOM element.appendChild(userNameInput.getElement()); userNameInput.getElement().style.marginBottom = '1em'; // HACK displayElements.forEach(function(x) { var el = x.element; el.style.display = 'none'; element.appendChild(el); }); var contentElements = new GitHubUsers.DomUtil.DisplayOneOf({ items: displayElements }); // User name processing var activeRequest = null; function onNameInput(name) { name = name.trim(); // Instant display of `loading` or current request result if (activeRequest && activeRequest.name === name) { activeRequest.activateState(); } else if (name) { contentElements.showByType('loading'); } else { contentElements.showByType(null); } } function onNameChange(name) { name = name.trim(); // Cancel old request if (activeRequest && activeRequest.name !== name) { activeRequest.request.cancel(); activeRequest = null; } else if (activeRequest) { // same name return; } if (!name) return; // Do new request activeRequest = { name: name, request: api.getUser({ userName: name }, onUserData), // method for `onNameInput` activateState: function() { contentElements.showByType('loading'); } }; activeRequest.activateState(); function onUserData(error, data) { if (error) { activeRequest = null; contentElements.showByType('error'); GitHubUsers.Dom.binding(errorElement, { status: error.status, text: error.message }); return; } if (!data) { activeRequest.activateState = function() { GitHubUsers.Dom.binding(errorElement, { status: 404, text: 'Not found' }); contentElements.showByType('error'); }; activeRequest.activateState(); return; } activeRequest.activateState = function() { userCard.setData({ userName: data.name || data.login, // `data.name` can be `null` userUrl: data.html_url, avatarImageUrl: data.avatar_url + '&s=80', reposCount: data.public_repos, reposUrl: 'https://github.com/' + data.login + '?tab=repositories', gistsCount: data.public_gists, gistsUrl: 'https://gist.github.com/' + data.login, followersCount: data.followers, followersUrl: 'https://github.com/' + data.login + '/followers' }); contentElements.showByType('userCard'); }; activeRequest.activateState(); } } this.getElement = function() { return element; }; } });

हमें बहुत सारे कोड मिले, जिनमें से आधा हमें उन सभी घटकों के आरंभीकरण में है, जिन्हें अनुरोध भेजने और लोड / त्रुटि / परिणाम प्रदर्शित करने के तर्क में आधा है। लेकिन सब कुछ पूरी तरह से पारदर्शी है, स्पष्ट है और यदि आवश्यक हो, तो हम तर्क को कहीं भी बदल सकते हैं।

हमने उपयोगिता DisplayOneOf उपयोग किया, जो दिए गए तत्वों में से एक को दिखाता है, बाकी को छुपाता है:

डोम-util.js

 in_package('GitHubUsers.DomUtil', function() { this.provide('DisplayOneOf', function(options) { var items = options.items; var obj = {}; items.forEach(function(item) { obj[item.type] = item; }); var lastDisplayed = null; this.showByType = function(type) { if (lastDisplayed) { lastDisplayed.element.style.display = 'none'; } if (!type) { lastDisplayed = null; return; } lastDisplayed = obj[type]; lastDisplayed.element.style.display = ''; }; }); });

इसे अंत में काम करने के लिए, हमें टेम्पलेट्स को इनिशियलाइज़ करना होगा और पेज पर App इंस्टेंस को छोड़ना होगा:

 function onReady() { GitHubUsers.Dom.consumeTemplates(document.getElementById('templates')); var rootEl = document.getElementById('root'); var app = new GitHubUsers.App({ api: new GitHubUsers.GitHubApi() }); rootEl.appendChild(app.getElement()); }

परिणाम?

जैसा कि आप अपने लिए देख सकते हैं, हमने इस तरह के एक छोटे से उदाहरण के लिए बहुत सारे कोड लिखे। कोई भी हमारे लिए सभी जादू नहीं करता है, हम खुद सब कुछ हासिल करते हैं। हम खुद वह जादू रचते हैं जो हमें चाहिए तो हमें चाहिए।

→ डेमो → कोड

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

आगे क्या है?

यह उदाहरण सिद्धांत रूप में वेनिलाजेएस में लिखने के लिए बहुत छोटा है। मेरा मानना है कि वेनिला में लिखना केवल तभी समझ में आता है जब आपकी परियोजना किसी भी ढाँचे की तुलना में अधिक समय तक जीने की योजना बनाती है और आपके पास इसकी संपूर्णता में फिर से लिखने के लिए संसाधन नहीं हैं।

लेकिन अगर वह वैसे भी बड़े थे, तो यहां हम क्या करेंगे:

HTML टेम्पलेट हम मॉड्यूल / घटकों के संबंध में करेंगे। वे घटकों के साथ फ़ोल्डरों में होंगे और instantiateTemplate मॉड्यूल का नाम लेगा, न कि वैश्विक नाम का।

फिलहाल, हमारे पास जो भी CSS हैं, वे index.css , जाहिर है, हमें इसे घटकों के बगल में भी रखना होगा।

बंडलों की पर्याप्त विधानसभा नहीं है, हम सभी फाइलों को अपने हाथों से index.html में जोड़ते हैं, यह अच्छा नहीं है।

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

कुछ प्रकार के ध्वज रखने की सलाह दी जाती है जो इंडेक्स html में एक विशाल सूची के साथ js / html / css कनेक्शन योजना का समर्थन करते हैं। फिर असेंबली में कोई देरी नहीं होगी, और क्रोम में स्रोतों में आपके पास प्रत्येक फ़ाइल एक अलग टैब में होगी और किसी सोर्समैप की आवश्यकता नहीं है।

पुनश्च

यह सिर्फ एक विकल्प है कि यह सब वैनिलाजेएस का उपयोग कैसे कर सकता है। टिप्पणियों में, अन्य उपयोग मामलों के बारे में सुनना दिलचस्प होगा।

आपका ध्यान के लिए धन्यवाद।

वेनिलाजेएस का उपयोग करके जीथब पर उपयोगकर्ता खोज कैसे करें