मोबाइल वेब विकास: इशारे, चौखटे, संख्या

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

jQuery और मोबाइल डिवाइस।

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

इससे बचने के लिए, आप jQuery सैटेलाइट - jQuery मोबाइल द्वारा समर्थित नल घटनाओं का उपयोग कर सकते हैं। लेकिन jQuery Mobile भी सबसे अच्छा समाधान नहीं है। सबसे पहले, यह आकार में बहुत बड़ा है, जैसे jQuery और यहां तक ​​कि सेवाएँ जो आपको jQuery के कुछ हिस्सों को काटने की अनुमति देती हैं, इसके आकार को पर्याप्त रूप से कम करने में मदद नहीं करती हैं। दूसरा बड़ा दोष इशारा समर्थन की कमी है।

सिद्धांत में इशारे।

WebKit (iOS, Android) का मोबाइल संस्करण निम्नलिखित घटनाओं का समर्थन करता है:

• टचस्टार्ट - छूने पर ट्रिगर। एनालॉग - माउसडाउन
• टचमोव - जब कोई स्पर्श चलता है तो ट्रिगर हो जाता है। एनालॉग - माउसमूव
• टचेंड - टैपिंग समाप्त होने पर ट्रिगर किया गया। एनालॉग - माउसअप
• टचस्कैनेल - जब टच बाधित होता है (उपयोगकर्ता ने स्क्रीन लॉक की, होम बटन दबाया, स्क्रीन ओरिएंटेशन बदल दिया)

तो, svayp को स्वाइप करने के लिए हमें निम्नलिखित कोड की आवश्यकता होगी:

var touchstartX = 0; var touchstartY = 0; var touchendX = 0; var touchendY = 0; var gesuredZone = document.getElementById('gesuredZone'); gesuredZone.addEventListener('touchstart', function(event) { touchstartX = event.screenX; touchstartY = event.screenY; }, false); gesuredZone.addEventListener('touchend', function(event) { touchendX = event.screenX; touchendY = event.screenY; handleGesure(); }, false); function handleGesure() { var swiped = 'swiped: '; if (touchendX < touchstartX) { alert(swiped + 'left!'); } if (touchendX > touchstartX) { alert(swiped + 'right!'); } if (touchendY < touchstartY) { alert(swiped + 'down!'); } if (touchendY > touchstartY) { alert(swiped + 'left!'); } if (touchendY == touchstartY) { alert('tap!'); } } 

एक कार्य उदाहरण:
http://jsfiddle.net/sagens/zNvtL/2/


जेस्चर प्रोसेसिंग की जटिलता के कारण, आप jQuery विकल्प को संदर्भित कर सकते हैं जो इशारों का समर्थन करते हैं

JQuery के विकल्प

विकल्पों की तलाश में, निम्नलिखित आवश्यकताओं को सामने रखा जा सकता है:

1. डोम हेरफेर
2. इशारे से संभालना
3. अतुल्यकालिक अनुरोध
4. छोटा आकार

फ़्रेमवर्क।

Quo.JS.

• फ्रेमवर्क से लिंक: http://quojs.tapquo.com/
• समर्थित कार्यक्रम: टैप, सिंगल टैप, डबल टैब, होल्ड, 2xFersers टैप, 2xFersers डबल टैप, स्वाइप अप, स्वाइप राइट, स्वाइप डाउन, स्वाइप डाउन, लेफ्ट, स्वाइप, ड्रैग, रोटेट लेफ्ट, रोटेट राइट, रोटेट, पिंच आउट। पिंच, फिंगर्स
• फ्रेमवर्क का आकार: 18KB न्यूनतम।
• पेशेवरों:
  
  1. घटनाओं के अलावा, यह CSS चयनकर्ताओं का समर्थन करता है, विशेषताओं के साथ काम करते हुए, DOM और AJAX प्रश्नों के साथ काम करते हुए jQuery समकक्षों के समान है
  2. काम करने के लिए अतिरिक्त कुछ नहीं चाहिए
  3. चौखटे का छोटा आकार
  4. संघर्षों से बचने के लिए $ के बजाय $ $ का उपयोग करने के अलावा jQuery के साथ माइग्रेट करना बहुत सरल है, लेकिन यह आसानी से इलाज किया जाता है
• विपक्ष:
  
  1. कोई दस्तावेज उपलब्ध नहीं है
  
  

Zepto.JS

