👩🏼‍⚖️ 👨🏽‍🏫 👩🏿‍✈️ एसैसेटिक वेब: गो और जेएस पर प्रोटोटाइप पिस्सू बाजार 🤵 👲🏼 🎩

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

सच में, मुझे कॉमिक्स में कुछ भी समझ में नहीं आता है, लेकिन मुझे पिस्सू बाजार से प्यार है, खासकर फोरम प्रारूप में, जो शून्य में लोकप्रिय थे। इसलिए, धारणा (संभवतः झूठी), जिसमें से निम्नलिखित निष्कर्ष निकलते हैं, केवल एक ही है - आवेदन के साथ बातचीत का मुख्य प्रकार, माध्यमिक - पोस्टिंग की घोषणाओं और चर्चा है।

हमारा लक्ष्य बिना किसी सरल अनुप्रयोग के बनाना होगा ~~तकनीकी पता है कि कैसे~~ अतिरिक्त सीटी, हालांकि, आधुनिक वास्तविकताओं के अनुरूप है। मुख्य आवश्यकताएं जिन्हें मैं प्राप्त करना चाहता हूं वे हैं:

सर्वर साइड:

क) ग्राहक को उपयोगकर्ता डेटा भेजने के लिए भंडारण, सत्यापन के कार्यों को करता है
बी) उपरोक्त ऑपरेशन संसाधनों की स्वीकार्य मात्रा का उपभोग करते हैं (समय, सहित)
ग) आवेदन और डेटा लोकप्रिय हमले वैक्टर से सुरक्षित हैं
d) इसमें थर्ड-पार्टी क्लाइंट्स और इंटेरसेवर इंटरैक्शन के लिए एक साधारण एपीआई है
ई) क्रॉस-प्लेटफॉर्म, सरल तैनाती
ग्राहक पक्ष:

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

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

चेतावनी:

मैं अनुमति के बिना डेमो में इस्तेमाल की गई छवियों के अज्ञात लेखकों के साथ-साथ गॉसे जी, प्रोज़ोरोवस्काया बी डी और प्रकाशन घर "लाइब्रेरी ऑफ फ्लोरेंस पावेलकोव" से काम के अंश "सिद्धार्थ" का उपयोग करने के लिए माफी चाहता हूं।
लेखक एक वास्तविक प्रोग्रामर नहीं है, मैं इस परियोजना में उपयोग किए गए कोड या तकनीकों का उपयोग करने की अनुशंसा नहीं करता हूं यदि आप नहीं जानते कि आप क्या कर रहे हैं।
मैं कोड की शैली के लिए माफी माँगता हूँ, यह अधिक आसानी से और स्पष्ट रूप से लिखा जा सकता था, लेकिन यह मजेदार नहीं है। आत्मा और एक दोस्त के लिए एक परियोजना, जैसा कि वे कहते हैं।
मैं साक्षरता दर के लिए भी क्षमा चाहता हूं, विशेष रूप से अंग्रेजी पाठ में। मई हार्ट से बोलो साल।
प्रस्तुत प्रोटोटाइप के प्रदर्शन का परीक्षण [क्रोमियम 70 में किया गया था; linux x86_64; 1366x768], मैं त्रुटि संदेशों के लिए अन्य प्लेटफार्मों और उपकरणों के उपयोगकर्ताओं के लिए बहुत आभारी रहूंगा।
यह एक प्रोटोटाइप और चर्चा के लिए एक प्रस्तावित विषय है - दृष्टिकोण और सिद्धांत, मैं पूछता हूं कि कार्यान्वयन की सभी आलोचनाएं और सौंदर्य पक्ष तर्क के साथ होना चाहिए।

सर्वर

सर्वर के लिए भाषा गोलंग है। उत्कृष्ट मानक पुस्तकालय और प्रलेखन के साथ एक सरल, तेज भाषा ... थोड़ा कष्टप्रद। प्रारंभिक विकल्प अमृत / एर्गलैंग पर गिर गया, लेकिन जब से मैं पहले से ही जाना (अपेक्षाकृत) जानता था, यह इसे जटिल नहीं करने का निर्णय लिया गया था (और आवश्यक पैकेज केवल जाने के लिए थे)।

