jQuery মোবাইল 1.4 আপডেট:
আমার মূল নিবন্ধটি পৃষ্ঠা হ্যান্ডলিংয়ের পুরানো উপায়ের জন্য উদ্দিষ্ট ছিল, মূলত jQuery মোবাইল 1.4 এর আগে সমস্ত কিছু। হ্যান্ডলিংয়ের পুরানো পদ্ধতিটি এখন অবহিত করা হয়েছে এবং এটি jQuery মোবাইল 1.5 সহ (সহ) সক্রিয় থাকবে, সুতরাং আপনি নীচে উল্লিখিত সমস্ত কিছুই কমপক্ষে পরের বছর এবং jQuery মোবাইল 1.6 অবধি ব্যবহার করতে পারবেন।
পেজিনাইট সহ পুরানো ইভেন্টগুলির আর অস্তিত্ব নেই, সেগুলিকে পেজ কনটেনার উইজেট দিয়ে প্রতিস্থাপন করা হয় । পেজিনিট সম্পূর্ণরূপে মুছে ফেলা হয় এবং আপনি তার পরিবর্তে পেজক্রিয়েট ব্যবহার করতে পারেন , ইভেন্টটি একই ছিল এবং এটি পরিবর্তন হবে না।
আপনি যদি পৃষ্ঠার ইভেন্ট হ্যান্ডলিংয়ের নতুন উপায়ে আগ্রহী হন তবে এখানে একবার নজর দিন , অন্য কোনও ক্ষেত্রে নিবন্ধটি অবিরত অবরুদ্ধ মনে করুন। আপনি jQuery মোবাইল 1.4 + ব্যবহার করছেন এমনকি আপনার এই উত্তরটি পড়া উচিত, এটি পৃষ্ঠার ইভেন্টগুলির বাইরে চলে যায় যাতে আপনি সম্ভবত প্রচুর দরকারী তথ্য পাবেন find
পুরানো সামগ্রী:
এই নিবন্ধটি আমার ব্লগের অংশ হিসাবে এখানে পাওয়া যাবে ।
$(document).on('pageinit') বনাম $(document).ready()
আপনি jQuery শিখতে প্রথম জিনিসটি হ'ল $(document).ready()ফাংশনের অভ্যন্তরে কোডটি কল করা যাতে ডম লোড হওয়ার সাথে সাথে সমস্ত কিছু কার্যকর হয়ে যায়। যাইহোক, jQuery মোবাইলে , নেভিগেট করার সাথে সাথে অজাক্স প্রতিটি পৃষ্ঠার বিষয়বস্তু DOM এ লোড করতে ব্যবহৃত হয়। এর কারণে $(document).ready()আপনার প্রথম পৃষ্ঠাটি লোড হওয়ার আগেই এটি ট্রিগার করবে এবং পৃষ্ঠা ম্যানিপুলেশনটির উদ্দেশ্যেযুক্ত প্রতিটি কোড একটি পৃষ্ঠা রিফ্রেশের পরে কার্যকর করা হবে। এটি একটি খুব সূক্ষ্ম বাগ হতে পারে। কিছু সিস্টেমে এটি প্রদর্শিত হতে পারে যে এটি সূক্ষ্মভাবে কাজ করে, তবে অন্যদের জন্য এটি অনিয়মিত হতে পারে, অদ্ভুততার পুনরাবৃত্তি করা কঠিন।
ক্লাসিক jQuery বাক্য গঠন:
$(document).ready(function() {
});
এই সমস্যাটি সমাধান করতে (এবং আমাকে বিশ্বাস করুন এটি একটি সমস্যা) jQuery মোবাইল বিকাশকারীরা পৃষ্ঠাগুলি ইভেন্ট তৈরি করেছে। সংক্ষেপে পৃষ্ঠা ইভেন্টগুলি পৃষ্ঠা সম্পাদনের একটি নির্দিষ্ট পয়েন্টে ঘটানো ইভেন্টগুলি events এই পৃষ্ঠা ইভেন্টগুলির মধ্যে একটি হ'ল পেইজিনাইট ইভেন্ট এবং আমরা এটি এটির মতো ব্যবহার করতে পারি:
$(document).on('pageinit', function() {
});
আমরা আরও এগিয়ে যেতে পারি এবং ডকুমেন্ট সিলেক্টরের পরিবর্তে একটি পৃষ্ঠা আইডি ব্যবহার করতে পারি। ধরা যাক আমাদের আইডি সূচক সহ jQuery মোবাইল পৃষ্ঠা রয়েছে :
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<a href="#" data-role="button" id="test-button">Test button</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
কোডটি কার্যকর করতে যা কেবল সূচক পৃষ্ঠাতে উপলভ্য হবে আমরা এই বাক্য গঠনটি ব্যবহার করতে পারি:
$('#index').on('pageinit', function() {
});
পেজনিট ইভেন্টটি প্রতিবার পৃষ্ঠাটি লোড হওয়ার এবং প্রথমবারের জন্য প্রদর্শিত হওয়ার সময় কার্যকর করা হবে। পৃষ্ঠাটি ম্যানুয়ালি রিফ্রেশ না করা বা এজাক্স পৃষ্ঠা লোডিং বন্ধ না করা হলে এটি আর ট্রিগার করবে না। আপনি যখনই কোনও পৃষ্ঠাতে যান প্রতিটি বার কোডটি কার্যকর করতে চান তবে পৃষ্ঠাবিত্ত ইভেন্ট ইভেন্টটি ব্যবহার করা ভাল ।
এখানে একটি কার্যকারী উদাহরণ: http://jsfiddle.net/Gajotres/Q3Usv/ এই সমস্যাটি দেখানোর জন্য।
এই প্রশ্নে আরও কয়েকটি নোট। আপনি যদি 1 টি এইচটিএমএল একাধিক পৃষ্ঠাগুলি বা একাধিক এইচটিএমএল ফাইলের দৃষ্টান্ত ব্যবহার করছেন তবে তা আপনার কাস্টম জাভাস্ক্রিপ্ট পৃষ্ঠা হ্যান্ডলিংয়ের সমস্ত একটি পৃথক জাভাস্ক্রিপ্ট ফাইলের মধ্যে পৃথক করার পরামর্শ দেওয়া হচ্ছে। এটি আপনার কোডটিকে আরও উন্নত করতে পারে তবে আপনার একটি আরও ভাল কোড ওভারভিউ থাকবে, বিশেষত একটি jQuery মোবাইল অ্যাপ্লিকেশন তৈরি করার সময় note
এছাড়াও আরও একটি বিশেষ jQuery মোবাইল ইভেন্ট রয়েছে এবং এটি মোবাইলিনাইট বলে । যখন jQuery মোবাইল শুরু হয়, এটি ডকুমেন্ট অবজেক্টে একটি মোবাইলিনাইট ইভেন্টটি ট্রিগার করে। ডিফল্ট সেটিংস ওভাররাইড করতে, সেগুলি মোবাইলিনেটে আবদ্ধ করুন । মোবাইলিনাইট ব্যবহারের একটি ভাল উদাহরণ হ'ল অ্যাজাক্স পৃষ্ঠা লোডিং বন্ধ করা, বা ডিফল্ট অ্যাজাক্স লোডার আচরণ পরিবর্তন করা।
$(document).on("mobileinit", function(){
//apply overrides here
});
পৃষ্ঠার ইভেন্টগুলি স্থানান্তর ক্রম
প্রথমে সমস্ত ইভেন্ট এখানে পাওয়া যাবে: http://api.jquerymobile.com/category/events/
আমাদের একটি পৃষ্ঠা A এবং একটি পৃষ্ঠা বি আছে তা বলি, এটি একটি আনলোড / লোড ক্রম:
পৃষ্ঠা বি - ইভেন্ট পৃষ্ঠাগুলি প্রস্তুত
পৃষ্ঠা বি - ইভেন্ট পৃষ্ঠা ক্রিয়েট
পৃষ্ঠা বি - ইভেন্ট পৃষ্ঠাগুলি
পৃষ্ঠা এ - ইভেন্ট পৃষ্ঠার পূর্বে
পৃষ্ঠা এ - ইভেন্ট পৃষ্ঠাম্রেভ
পৃষ্ঠা এ - ইভেন্ট পৃষ্ঠাহাইড
পৃষ্ঠা বি - ইভেন্ট পৃষ্ঠার প্রদর্শনী sh
পৃষ্ঠা বি - ইভেন্টের পৃষ্ঠা প্রদর্শনী
আরও ভাল পৃষ্ঠা ইভেন্টগুলি বোঝার জন্য এটি পড়ুন:
pagebeforeload, pageloadএবং pageloadfailedবহিরাগত পৃষ্ঠা লোড করা হলে তা বহিস্কার করা হয়pagebeforechange, pagechangeএবং pagechangefailedপৃষ্ঠা পরিবর্তন ইভেন্ট হয়। কোনও ব্যবহারকারী অ্যাপ্লিকেশনগুলির পৃষ্ঠাগুলির মধ্যে নেভিগেট করার সময় এই ইভেন্টগুলি বরখাস্ত করা হয়।pagebeforeshow, pagebeforehide, pageshowএবং pagehideপৃষ্ঠা রূপান্তরটি ঘটনা। এই ইভেন্টগুলি স্থানান্তরের আগে, সময় এবং পরে বরখাস্ত করা হয় এবং নাম দেওয়া হয়।pagebeforecreate, pagecreateএবং pageinitপৃষ্ঠা সূচনা জন্য হয়।pageremove ডিওএম থেকে কোনও পৃষ্ঠা সরানো হলে তা বরখাস্ত করা যায় এবং তারপরে পরিচালনা করা যায়
পৃষ্ঠা লোড করা জেএসফিডাল উদাহরণ: http://jsfiddle.net/Gajotres/QGnft/
যদি এজেএক্স সক্ষম না করা থাকে তবে কিছু ইভেন্ট নাও চালাতে পারে।
পৃষ্ঠা রূপান্তর প্রতিরোধ করুন
যদি কোনও কারণে পৃষ্ঠায় রূপান্তর কিছু শর্তে রোধ করা হয় তবে এই কোড দিয়ে এটি করা যেতে পারে:
$(document).on('pagebeforechange', function(e, data){
var to = data.toPage,
from = data.options.fromPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (from) from = '#' + from.attr('id');
if (from === '#index' && to === '#second') {
alert('Can not transition from #index to #second!');
e.preventDefault();
e.stopPropagation();
// remove active status on a button, if transition was triggered with a button
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus ui-btn');;
}
}
});
এই উদাহরণটি যে কোনও ক্ষেত্রেই কাজ করবে কারণ এটি প্রতিটি পৃষ্ঠার স্থানান্তরের ভিক্ষাবৃত্তিতে ট্রিগার করবে এবং পৃষ্ঠার স্থানান্তর ঘটার আগে পৃষ্ঠা পরিবর্তন রোধ করবে এটি সবচেয়ে গুরুত্বপূর্ণ।
এখানে একটি কার্যকারী উদাহরণ:
একাধিক ইভেন্টের বাঁধাই / ট্রিগার রোধ করুন
jQuery Mobileক্লাসিক ওয়েব অ্যাপ্লিকেশনগুলির চেয়ে আলাদা উপায়ে কাজ করে। আপনি যখন কোনও পৃষ্ঠায় প্রতিবার পরিদর্শন করেছেন তখন আপনি কীভাবে আপনার ইভেন্টগুলিকে বাঁধতে পেরেছিলেন তার উপর নির্ভর করে এটি ইভেন্টগুলিকে বার বার সংযুক্ত করবে। এটি কোনও ত্রুটি নয়, কেবল jQuery Mobileএটির পৃষ্ঠাগুলি পরিচালনা করে। উদাহরণস্বরূপ, এই কোড স্নিপেট একবার দেখুন:
$(document).on('pagebeforeshow','#index' ,function(e,data){
$(document).on('click', '#test-button',function(e) {
alert('Button click');
});
});
ওয়ার্কিং জেএসফিডাল উদাহরণ: http://jsfiddle.net/Gajotres/CCfL4/
প্রতিবার আপনি পৃষ্ঠা # ইন্ডেক্স ক্লিক ক্লিক করুন ইভেন্টটি বোতাম # টেস্ট-বোতামে আবদ্ধ হতে চলেছে । পৃষ্ঠা 1 থেকে পৃষ্ঠা 2 এ সরানো এবং বেশ কয়েকবার ফিরে এটি পরীক্ষা করুন। এই সমস্যাটি রোধ করার কয়েকটি উপায় রয়েছে:
সমাধান ঘ
pageinitইভেন্টগুলিকে আবদ্ধ করতে সর্বোত্তম সমাধান হ'ল। আপনি যদি কোনও অফিসিয়াল ডকুমেন্টেশন ঘুরে দেখেন তবে আপনি জানতে পারবেন যে এটি pageinitকেবলমাত্র ডকুমেন্ট প্রস্তুতের মতোই কেবল একবার ট্রিগার করবে, সুতরাং ইভেন্টগুলি পুনরায় আবদ্ধ হওয়ার কোনও উপায় নেই। এটি সেরা সমাধান কারণ অফ পদ্ধতিতে ইভেন্টগুলি সরানোর সময় আপনার যেমন ওভারহেড প্রক্রিয়াজাতকরণ করেন না।
ওয়ার্কিং জেএসফিডাল উদাহরণ: http://jsfiddle.net/Gajotres/AAFH8/
এই কার্যনির্বাহী সমাধানটি পূর্ববর্তী সমস্যাযুক্ত উদাহরণের ভিত্তিতে তৈরি করা হয়েছে।
সমাধান 2
ইভেন্টটিকে আবদ্ধ করার আগে এটি সরান:
$(document).on('pagebeforeshow', '#index', function(){
$(document).off('click', '#test-button').on('click', '#test-button',function(e) {
alert('Button click');
});
});
কার্যকারী জেএসফিডাল উদাহরণ: http://jsfiddle.net/Gajotres/K8YmG/
সমাধান 3
এই জাতীয় একটি jQuery ফিল্টার নির্বাচনকারী ব্যবহার করুন:
$('#carousel div:Event(!click)').each(function(){
//If click is not bind to #carousel div do something
});
কারণ ঘটনা ফিল্টার কর্মকর্তা jQuery এর কাঠামোর অংশ নয় তা এখানে পাওয়া যাবে: http://www.codenothing.com/archives/2009/event-filter/
সংক্ষেপে, গতি যদি আপনার প্রধান উদ্বেগ হয় তবে সলিউশন 2 সলিউশন 1 এর চেয়ে অনেক ভাল।
সমাধান 4
একটি নতুন, সম্ভবত তাদের সবার মধ্যে একটি সহজ।
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#test-button',function(e) {
if(e.handled !== true) // This will prevent event triggering more than once
{
alert('Clicked');
e.handled = true;
}
});
});
ওয়ার্কিং জেএসফিডাল উদাহরণ: http://jsfiddle.net/Gajotres/Yerv9/
থেকে Tnx sholsinger এই সমাধান জন্য: http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/
পেজ চেঞ্জ ইভেন্ট ইভেন্টটি - দুবার ট্রিগার
কখনও কখনও পৃষ্ঠাগুলি ইভেন্টটি দু'বার ট্রিগার করতে পারে এবং এর আগে উল্লিখিত সমস্যাটির সাথে কোনও সম্পর্ক নেই।
টোপেজ যখন কোন jQuery বর্ধিত DOM অবজেক্ট না হয় তখন পেজবরেজইঞ্জ ইভেন্টটি দুবার ঘটে যাওয়ার কারণটি চেঞ্জপেজে পুনরাবৃত্ত কলের কারণে ঘটে। এই পুনরাবৃত্তি বিপজ্জনক, কারণ বিকাশকারীকে ইভেন্টের মধ্যে টোপেজ পরিবর্তন করার অনুমতি দেওয়া হয়। যদি বিকাশকারী ধারাবাহিকভাবে পেজকে সেট করে রাখে পৃষ্ঠপরিবর্তন ইভেন্ট হ্যান্ডলারের মধ্যে, এটি কোনও বস্তু ছিল কিনা তা বিবেচনা না করেই অসীম পুনরাবৃত্তির লুপটি আসবে। পেজলোড ইভেন্টটি নতুন পৃষ্ঠাকে ডেটা অবজেক্টের পৃষ্ঠা সম্পত্তি হিসাবে পাস করে (এটি ডকুমেন্টেশনে যুক্ত করা উচিত, এটি বর্তমানে তালিকাভুক্ত নয়)। পৃষ্ঠা লোড ইভেন্টটি লোড হওয়া পৃষ্ঠাটি অ্যাক্সেস করতে ব্যবহার করা যেতে পারে।
কথায় কথায় এটি ঘটছে কারণ আপনি পেজ চেঞ্জের মাধ্যমে অতিরিক্ত পরামিতি প্রেরণ করছেন।
উদাহরণ:
<a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#care-plan-view?id=9e273f31-2672-47fd-9baa-6c35f093a800&name=Sat"><h3>Sat</h3></a>
এই সমস্যার সমাধানের জন্য পৃষ্ঠা ইভেন্টস রূপান্তর ক্রমের তালিকাভুক্ত কোনও পৃষ্ঠা ইভেন্ট ব্যবহার করুন ।
পৃষ্ঠা পরিবর্তন টাইমস
উল্লিখিত হিসাবে, আপনি যখন একটি jQuery মোবাইল পৃষ্ঠা থেকে অন্যটিতে পরিবর্তন করেন, সাধারণত হয় অন্য কোনও jQuery মোবাইল পৃষ্ঠার লিঙ্কে ক্লিক করার মাধ্যমে যা ইতিমধ্যে ডিওমে উপস্থিত রয়েছে বা ম্যানুয়ালি $ .Momot.changePage কল করে, বেশ কয়েকটি ইভেন্ট এবং পরবর্তী ক্রিয়াকলাপ ঘটে। উচ্চ স্তরে নিম্নলিখিত ক্রিয়াগুলি ঘটে:
- একটি পৃষ্ঠা পরিবর্তন প্রক্রিয়া শুরু হয়েছে
- একটি নতুন পৃষ্ঠা লোড করা হয়
- এই পৃষ্ঠার সামগ্রীটি "বর্ধিত" (স্টাইলযুক্ত)
- বিদ্যমান পৃষ্ঠা থেকে নতুন পৃষ্ঠায় একটি রূপান্তর (স্লাইড / পপ / ইত্যাদি) ঘটে
এটি একটি গড় পৃষ্ঠা রূপান্তর মানদণ্ড:
পৃষ্ঠা লোড এবং প্রক্রিয়াজাতকরণ: 3 এমএস
পৃষ্ঠা বর্ধন: 45 এমএস
ট্রানজিশন: 604 এমএস
মোট সময়: 670 এমএস
এই মানগুলি মিলি সেকেন্ডে রয়েছে।
সুতরাং আপনি দেখতে পাচ্ছেন একটি রূপান্তর ইভেন্ট প্রায় 90% বাস্তবায়নের সময় খাচ্ছে।
পৃষ্ঠা রূপান্তরগুলির মধ্যে ডেটা / পরামিতিগুলি ম্যানিপুলেশন
পৃষ্ঠা রূপান্তরের সময় একটি পৃষ্ঠা থেকে অন্য পৃষ্ঠায় একটি পরামিতি / গুলি পাঠানো সম্ভব। এটি কয়েকটি উপায়ে করা যেতে পারে।
তথ্যসূত্র: https://stackoverflow.com/a/13932240/1848600
সমাধান 1:
আপনি চেঞ্জপেজ সহ মানগুলি পাস করতে পারেন:
$.mobile.changePage('page2.html', { dataUrl : "page2.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true });
এবং তাদের এইভাবে পড়ুন:
$(document).on('pagebeforeshow', "#index", function (event, data) {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', "#index",function () {
$(document).on('click', "#changePage",function () {
$.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
});
});
$(document).on('pagebeforeshow', "#second",function () {
var parameters = $(this).data("url").split("?")[1];;
parameter = parameters.replace("parameter=","");
alert(parameter);
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<a data-role="button" id="changePage">Test</a>
</div> <!--content-->
</div><!--page-->
</body>
</html>
second.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div> <!--content-->
</div><!--page-->
</body>
</html>
সমাধান 2:
অথবা আপনি স্টোরেজ উদ্দেশ্যে একটি স্থির জাভাস্ক্রিপ্ট অবজেক্ট তৈরি করতে পারেন। পৃষ্ঠা লোডিংয়ের জন্য যতক্ষণ অ্যাজ্যাক্স ব্যবহৃত হয় (এবং পৃষ্ঠাটি কোনওভাবেই পুনরায় লোড করা হয় না) যে অবজেক্টটি সক্রিয় থাকবে।
var storeObject = {
firstname : '',
lastname : ''
}
উদাহরণ: http://jsfiddle.net/Gajotres/9KKbx/
সমাধান 3:
আপনি আগের পৃষ্ঠা থেকে ডেটা অ্যাক্সেস করতে পারেন:
$(document).on('pagebeforeshow', '#index',function (e, data) {
alert(data.prevPage.attr('id'));
});
prevPage অবজেক্টটি একটি সম্পূর্ণ পূর্ববর্তী পৃষ্ঠা ধারণ করে।
সমাধান 4:
শেষ সমাধান হিসাবে আমাদের কাছে লোকালস্টোরেজের একটি নিফটি এইচটিএমএল বাস্তবায়ন রয়েছে। এটি শুধুমাত্র এইচটিএমএল 5 ব্রাউজারগুলিতে (অ্যান্ড্রয়েড এবং আইওএস ব্রাউজার সহ) কাজ করে তবে সমস্ত সঞ্চিত ডেটা পৃষ্ঠা রিফ্রেশের মাধ্যমে অবিচল থাকে।
if(typeof(Storage)!=="undefined") {
localStorage.firstname="Dragan";
localStorage.lastname="Gaic";
}
উদাহরণ: http://jsfiddle.net/Gajotres/J9NTr/
সম্ভবত সেরা সমাধান তবে এটি আইওএস 5 এক্স এর কয়েকটি সংস্করণে ব্যর্থ হবে এটি একটি ভাল ত্রুটি।
.live()/ .bind()/ ব্যবহার করবেন না.delegate()
আমি উল্লেখ করতে ভুলে গেছি (এবং আমাকে স্মরণ করিয়ে দেওয়ার জন্য tnx andleer ) ইভেন্ট বন্ডিং / আনবাইন্ডিং, লাইভ / ডাই এবং বাইন্ড / আনবাইন্ডকে অবমূল্যায়িত করা / চালু করার জন্য ব্যবহার করুন।
সংস্করণ 1.3 সংস্করণে এপিআইতে এটি চালু করার সময় jQuery এর .live () পদ্ধতিটি গডসেন্ড হিসাবে দেখা হত। একটি সাধারণ জিকুয়ের অ্যাপ্লিকেশনটিতে প্রচুর ডিওএম ম্যানিপুলেশন হতে পারে এবং উপাদানগুলি আসার সাথে সাথে হুক এবং আনহুক করা খুব ক্লান্তিকর হয়ে উঠতে পারে। .live()পদ্ধতি এটা সম্ভব তার নির্বাচক উপর ভিত্তি করে অ্যাপের জীবনের জন্য একটি ইভেন্ট হুক তৈরি। দুর্দান্ত? ভুল, .live()পদ্ধতিটি অত্যন্ত ধীর। .live()পদ্ধতি আসলে ডকুমেন্ট অবজেক্ট তার ঘটনা, আঙ্গুলসমূহ যার মানে উপাদান থেকে ইভেন্ট আবশ্যক বুদ্বুদ আপ যে ঘটনা উত্পন্ন হওয়া পর্যন্ত নথি ছুঁয়েছে। এটি আশ্চর্যজনকভাবে সময় সাপেক্ষ হতে পারে।
এটি এখন অবচয় করা হয়েছে। JQuery টিমের লোকেরা আর এর ব্যবহারের পরামর্শ দেয় না এবং আমিও করি না though যদিও ঘটনা হুক করা এবং আনহুক করা বিরক্তিকর হতে পারে তবে আপনার কোডটি .live()পদ্ধতি ছাড়া এটির চেয়ে অনেক দ্রুত হবে।
পরিবর্তে .live()আপনার ব্যবহার করা উচিত .on()। .on()লাইভ () এর চেয়ে প্রায় 2-3x গতিযুক্ত । এই ইভেন্টটির বাধ্যবাধক মানদণ্ডটি একবার দেখুন: http://jsperf.com/jquery-live-vs-delegate-vs-on/34 , সেখান থেকে সবকিছু পরিষ্কার হয়ে যাবে।
মাপকাঠিতে:
JQuery মোবাইল পৃষ্ঠার ইভেন্টগুলির বেঞ্চমার্কিংয়ের জন্য একটি দুর্দান্ত স্ক্রিপ্ট রয়েছে । এখানে পাওয়া যাবে: https://github.com/jquery/jquery-mobile/blob/master/tools/page-change-time.js । তবে আপনি এটির সাথে কিছু করার আগে আমি আপনাকে এটির alertবিজ্ঞপ্তি সিস্টেমটি মুছে ফেলার পরামর্শ দিচ্ছি (প্রতিটি "পরিবর্তন পৃষ্ঠা" অ্যাপ্লিকেশনটি থামিয়ে এই ডেটা আপনাকে দেখায়) এবং এটি console.logকার্যকরীতে পরিবর্তন করে ।
মূলত এই স্ক্রিপ্টটি আপনার পৃষ্ঠাগুলির সমস্ত ইভেন্ট লগ করবে এবং আপনি এই নিবন্ধটি মনোযোগ সহকারে পড়লে (পৃষ্ঠা ইভেন্টের বিবরণ) আপনি জেনে যাবেন যে পৃষ্ঠাউর্ধ্বকরণ, পৃষ্ঠা রূপান্তরের জন্য jQm কত সময় ব্যয় করেছে ....
চূড়ান্ত নোট
সর্বদা, এবং আমার অর্থ সর্বদা সরকারী jQuery মোবাইল ডকুমেন্টেশন পড়ুন। এটি সাধারণত আপনাকে প্রয়োজনীয় তথ্য সরবরাহ করবে এবং অন্য কয়েকটি ডকুমেন্টেশনের বিপরীতে এটি যথেষ্ট ভাল, যথেষ্ট ব্যাখ্যা এবং কোড উদাহরণ সহ।
পরিবর্তন করুন:
- 30.01.2013 - একাধিক ইভেন্ট ট্রিগার প্রতিরোধের একটি নতুন পদ্ধতি যুক্ত করেছে
- 31.01.2013 - পৃষ্ঠা স্থানান্তরগুলির মধ্যে অধ্যায় ডেটা / প্যারামিটারের কারসাজির জন্য আরও ভাল ব্যাখ্যা যুক্ত করা হয়েছে
- 03.02.2013 - পৃষ্ঠায় স্থানান্তরগুলির মধ্যে অধ্যায় ডেটা / পরামিতিগুলির ম্যানিপুলেশন অধ্যায়টিতে নতুন সামগ্রী / উদাহরণ যুক্ত করা হয়েছে
- 22.05.2013 - পৃষ্ঠা রূপান্তর / পরিবর্তন প্রতিরোধের জন্য একটি সমাধান যুক্ত করা হয়েছে এবং অফিসিয়াল পৃষ্ঠাগুলি এপিআই ডকুমেন্টেশনে লিঙ্ক যুক্ত করেছে
- 18.05.2013 - একাধিক ইভেন্টের বাইন্ডিংয়ের বিরুদ্ধে আরও একটি সমাধান যুক্ত করা হয়েছে