• फ्रेमवर्क से लिंक: http://zeptojs.com
• समर्थित ईवेंट: टैप, सिंगल टैप, डबल टैप, लॉन्ग टैप, स्वाइप, स्वाइपलेट, स्वाइपराइट, स्वाइपअप, स्वाइपडाउन
• फ्रेमवर्क का आकार: 11KB न्यूनतम।
• पेशेवरों:
  
  1. मोबाइल विकास पर केंद्रित एक रूपरेखा। इसमें jQuery जैसी शैली भी है और कोड jQuery के साथ लगभग संगत है
  2. केवल आधुनिक ब्राउज़रों का समर्थन करता है
• विपक्ष:
  
  1. ड्रैग और मल्टीटच का समर्थन नहीं करता है *

पुस्तकालयों

Hammer.js

• पुस्तकालय से लिंक: http://eightmedia.imtqy.com/hammer.js
• समर्थित इवेंट: होल्ड, टैप, डबलटैप, ड्रैग, ड्रैगस्टार्ट, ड्रैगअप, ड्रैगडाउन, ड्रैगडेल, ड्रैगफेल, ड्रैग, स्वाइप, स्वाइपडाउन, स्वाइपलेट, स्विपराइट, ट्रांसफॉर्मस्टार्ट, ट्रांसफॉर्मेंड, रोटेट, पिंच, पिनचिन, पिंचआउट, टच, रिलीज
• लाइब्रेरी का आकार: 13KB न्यूनतम।
• पेशेवरों:
  
  1. जटिल इशारों पर नज़र रखने के लिए टच और रिलीज़ सहित बड़ी संख्या में समर्थित इशारे
  2. JQuery के लिए एक प्लगइन है
  3. प्लगइन Zepto.JS के साथ पूरी तरह से संगत है
• विपक्ष:
  
  1. आकार। 13 केबी - केवल इशारों के लिए बहुत अधिक
  
  

विदूषक

• पुस्तकालय से लिंक: https://github.com/plainview/Jester
• समर्थित ईवेंट: टैप, डबल टैप, स्वाइप, फ्लिक, पिंच, पिंक एरो, पिंच विडेन, पिंच एंड
• पुस्तकालय का आकार: 17KB न्यूनतम।
• पेशेवरों:
  
  1. स्टैंडअलोन लाइब्रेरी
• विपक्ष:
  
  1. गुम मल्टीटच * और खींचें
  
  
  

Thumbs.JS

• पुस्तकालय से लिंक: http://mwbrooks.imtqy.com/thumbs.js/
• सपोर्टेड इवेंट्स: टचस्टार्ट, टचेंड, टचमोव
• पुस्तकालय का आकार: 612B न्यूनतम।
• पेशेवरों:
  
  1. स्टैंडअलोन लाइब्रेरी
  2. छोटा आकार
• विपक्ष:
  
  1. यह बस मानक घटनाओं टचस्टार्ट, टचेंड, टचमोव के लिए समर्थन जोड़ता है। इशारों को खुद से संसाधित करने की आवश्यकता है।
  
  
  

  * नोट:

  
  मानक एंड्रॉइड ब्राउज़र संस्करण 3.2 तक मल्टीटच का समर्थन नहीं करता है। इसका मतलब है कि एंड्रॉइड वर्जन पर PhoneGap में 3.2 तक चलने वाले किसी भी एप्लिकेशन पर मल्टीटच काम नहीं करेगा।
  
  

  तोते की गिनती करना

  
  कक्षा द्वारा आइटम का चयन करते समय, चीजें इस प्रकार हैं:
  
  
  कैसे कच्चे वर्ग को लागू किया जाता है रॉबर्ट निमन http://code.google.com/p/getelementsbyclassname/
  
  अधिक परिणाम: http://jsperf.com/zepto-vs-jquery-selectors/12
  
  

  कुल।

  
  जैसा कि आप नेताओं की समीक्षा से देख सकते हैं कि कोई नहीं है, और प्रत्येक मामले के लिए आपको कुछ अलग उपयोग करने की आवश्यकता है। चूंकि मेरा एप्लिकेशन इशारों का बहुत सक्रियता से उपयोग करता है और मुझे DOM को प्रबंधित करने और क्रॉस-डोमेन अनुरोध भेजने की आवश्यकता थी, इसलिए मैं Zepto.JS + Hammer.JS बंडल पर बस गया। अनुकूलता के मुद्दे नहीं थे