गो-समुदाय में वेब फ्रेमवर्क के उपयोग को प्रोत्साहित नहीं किया जाता है (उचित रूप से, यह स्वीकार करने योग्य है), हम एक समझौता चुनते हैं और लैबस्टैक / इको माइक्रोफ्रामवर्क का उपयोग करते हैं, जिससे दिनचर्या की मात्रा कम हो जाती है और, ऐसा लगता है, प्रदर्शन में बहुत कुछ नहीं खो रहा है।

हम डेटाबेस के रूप में tidwall / buntdb का उपयोग करते हैं। सबसे पहले, अंतर्निहित समाधान अधिक सुविधाजनक है और ओवरहेड लागत को कम करता है, और दूसरी बात, इन-मेमोरी + कुंजी / मूल्य - ~~फैशनेबल, स्टाइलिश~~ फास्ट और कोई कैश की जरूरत है। हम JSON में डेटा संग्रहीत और देते हैं, केवल तभी बदलते हैं।

दूसरी पीढ़ी के i3 पर, अंतर्निहित लकड़हारा 0.5 से 10ms तक विभिन्न अनुरोधों के लिए निष्पादन का समय दिखाता है। उसी मशीन पर रनिंग रेक हमारे उद्देश्यों के लिए पर्याप्त परिणाम दिखाता है:

➜ comico git:(master) wrk -t2 -c500 -d60s http://localhost:9001/pub/mtimes Running 1m test @ http://localhost:9001/pub/mtimes 2 threads and 500 connections Thread Stats Avg Stdev Max +/- Stdev Latency 20.74ms 16.68ms 236.16ms 72.69% Req/Sec 13.19k 627.43 15.62k 73.58% 1575522 requests in 1.00m, 449.26MB read Requests/sec: 26231.85 Transfer/sec: 7.48MB

 ➜ comico git:(master) wrk -t2 -c500 -d60s http://localhost:9001/pub/goods Running 1m test @ http://localhost:9001/pub/goods 2 threads and 500 connections Thread Stats Avg Stdev Max +/- Stdev Latency 61.79ms 65.96ms 643.73ms 86.48% Req/Sec 5.26k 705.24 7.88k 70.31% 628215 requests in 1.00m, 8.44GB read Requests/sec: 10454.44 Transfer/sec: 143.89MB

परियोजना की संरचना

कॉमिको / मॉडल पैकेज को तीन फाइलों में विभाजित किया गया है:
model.go - में डेटा प्रकारों और सामान्य कार्यों का विवरण होता है: निर्माण / अपडेट (बंडबेट इन कार्यों के बीच अंतर नहीं करता है और हम मैन्युअल रूप से रिकॉर्ड की उपस्थिति के लिए जांच करते हैं), सत्यापन, विलोपन, एक रिकॉर्ड प्राप्त करना और एक सूची प्राप्त करना;
rules.go - में एक विशिष्ट प्रकार और लॉगिंग फ़ंक्शन के लिए सत्यापन नियम शामिल हैं;
files.go - छवियों के साथ काम करते हैं।
Mtimes प्रकार डेटाबेस में शेष प्रकारों के अंतिम परिवर्तन पर डेटा संग्रहीत करता है, इस प्रकार ग्राहक को सूचित करता है कि कौन सा डेटा बदल गया है।

Comico / bd पैकेज में डेटाबेस के साथ इंटरैक्ट करने के लिए सामान्यीकृत फ़ंक्शंस होते हैं: बनाना, डिलीट करना, सिलेक्ट करना आदि। Buntdb टेक्स्ट फॉर्मेट में एक फ़ाइल में (हमारे मामले में, एक सेकंड में) सभी बदलाव बचाता है, जो कुछ स्थितियों में सुविधाजनक है। Db फ़ाइल संपादित नहीं की गई है, लेन-देन की सफलता के मामले में परिवर्तन अंत में जोड़े जाते हैं। डेटा की अखंडता का उल्लंघन करने के मेरे सभी प्रयास असफल रहे, सबसे खराब स्थिति में, अंतिम सेकंड में परिवर्तन खो गए हैं।
हमारे कार्यान्वयन में, प्रत्येक प्रकार एक अलग फ़ाइल में एक अलग डेटाबेस से मेल खाती है (लॉग को छोड़कर जो मेमोरी में विशेष रूप से संग्रहीत होते हैं और रिबूट पर शून्य पर रीसेट होते हैं)। यह बड़े पैमाने पर बैकअप और प्रशासन की सुविधा के कारण है, एक छोटा सा प्लस - संपादन ब्लॉक के लिए एक खुला लेनदेन केवल एक प्रकार के डेटा तक पहुंच है।
उदाहरण के लिए, इस पैकेज को आसानी से दूसरे डेटाबेस, SQL का उपयोग करके समान के साथ बदला जा सकता है। ऐसा करने के लिए, यह निम्नलिखित कार्यों को लागू करने के लिए पर्याप्त है:

 func Delete(db byte, key string) error func Exist(db byte, key string) bool func Insert(db byte, key, val string) error func ReadAll(db byte, pattern string) (str string, err error) func ReadOne(db byte, key string) (str string, err error) func Renew(db byte, key string) (err error, newId string)

कॉमिको / cnst पैकेज में सभी संकुल (डेटा प्रकार, क्रिया प्रकार, उपयोगकर्ता प्रकार) में कुछ स्थिरांक आवश्यक हैं। इसके अलावा, इस पैकेज में सभी मानव-पठनीय संदेश शामिल हैं जिनके साथ हमारा सर्वर बाहरी दुनिया को जवाब देगा।

कॉमिको / सर्वर पैकेज में रूटिंग जानकारी होती है। इसके अलावा, बस कुछ पंक्तियाँ (इको डेवलपर्स के लिए धन्यवाद), जेडब्ल्यूटी, कॉर्स, सीएसपी हेडर, लकड़हारा, स्थैतिक वितरण, गज़िप, एसीएमई ऑटो-प्रमाण पत्र, आदि का उपयोग करके प्राधिकरण कॉन्फ़िगर किया गया है।

एपीआई एंट्री पॉइंट्स

यूआरएल	डेटा	विवरण
मिल / पब / (माल \| पोस्ट \| उपयोगकर्ता \| cmnts \| फाइलें)	-	प्रासंगिक घोषणाओं, पोस्ट, उपयोगकर्ताओं, टिप्पणियों, फ़ाइलों की एक सरणी प्राप्त करना
get / pub / mtimes	-	प्रत्येक डेटा प्रकार के लिए अंतिम परिवर्तन समय प्राप्त करना
पोस्ट / पब / लॉगिन	{आईडी : लॉगिन, पास : पासवर्ड}	JWT टोकन और इसकी अवधि लौटाता है
पोस्ट / पब / पास	{आईडी , पास }	यदि डेटा सही है तो एक नया उपयोगकर्ता बनाता है
डाल / एपी / पास	{आईडी , पास }	पासवर्ड अपडेट
पोस्ट \| डाल / एपी / माल	{आईडी , सामान्य , शीर्षक , प्रकार , मूल्य , पाठ , चित्र: [], तालिका: {कुंजी: मूल्य}	विज्ञापन बनाएं / अपडेट करें
पोस्ट \| डाल / एपी / पोस्ट	{आईडी , सामान्य , शीर्षक , प्रकार , पाठ *}	फोरम पोस्ट बनाएं / अपडेट करें
पोस्ट \| डाल / एपीआई / उपयोगकर्ताओं	{आईडी *, शीर्षक, प्रकार, स्थिति, स्क्राइब: [], उपेक्षा: [], तालिका: {कुंजी: मूल्य}}	उपयोगकर्ता बनाएं / अपडेट करें
पोस्ट / एपी / सेमीनेट	{आईडी , सामान्य , स्वामी , प्रकार , से, पाठ *}	टिप्पणी निर्माण
हटाएँ / एपीआई / (माल \| पोस्ट \| उपयोगकर्ता \| cmnts) / [आईडी]	-	आईडी के साथ एक प्रविष्टि हटाता है
get / api / activity	-	वर्तमान उपयोगकर्ता के लिए आने वाली टिप्पणियों के अंतिम रीड टाइम को अपडेट करता है
get / api / (subscribe \| अनदेखा) / [टैग]	-	सदस्यता / उपेक्षा की सूची में उपयोगकर्ता को टैग (हटाता है (यदि कोई हो))
पोस्ट / एपीआई / अपलोड / (माल \| उपयोगकर्ता)	मल्टीपार्ट (नाम, फ़ाइल)	फोटो विज्ञापन / उपयोगकर्ता अवतार अपलोड करता है

* - आवश्यक फ़ील्ड
एपी - को प्राधिकरण की आवश्यकता है, पब - नहीं

एक अनुरोध के साथ, जो ऊपर से मेल नहीं खाता है, सर्वर स्थिर (उदाहरण के लिए, / img / * - छवियों, /index.html - क्लाइंट) के लिए निर्देशिका में एक फ़ाइल की खोज करता है।
यदि कोई त्रुटि के लिए 400 या 404, और आवश्यक होने पर एक छोटा संदेश है, तो कोई भी एपीआई बिंदु 200 प्रतिसाद कोड लौटाएगा।
प्रवेश अधिकार सरल हैं: एक प्रविष्टि बनाना एक अधिकृत उपयोगकर्ता के लिए उपलब्ध है, लेखक और मॉडरेटर को संपादन, व्यवस्थापक मॉडरेट कर सकते हैं और नियुक्त कर सकते हैं।
एपीआई सबसे सरल एंटी-वैंडल से सुसज्जित है: उपयोगकर्ता आईडी और आईपी के साथ क्रियाओं को लॉग किया जाता है, और, अक्सर पहुंच के मामले में, एक त्रुटि आपको थोड़ी प्रतीक्षा करने के लिए कहा जाता है (पासवर्ड अनुमान के खिलाफ उपयोगी)।

ग्राहक

मुझे प्रतिक्रियाशील वेब की अवधारणा पसंद है, मुझे लगता है कि ज्यादातर आधुनिक साइटों / अनुप्रयोगों को इस अवधारणा के ढांचे के भीतर किया जाना चाहिए, या पूरी तरह से स्थिर होना चाहिए। दूसरी ओर, जेएस कोड के मेगाबाइट के साथ एक साधारण साइट को डिप्रेस नहीं किया जा सकता है। मेरी राय में, यह (और न केवल) समस्या Svelte द्वारा हल की जा सकती है। यह ढांचा (या प्रतिक्रियाशील इंटरफेस के निर्माण के लिए भाषा) आवश्यक कार्यक्षमता में वीयू से नीच नहीं है, लेकिन इसका एक अनुचित लाभ है - घटकों को वेनिला जेएस में संकलित किया जाता है, जो बंडल के आकार और आभासी मशीन पर लोड (बंडल) को कम करता है। हमारा पिस्सू बाजार मामूली है, आज के मानकों से, 24KB)। विवरण आधिकारिक दस्तावेज में पाया जा सकता है।

हम पिस्सू बाजार के ग्राहक पक्ष के लिए SvelteJS पिस्सू बाजार चुनते हैं, हम रिच हैरिस और परियोजना के आगे विकास के लिए शुभकामनाएं देते हैं!

PS मैं किसी को नाराज नहीं करना चाहता। मुझे यकीन है कि प्रत्येक विशेषज्ञ और प्रत्येक परियोजना के पास अपने उपकरण हैं।

ग्राहक / डेटा

यूआरएल

हम नेविगेशन के लिए उपयोग करते हैं। हम एक बहु-पृष्ठ दस्तावेज़ का अनुकरण नहीं करेंगे, इसके बजाय, हम क्वेरी मापदंडों के साथ हैश पृष्ठों का उपयोग करते हैं। संक्रमण के लिए, आप बिना js के सामान्य <a> का उपयोग कर सकते हैं।

अनुभाग डेटा प्रकारों के अनुरूप हैं: / # माल , / # पोस्ट , / # उपयोगकर्ता ।
पैरामीटर :? Id = record_id ; पेज = पेज_नंबर ; खोज = search_query ।

कुछ उदाहरण:

/ # पोस्ट? आईडी = 1542309643 और पेज = 999 और खोज = {सामान्य: एनॉन } - अनुभाग पोस्ट , पोस्ट आईडी - 1542309643 , टिप्पणी पृष्ठ - 999 , खोज क्वेरी - { ऑर्टिकल: एनॉन }
/ # माल? पृष्ठ = 2 और खोज = सिद्धार्थ - अनुभाग माल , अनुभाग पृष्ठ - 2 , खोज क्वेरी - सिद्धार्थ
/ # माल; खोज = वेयर {की: वैल्यू} टी - सेक्शन गुड्स , सर्च क्वैरी - में विज्ञापन के हेडर या टेक्स्ट में वार्ट प्रतिस्थापन और विज्ञापन के सारणीबद्ध भाग की प्रमुख संपत्ति में दिए गए वैल्यू की खोज होती है।
/ # माल? खोज = {मॉडल: 100, प्रदर्शन: 256} - मुझे लगता है कि यहां सब कुछ सादृश्य द्वारा स्पष्ट है

हमारे कार्यान्वयन में पार्सिंग और URL पीढ़ी के कार्य इस तरह दिखते हैं:

 window.addEventListener('hashchange', function() { const hash = location.hash.slice(1).split('?'), result = {} if (!!hash[1]) hash[1].split('&').forEach(str => { str = str.split('=') if (!!str[0] && !!str[1]) result[decodeURI(str[0]).toLowerCase()] = decodeURI(str[1]).toLowerCase() }) result.type = hash[0] || 'goods' store.set({ hash: result }) }) function goto({ type, id, page, search }) { const { hash } = store.get(), args = arguments[0], query = [] new Array('id', 'page', 'search').forEach(key => { const value = args[key] !== undefined ? args[key] : hash[key] || null if (value !== null) query.push(key + '=' + value) }) location.hash = (type || hash.type || 'goods') + (!!query.length ? '?' + query.join('&') : '') }

एपीआई

सर्वर के साथ डेटा का आदान-प्रदान करने के लिए, हम फ़िश एप का उपयोग करेंगे। थोड़े-थोड़े अंतराल पर अद्यतन रिकॉर्ड डाउनलोड करने के लिए, हम / पब / mtimes से एक अनुरोध करते हैं, अगर किसी भी प्रकार के अंतिम परिवर्तन का समय स्थानीय से अलग है, तो हम इस प्रकार की एक सूची लोड करते हैं। हां, SSE या WebSockets और वृद्धिशील लोडिंग के माध्यम से अपडेट की अधिसूचना को लागू करना संभव था, लेकिन इस मामले में हम इसके बिना कर सकते हैं। हमें क्या मिला:

 async function GET(type) { const response = await fetch(location.origin + '/pub/' + type) .catch(() => ({ ok: false })) if (type === 'mtimes') store.set({ online: response.ok }) return response.ok ? await response.json() : [] } async function checkUpdate(type, mtimes, updates = {}) { const local = store.get()._mtimes, net = mtimes || await GET('mtimes') if (!net[type] || local[type] === net[type]) return const value = updates['_' + type] = await GET(type) local[type] = net[type]; updates._mtimes = local if (!!value && !!value.sort) store.set(updates) } async function checkUpdates() { setTimeout(() => checkUpdates(), 30000) const mtimes = await store.GET('mtimes') new Array('users', 'goods', 'posts', 'cmnts', 'files') .forEach(type => checkUpdate(type, mtimes)) }

फ़िल्टरिंग और पेजिंग के लिए, हम नेविगेशन डेटा के आधार पर Svelte के परिकलित गुणों का उपयोग करते हैं। परिकलित मानों की दिशा है: आइटम (सर्वर से आने वाले रिकॉर्ड के सरणियाँ) => उपेक्षित (वर्तमान उपयोगकर्ता की अनदेखी सूची के आधार पर फ़िल्टर किए गए रिकॉर्ड) => scribedItems (सब्सक्रिप्शन की सूची के अनुसार रिकॉर्ड को फ़िल्टर करता है, यदि सक्रिय हो) => curItem और curItems (वर्तमान रिकॉर्ड की गणना करता है) अनुभाग पर निर्भर करता है) => फ़िल्टर्ड इट्स (खोज क्वेरी के आधार पर रिकॉर्ड्स को फ़िल्टर करता है, अगर केवल एक रिकॉर्ड है - उस पर टिप्पणियों को फ़िल्टर करता है) => मैक्सपेज (प्रति पृष्ठ 12 रिकॉर्ड / टिप्पणियों के आधार पर पृष्ठों की संख्या की गणना करता है) => pPItem (अंतिम सरणी देता है) वर्तमान पृष्ठ संख्या के आधार पर पोस्ट / टिप्पणियां)।

टिप्पणियाँ और चित्र ( टिप्पणियाँ और _images ) अलग-अलग गणना की जाती हैं, प्रकार और मालिक रिकॉर्ड द्वारा समूहीकृत।

गणना स्वचालित रूप से और केवल तब होती है जब संबंधित डेटा बदलता है, मध्यवर्ती डेटा लगातार मेमोरी में होता है। इस संबंध में, हम एक अप्रिय निष्कर्ष बनाते हैं - बड़ी मात्रा में जानकारी और / या इसके लगातार अद्यतन के लिए, बड़ी मात्रा में संसाधन खर्च किए जा सकते हैं।

कैश

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

 store.on('state', ({ changed, current }) => { Object.keys(changed).forEach(prop => { if (!prop.indexOf('_')) localStorage.setItem(prop, JSON.stringify(current[prop])) }) }) function loadState(state = {}) { for (let i = 0; i < localStorage.length; i++) { const prop = localStorage.key(i) const value = JSON.parse(localStorage.getItem(prop) || 'null') if (!!value && !prop.indexOf('_')) state[prop] = value } store.set(state) }

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

 async function cacheImages(newFiles) { const oldFiles = JSON.parse(localStorage.getItem('_files') || '[]') const cache = await caches.open('comico') oldFiles.forEach(file => { if (!~newFiles.indexOf(file)) { const [ id, type ] = file.split(':') cache.delete(`/img/${type}_${id}_sm.jpg`) }}) newFiles.forEach(file => { if (!~oldFiles.indexOf(file)) { const [ id, type ] = file.split(':'), src = `/img/${type}_${id}_sm.jpg` cache.add(new Request(src, { cache: 'no-cache' })) }}) }

फिर, आपको भ्रूण के व्यवहार को फिर से परिभाषित करने की आवश्यकता है ताकि फ़ाइल को सर्वर से कनेक्ट किए बिना कैशेस्टोरेज से लिया जाए। ऐसा करने के लिए, आपको ServiceWorker का उपयोग करना होगा। उसी समय, हम सर्वर के बाहर संचालन के लिए कैश की जाने वाली अन्य फ़ाइलों को कॉन्फ़िगर करेंगे:

 const CACHE = 'comico', FILES = [ '/', '/bundle.css', '/bundle.js' ] self.addEventListener('install', (e) => { e.waitUntil(caches.open(CACHE).then(cache => cache.addAll(FILES)) .then(() => self.skipWaiting())) }) self.addEventListener('fetch', (e) => { const r = e.request if (r.method !== 'GET' || !!~r.url.indexOf('/pub/') || !!~r.url.indexOf('/api/')) return if (!!~r.url.lastIndexOf('_sm.jpg') && e.request.cache !== 'no-cache') return e.respondWith(fromCache(r)) e.respondWith(toCache(r)) }) async function fromCache(request) { return await (await caches.open(CACHE)).match(request) || new Response(null, { status: 404 }) } async function toCache(request) { const response = await fetch(request).catch(() => fromCache(request)) if (!!response && response.ok) (await caches.open(CACHE)).put(request, response.clone()) return response }

यह थोड़ा अनाड़ी लगता है, लेकिन अपने कार्य करता है।

ग्राहक / इंटरफ़ेस

घटक संरचना:
index.html | main.js
== शीर्षलेख.html - में एक लोगो, स्थिति पट्टी, मुख्य मेनू, निचला नेविगेशन मेनू, टिप्पणी सबमिशन फ़ॉर्म होता है
== एक तरफ। html - सभी मोडल घटकों के लिए एक कंटेनर है
==== goodForm.html - एक विज्ञापन जोड़ने और संपादित करने के लिए फार्म
==== userForm.html - वर्तमान उपयोगकर्ता का फ़ॉर्म संपादित करें
====== tableForm.html - सारणीबद्ध डेटा दर्ज करने के लिए फ़ॉर्म का एक टुकड़ा
==== postForm.html - फोरम पोस्ट के लिए फार्म
==== login.html - लॉगिन / पंजीकरण फार्म
==== activity.html - वर्तमान उपयोगकर्ता को संबोधित टिप्पणियाँ प्रदर्शित करता है
==== goodImage.html - मुख्य और अतिरिक्त फोटो विज्ञापन देखें
== main.html - मुख्य सामग्री के लिए कंटेनर
==== goods.html - सूची या एकल घोषणा कार्ड
==== users.html - उपयोगकर्ताओं के लिए समान
==== posts.html - मुझे लगता है कि यह स्पष्ट है
==== cmnts.html - वर्तमान पोस्ट पर टिप्पणियों की सूची
====== cmntsPager.html - टिप्पणियों के लिए पृष्ठांकन

प्रत्येक घटक में, हम html टैग की संख्या को कम करने की कोशिश करते हैं।
हम केवल राज्य के एक संकेतक के रूप में कक्षाओं का उपयोग करते हैं।
हम स्टोर पर समान कार्य करते हैं (स्वेल्टे स्टोर गुण और विधियों को सीधे उपसर्ग '$' में जोड़कर घटकों से उपयोग किया जा सकता है)।
अधिकांश फ़ंक्शन उपयोगकर्ता घटना या कुछ गुणों के परिवर्तन की अपेक्षा करते हैं, राज्य डेटा में हेरफेर करते हैं, अपने काम के परिणाम को वापस राज्य में और अंत में सहेजते हैं। इस प्रकार, कोड का एक छोटा सा सुसंगतता और विस्तार हासिल किया जाता है।
संक्रमण और अन्य UI घटनाओं की स्पष्ट गति के लिए, हम अलग करते हैं, जहां तक संभव हो, पृष्ठभूमि में होने वाले डेटा के साथ छेड़छाड़ और इंटरफ़ेस से जुड़ी क्रियाएं, जो बदले में वर्तमान गणना परिणाम का उपयोग करता है, यदि आवश्यक हो, तो पुनर्निर्माण, बाकी काम कृपया फ्रेमवर्क द्वारा किया जाएगा।
भरे जाने वाले फॉर्म का डेटा स्थानीय इनपुट में प्रत्येक इनपुट के लिए संग्रहीत किया जाता है ताकि उनके नुकसान को रोका जा सके।
सभी घटकों में, हम अपरिवर्तनीय मोड का उपयोग करते हैं जिसमें संपत्ति-ऑब्जेक्ट को केवल तभी माना जाता है जब कोई नया लिंक प्राप्त होता है, चाहे फ़ील्ड में परिवर्तन हो, इस प्रकार कोड की मात्रा में एक छोटी सी वृद्धि के कारण हमारे अनुप्रयोगों को थोड़ा गति देता है।

ग्राहक / प्रबंधन

कीबोर्ड का उपयोग करने को नियंत्रित करने के लिए, हम निम्नलिखित संयोजनों का उपयोग करते हैं:
Alt + s / Alt + a - रिकॉर्ड के पृष्ठ को आगे / पीछे स्विच करता है, एक रिकॉर्ड के लिए टिप्पणियों का पृष्ठ स्विच करता है।
Alt + w / Alt + q - अगले / पिछले रिकॉर्ड पर ले जाता है (यदि कोई हो), सूची मोड में काम करता है, एकल रिकॉर्ड और छवि दृश्य
Alt + x / Alt + z - पृष्ठ को नीचे / ऊपर स्क्रॉल करता है। छवि दृश्य में, आगे / पीछे छवियों को टॉगल करता है
एस्केप - मोडल विंडो को बंद कर देता है, यदि खुला है, तो सूची में वापस आ जाता है, यदि कोई एकल प्रविष्टि खुली है, तो मोड में खोज प्रविष्टि को रद्द कर देता है
Alt + c - वर्तमान मोड के आधार पर खोज या टिप्पणी क्षेत्र पर केंद्रित है
Alt + v - एकल विज्ञापन के लिए फ़ोटो दृश्य मोड सक्षम / अक्षम करें
Alt + r - एक अधिकृत उपयोगकर्ता के लिए आने वाली टिप्पणियों की सूची को खोलता / बंद करता है
Alt + t - लाइट / डार्क थीम को टॉगल करता है
Alt + g - विज्ञापनों की सूची
Alt + u - उपयोगकर्ता
Alt + p - मंच
मुझे पता है कि कई ब्राउज़रों में इन संयोजनों का उपयोग ब्राउज़र द्वारा ही किया जाता है, लेकिन मेरे क्रोम के लिए मैं कुछ और सुविधाजनक नहीं बना सकता। मुझे आपके सुझावों पर खुशी होगी।

कीबोर्ड के अलावा, आप निश्चित रूप से ब्राउज़र कंसोल का उपयोग कर सकते हैं। उदाहरण के लिए, store.goBack () , store.nextPage () , store.prevPage () , store.nextItem () , store.prevItem () , store.search (stringValue) , store.checkUpdate ('goods') || || users '||' posts '||' files '||' cmnts ') - क्या नाम का अर्थ है? store.get ()। comments और store.get () ._ छवियां - समूहीकृत फ़ाइलें और टिप्पणियां लौटाता है; store.get ()। नजरअंदाज कर दिया और store.get ()। scribedItems रिकॉर्ड की सूची है जिसे आप नजरअंदाज करते हैं और ट्रैक करते हैं। सभी मध्यवर्ती और परिकलित डेटा की एक पूरी सूची store.get () से उपलब्ध है। मुझे नहीं लगता कि किसी को भी इसकी गंभीरता से आवश्यकता हो सकती है, लेकिन, उदाहरण के लिए, उपयोगकर्ता द्वारा रिकॉर्ड को फ़िल्टर करना और डिलीट करना मुझे कंसोल से काफी सुविधाजनक लग रहा था।

निष्कर्ष

यह वह जगह है जहां आप परियोजना के साथ अपने परिचित को समाप्त कर सकते हैं; आप स्रोत कोड में अधिक विवरण पा सकते हैं। नतीजतन, हमें एक बहुत तेज और कॉम्पैक्ट एप्लिकेशन मिला, अधिकांश सत्यापनकर्ताओं, सुरक्षा, गति, उपलब्धता, आदि चेकर्स में, यह लक्षित अनुकूलन के बिना अच्छे परिणाम दिखाता है।
मैं समुदाय की राय जानना चाहूंगा कि प्रोटोटाइप में उपयोग किए जाने वाले अनुप्रयोगों के आयोजन के लिए दृष्टिकोण कैसे उचित थे, क्या नुकसान हो सकते हैं, आप मौलिक रूप से अलग तरीके से क्या लागू करेंगे?
स्रोत कोड, नमूना स्थापना निर्देश और डेमो यहां (कृपया) ~~vandals~~ आपराधिक कोड के ढांचे में परीक्षण करने के लिए)।

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

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

एसैसेटिक वेब: गो और जेएस पर प्रोटोटाइप पिस्सू बाजार