\n\t![\"CSS](\"http:\/\/farm4.staticflickr.com\/3707\/33108386100_0c62a1d607_o.png\")
<\/p>\n
\n\tN\u1ebfu b\u1ea1n có th\u1ec3 hi\u1ec3u \u0111\u01b0\u1ee3c các chi ti\u1ebft trong bi\u1ec3u \u0111\u1ed3 trên thì nh\u1eefng ph\u1ea7n còn l\u1ea1i c\u1ee7a jQuery <\/strong>c\u0169ng không có gì khó kh\u0103n \u0111\u1ec3 n\u1eafm b\u1eaft. Và m\u1ed9t khi \u0111ã bi\u1ebft \u0111\u01b0\u1ee3c nh\u1eefng nguyên t\u1eafc c\u01a1 b\u1ea3n nh\u1ea5t c\u1ee7a quy trình vi\u1ebft plugin jQuery thì h\u1ea7u nh\u01b0 không có ai mu\u1ed1n quay tr\u1edf v\u1ec1 v\u1edbi Javascript<\/strong>. D\u01b0\u1edbi \u0111ây là m\u1ed9t s\u1ed1 câu h\u1ecfi th\u01b0\u1eddng g\u1eb7p khi chúng ta b\u1eaft tay vào quá trình vi\u1ebft plugin jQuery:<\/p>\n \n\tNh\u01b0 t\u1ea5t c\u1ea3 chúng ta \u0111ã bi\u1ebft r\u1eb1ng, JavaScript là 1 ngôn ng\u1eef l\u1eadp trình h\u01b0\u1edbng \u0111\u1ed1i t\u01b0\u1ee3ng, và nó không phù h\u1ee3p \u0111\u1ec3 mô t\u1ea3 ho\u1eb7c trình di\u1ec5n nh\u1eefng tính n\u0103ng c\u1ee7a jQuery v\u1edbi nh\u1eefng ng\u01b0\u1eddi nào \u0111ó ch\u01b0a t\u1eebng nghiên c\u1ee9u v\u1ec1 khái ni\u1ec7m \u0111\u1ed1i t\u01b0\u1ee3ng trong JavaScript. \u0110\u1eb7c \u0111i\u1ec3m c\u01a1 b\u1ea3n v\u1ec1 thi\u1ebft k\u1ebf \u0111\u1ed1i t\u01b0\u1ee3ng trong JavaScript là khi ng\u01b0\u1eddi s\u1eed d\u1ee5ng khai báo ho\u1eb7c kh\u1edfi t\u1ea1o 1 function, thì function \u0111ó s\u1ebd là 1 class \u1edf ch\u1ebf \u0111\u1ed9 m\u1eb7c \u0111\u1ecbnh, và sau \u0111ó s\u1ebd \u0111\u01b0\u1ee3c dùng nh\u01b0 1 \u0111\u1ed1i t\u01b0\u1ee3ng.<\/p>\n \n\tBên c\u1ea1nh \u0111ó, chúng ta có th\u1ec3 s\u1eed d\u1ee5ng toán t\u1eed new \u0111\u1ec3 t\u1ea1o b\u1ea3n copy c\u1ee7a cùng class. Và nó ch\u1ec9 x\u1ea3y ra khi ng\u01b0\u1eddi dùng thay th\u1ebf b\u1eb1ng t\u1eeb khóa class quen thu\u1ed9c, JavaScript s\u1ebd \u01b0u tiên t\u1eeb khóa function h\u01a1n. L\u01b0u ý r\u1eb1ng class trong JavaScript có th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng d\u01b0\u1edbi d\u1ea1ng 1 class \u0111ã \u0111\u01b0\u1ee3c k\u1ebf th\u1eeba – inhertited<\/strong> t\u1eeb class khác (b\u1eb1ng cách th\u1ef1c hi\u1ec7n các prototype inheritance<\/strong>) ho\u1eb7c \u0111\u01b0\u1ee3c xây d\u1ef1ng chính xác nh\u01b0 1 function t\u1eeb trong mã ngu\u1ed3n. Nói theo cách ng\u1eafn g\u1ecdn thì trong JavaScript, t\u1ea5t c\u1ea3 \u0111\u1ec1u là \u0111\u1ed1i t\u01b0\u1ee3ng.<\/p>\n \n\tM\u1eb7t khác, function closures<\/strong> th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng v\u1edbi các event trong jQuery<\/strong>. 1 function closure<\/strong> \u0111i\u1ec3n hình chính là 1 lo\u1ea1i function không có tùy bi\u1ebfn ho\u1eb7c tên b\u1ea5t k\u1ef3, mà \u0111\u01a1n gi\u1ea3n ch\u1ec9 là 1 \u0111\u1ed1i t\u01b0\u1ee3ng c\u1ee7a function \u0111ó.<\/p>\n \n\tV\u1ec1 m\u1eb7t b\u1ea3n ch\u1ea5t, thì các \u0111\u1ed1i t\u01b0\u1ee3ng chính c\u1ee7a jQuery \u0111\u1ec1u \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a v\u1edbi t\u1eeb khóa function nh\u01b0 1 \u0111\u1ed1i t\u01b0\u1ee3ng v\u1edbi tên \u0111\u1ecbnh danh là $, và chúng còn t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi global function<\/strong>, ch\u1eb3ng h\u1ea1n nh\u01b0 window.$. Ví d\u1ee5, trong JavaScript<\/strong> khi chúng ta m\u1edf r\u1ed9ng m\u1ed9t \u0111\u1ed1i t\u01b0\u1ee3ng window nào \u0111ó (ph\u1ea3i có s\u1eb5n trong trình duy\u1ec7t t\u1eeb khâu thi\u1ebft k\u1ebf), ho\u1eb7c nói theo cách khác là gán thêm function member<\/strong> v\u1edbi (.) t\u1edbi \u0111\u1ed1i t\u01b0\u1ee3ng window<\/strong>, và c\u0169ng có ngh\u0129a r\u1eb1ng chúng ta có th\u1ec3 g\u1ecdi \u0111\u1ed1i t\u01b0\u1ee3ng \u0111ó b\u1eb1ng window.myobj();<\/strong> ho\u1eb7c \u0111\u01a1n gi\u1ea3n là myobj();<\/strong>. B\u1edfi vì v\u1edbi m\u1ed7i function \u0111\u01b0\u1ee3c g\u1eafn v\u1edbi object window<\/strong> \u0111\u1ec1u có th\u1ec3 \u0111\u01b0\u1ee3c g\u1ecdi t\u1eeb global scope trong toàn b\u1ed9 script. Còn t\u1eeb bên trong, các \u0111\u1ed1i t\u01b0\u1ee3ng c\u1ee7a jQuery s\u1ebd \u0111\u01b0\u1ee3c t\u1ea1o nh\u01b0 sau:<\/p>\n \n\tThu\u1eadt toán khai báo chính xác này cho phép ng\u01b0\u1eddi dùng d\u1ec5 dàng chuy\u1ec3n \u0111\u1ebfn các \u0111\u1ed1i t\u01b0\u1ee3ng jQuery chính qua tên jQuery ho\u1eb7c ký hi\u1ec7u $. Các b\u1ea1n c\u1ea7n bi\u1ebft r\u1eb1ng jQuery<\/strong>, window.jQuery<\/strong>, window.$<\/strong> ho\u1eb7c \u0111\u01a1n gi\u1ea3n ch\u1ec9 là $ \u0111\u1ec1u có th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng thay th\u1ebf cho nhau, b\u1edfi vì quá trình khai báo \u1edf ph\u1ea7n \u0111\u1ea7u c\u1ee7a b\u1ed9 mã, và nó có liên quan \u0111\u1ebfn toàn b\u1ed9 \u0111\u1ed1i t\u01b0\u1ee3ng.<\/p>\n \n\t1 \u0111i\u1ec3m n\u1eefa c\u1ea7n l\u01b0u ý là tham s\u1ed1 selector và context c\u1ee7a jQuery có ch\u1ee9c n\u0103ng ho\u1ea1t \u0111\u1ed9ng nh\u01b0 1 object bình th\u01b0\u1eddng. Selector <\/strong>th\u01b0\u1eddng là chu\u1ed7i – string <\/strong>có ch\u1ee9c n\u0103ng l\u1ef1a ch\u1ecdn 1 s\u1ed1 l\u01b0\u1ee3ng nh\u1ea5t \u0111\u1ecbnh các element t\u1eeb DOM <\/strong>– Document Object Model<\/strong>. Ho\u1eb7c c\u0169ng có th\u1ec3 là \u0111\u1ed1i t\u01b0\u1ee3ng this <\/strong>(self reference<\/strong>). Tham s\u1ed1 jQuery selector<\/strong> có th\u1ec3 ch\u1ea5p nh\u1eadn nhi\u1ec1u giá tr\u1ecb gi\u1ed1ng nhau trong tr\u01b0\u1eddng h\u1ee3p ng\u01b0\u1eddi dùng mu\u1ed1n s\u1eed d\u1ee5ng trong quá trình kh\u1edfi t\u1ea1o style c\u1ee7a CSS<\/strong>. Ví d\u1ee5, các b\u1ea1n hãy tham kh\u1ea3o quá trình g\u1ecdi \u0111\u1ed1i t\u01b0\u1ee3ng trong jQuery <\/strong>nh\u01b0 sau:<\/p>\n \n\t\t\/\/ Select an element with id: someId and insert dynamic html into it jQuery("#someId").html("<b>So Bold!<\/b>");<\/p>\n \n\t\t \n\tR\u1ea5t ng\u1eafn g\u1ecdn và \u0111\u01a1n gi\u1ea3n, các b\u1ea1n không còn ph\u1ea3i t\u1ef1 vi\u1ebft function <\/strong>document.getElementById v\u1ed1n r\u1ea5t d\u1ec5 gây nh\u1ea7m l\u1eabn. Ch\u1ec9 v\u1edbi 1 dòng l\u1ec7nh, jQuery s\u1ebd ch\u1ecdn t\u1ea5t c\u1ea3 các thành ph\u1ea7n theo yêu c\u1ea7u b\u1eb1ng các rà soát toàn b\u1ed9 DOM <\/strong>và áp d\u1ee5ng “hi\u1ec7u l\u1ef1c”. M\u1ed9t \u0111i\u1ec3m r\u1ea5t \u0111áng chú ý n\u1eefa c\u1ee7a jQuery là ch\u1ebf \u0111\u1ed9 t\u01b0\u01a1ng thích v\u1edbi t\u1ea5t c\u1ea3 các trình duy\u1ec7t hi\u1ec7n nay.<\/p>\n \n\t\tT\u1ea1i \u0111ây, chúng ta s\u1ebd b\u1eaft \u0111\u1ea7u v\u1edbi ví d\u1ee5 \u0111\u01a1n gi\u1ea3n v\u1ec1 plugin jQuery<\/strong> khá ph\u1ed5 bi\u1ebfn. C\u1ee5 th\u1ec3, khi m\u1edbi b\u1eaft \u0111\u1ea7u tìm hi\u1ec3u v\u1ec1 1 ngôn ng\u1eef l\u1eadp trình ho\u1eb7c n\u1ec1n t\u1ea3ng framework <\/strong>nào \u0111ó thì chúng ta \u0111\u1ec1u ph\u1ea3i bi\u1ebft \u0111\u01b0\u1ee3c \u0111i\u1ec3m m\u1ea5u ch\u1ed1t c\u1ee7a v\u1ea5n \u0111\u1ec1. Trong th\u1eddi \u0111i\u1ec3m jQuery ch\u01b0a xu\u1ea5t hi\u1ec7n, nh\u1eefng l\u1eadp trình viên JavaScript <\/strong>th\u01b0\u1eddng có thói quen th\u1ef1c thi các \u0111o\u1ea1n mã, ch\u1ee9c n\u0103ng quan tr\u1ecdng trong function<\/strong> window.onload<\/strong> nh\u01b0 minh h\u1ecda d\u01b0\u1edbi \u0111ây:<\/p>\n \n\t\tTh\u1ef1c ch\u1ea5t, \u0111o\u1ea1n mã trên ch\u1ec9 th\u1ef1c hi\u1ec7n nhi\u1ec7m v\u1ee5 ghi \u0111è lên event onload<\/strong> c\u1ee7a th\u1ebb <body><\/strong> trong HTML<\/strong>, ho\u1eb7c hi\u1ec3u nôm na r\u1eb1ng \u0111o\u1ea1n mã c\u1ee7a chúng ta ch\u1ec9 \u0111\u01b0\u1ee3c th\u1ef1c thi khi trang web hoàn t\u1ea5t quá trình t\u1ea3i. Trong nhi\u1ec1u tr\u01b0\u1eddng h\u1ee3p thì vi\u1ec7c này l\u1ea1i r\u1ea5t khó kh\u0103n vì có nh\u1eefng trang c\u1ea7n nhi\u1ec1u th\u1eddi gian \u0111\u1ec3 t\u1ea3i h\u1ebft n\u1ed9i dung, ho\u1eb7c quá trình t\u1ea3i b\u1ecb gián \u0111o\u1ea1n do c\u1ea5u trúc duy\u1ec7t d\u1eef li\u1ec7u khác nhau.<\/p>\n \n\t\tT\u1ea1i \u0111ây, chúng ta không mu\u1ed1n compile và th\u1ef1c thi b\u1ea5t k\u1ef3 \u0111o\u1ea1n mã JavaScript <\/strong>nào trên trang \u0111ang \u0111\u01b0\u1ee3c t\u1ea3i. Ki\u1ebfn trúc bên trong c\u1ee7a jQuery t\u1eadn d\u1ee5ng t\u1ed1i \u0111a \u01b0u \u0111i\u1ec3m c\u1ee7a event window.onload<\/strong>, nh\u01b0ng tr\u01b0\u1edbc \u0111ó c\u0169ng th\u1ef1c hi\u1ec7n vi\u1ec7c ki\u1ec3m tra toàn b\u1ed9 DOM \u0111ã \u0111\u01b0\u1ee3c t\u1ea3i hay ch\u01b0a, vì quy trình này r\u1ea5t quan tr\u1ecdng.<\/p>\n \n\t\tTuy nhiên, nh\u1eefng y\u1ebfu t\u1ed1 trên l\u1ea1i ch\u01b0a \u0111\u1ee7 \u0111\u1ec3 jQuery “bi\u1ebft” trang web \u0111ã \u0111\u01b0\u1ee3c t\u1ea3i hoàn t\u1ea5t hay ch\u01b0a, mà chúng ta ph\u1ea3i ch\u1eafc ch\u1eafn r\u1eb1ng DOM <\/strong>\u0111ã \u0111\u01b0\u1ee3c “xây d\u1ef1ng” \u0111\u1ea7y \u0111\u1ee7 – th\u1ef1c hi\u1ec7n b\u1eb1ng cách “l\u1eafng nghe” tín hi\u1ec7u DOMContentLoaded <\/strong>trên h\u1ea7u h\u1ebft t\u1ea5t c\u1ea3 các trình duy\u1ec7t. Nh\u01b0ng th\u1eadt là may m\u1eafn vì chúng ta không c\u1ea7n ph\u1ea3i th\u1ef1c hi\u1ec7n công \u0111o\u1ea1n ki\u1ec3m tra nh\u01b0 trên, jQuery \u0111ã \u0111\u1ea3m nh\u1eadn toàn b\u1ed9 vi\u1ec7c này.<\/p>\n \n\t\t\u0110\u1ec3 h\u1ed7 tr\u1ee3 ng\u01b0\u1eddi s\u1eed d\u1ee5ng, jQuery \u0111ã cung c\u1ea5p 1 method m\u1edbi v\u1edbi tên g\u1ecdi ready <\/strong>mà chúng ta có th\u1ec3 g\u1ecdi ra t\u1eeb chính \u0111\u1ed1i t\u01b0\u1ee3ng chính c\u1ee7a jQuery. C\u1ee5 th\u1ec3, khi vi\u1ebft plugin jQuery, các b\u1ea1n s\u1eed d\u1ee5ng function ready <\/strong>này \u0111\u1ec3 ki\u1ec3m tra xem h\u1ec7 th\u1ed1ng \u0111ã s\u1eb5n sàng \u0111\u1ec3 th\u1ef1c thi \u0111o\u1ea1n mã \u0111ó hay ch\u01b0a. L\u01b0u ý r\u1eb1ng \u0111ây không ph\u1ea3i mã plugin chính mà là \u0111i\u1ec3m m\u1ea5u ch\u1ed1t c\u1ee7a plugin. Ho\u1eb7c hi\u1ec3u nôm na r\u1eb1ng \u0111ây là phiên b\u1ea3n jQuery c\u1ee7a function window.onload:<\/strong><\/p>\n \n\t\tVí d\u1ee5 t\u1ea1i \u0111ây, chúng ta s\u1ebd vi\u1ebft 1 plugin v\u1edbi tên g\u1ecdi là Shuffle<\/strong>, và plugin này có 2 ch\u1ee9c n\u0103ng riêng r\u1ebd \u0111\u1ec3 kh\u1edfi t\u1ea1o c\u0169ng nh\u01b0 th\u1ef1c thi ph\u1ea7n mã c\u01a1 b\u1ea3n, có d\u1ea1ng nh\u01b0 sau:<\/p>\n \n\t\tNh\u01b0 th\u01b0\u1eddng l\u1ec7 thì b\u1ea5t k\u1ef3 \u0111o\u1ea1n mã nào c\u0169ng có th\u1ec3 \u0111\u01b0\u1ee3c tùy bi\u1ebfn d\u1ef1a vào nhu c\u1ea7u c\u1ee7a ng\u01b0\u1eddi s\u1eed d\u1ee5ng. Cú pháp s\u1eed d\u1ee5ng d\u01b0\u1edbi \u0111ây \u0111\u01b0\u1ee3c coi là ph\u1ed5 bi\u1ebfn, b\u1edfi nó \u0111\u01b0\u1ee3c áp d\u1ee5ng b\u1edfi ph\u1ea7n l\u1edbn l\u1eadp trình viên jQuery<\/strong>, tuy nhiên l\u1ea1i r\u1ea5t d\u1ec5 gây nh\u1ea7m l\u1eabn \u0111\u1eb7c bi\u1ec7t là v\u1edbi nh\u1eefng ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u tìm hi\u1ec3u v\u1ec1 c\u1ea3 JavaScript <\/strong>và jQuery<\/strong>:<\/p>\n \n\t\t\u0110ây là tr\u01b0\u1eddng h\u1ee3p r\u1ea5t hay g\u1eb7p trong tr\u1ef1c t\u1ebf, d\u1ea5u 3 ch\u1ea5m th\u01b0\u1eddng \u0111\u01b0\u1ee3c thay th\u1ebf b\u1eb1ng \u0111o\u1ea1n mã c\u1ea7n th\u1ef1c thi. C\u1ee5 th\u1ec3 t\u1ea1i \u0111ây, các b\u1ea1n c\u1ea7n tham kh\u1ea3o v\u1ec1 \u0111\u1ecbnh ngh\u0129a c\u1ee7a function anonymous (hay còn g\u1ecdi là function closure<\/strong>) v\u1edbi tham s\u1ed1 \u0111i kèm là $. Và ph\u1ea7n ch\u1ee9c n\u0103ng này \u0111\u01b0\u1ee3c bao trong d\u1ea5u ngo\u1eb7c \u0111\u01a1n, vì sao v\u1eady? Function trong ví d\u1ee5 này th\u1ef1c ch\u1ea5t là 1 function anonymous không tham chi\u1ebfu \u0111\u1ebfn chính b\u1ea3n thân nó, nh\u01b0ng vì \u1edf trong “ph\u1ea1m vi” c\u1ee7a d\u1ea5u ngo\u1eb7c \u0111\u01a1n nên JavaScript s\u1ebd cho phép ng\u01b0\u1eddi dùng tham chi\u1ebfu \u0111\u1ebfn b\u1ea5t k\u1ef3 function anonymous<\/strong> \u0111ã \u0111\u01b0\u1ee3c t\u1ea1o.<\/p>\n \n\t\tBên c\u1ea1nh \u0111ó, chúng ta có th\u1ec3 thêm 1 d\u1ea5u ch\u1ea5m sau khi ph\u1ea7n kh\u1edfi t\u1ea1o c\u1ee7a function \u0111\u01b0\u1ee3c \u0111\u1eb7t trong d\u1ea5u ngo\u1eb7c \u0111\u01a1n, và g\u1ecdi ra 1 function member <\/strong>\u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi function này. Ti\u1ebfp theo, thêm d\u1ea5u ch\u1ea5m \u1edf phía cu\u1ed1i m\u1ec7nh \u0111\u1ec1 \u0111ó và g\u1ecdi ti\u1ebfp 1 function member<\/strong> khác có th\u1ec3 \u0111\u01b0\u1ee3c th\u1ef1c thi d\u1ef1a trên \u0111\u1ecbnh d\u1ea1ng c\u1ee7a \u0111\u1ed1i t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1 b\u1edfi function tr\u01b0\u1edbc. Tính n\u0103ng function chaining này c\u1ee7a JavaScript <\/strong>khá ph\u1ed5 bi\u1ebfn và \u0111\u01b0\u1ee3c áp d\u1ee5ng trong nhi\u1ec1u ngôn ng\u1eef l\u1eadp trình khác, ch\u1eb3ng h\u1ea1n nh\u01b0 Perl<\/strong>. \u0110ó là 1 d\u1ea1ng tính n\u0103ng c\u1ee7a ng\u1ed3n ng\u1eef k\u1ecbch b\u1ea3n vì nó giúp cho ph\u1ea7n mã c\u1ee7a ng\u01b0\u1eddi dùng tr\u1edf nên ng\u1eafn g\u1ecdn, d\u1ec5 qu\u1ea3n lý và tr\u1ef1c quan h\u01a1n.<\/p>\n \n\t\tDo v\u1eady, b\u1eb1ng cách \u0111\u1eb7t function anonymous <\/strong>trong d\u1ea5u ngo\u1eb7c \u0111\u01a1n thì chúng ta có th\u1ec3 d\u1ec5 dàng tham chi\u1ebfu \u0111\u1ebfn ph\u1ea7n b\u1ed9 nh\u1edb c\u1ee7a chính function \u0111ó mà không c\u1ea7n ph\u1ea3i qua tên – mà th\u1ef1c ra c\u0169ng không th\u1ec3 làm \u0111\u01b0\u1ee3c vì function không có tên.<\/p>\n \n\t\tM\u1eb7t khác, các b\u1ea1n còn có th\u1ec3 g\u1ecdi function <\/strong>\u0111ó b\u1eb1ng m\u1ec7nh \u0111\u1ec1 \u0111\u01b0\u1ee3c dùng \u0111\u1ec3 t\u1ea1o function. Và \u0111ó c\u0169ng chính là cách làm c\u1ee7a chúng ta t\u1ea1i \u0111ây. Các function không có tên \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a, \u0111\u1eb7t trong d\u1ea5u ngo\u1eb7c \u0111\u01a1n và s\u1ebd \u0111\u01b0\u1ee3c g\u1ecdi ngay sau \u0111ó. \u0110ây ch\u1ec9 là 1 ví d\u1ee5 \u0111\u01a1n gi\u1ea3n v\u1ec1 cách s\u1eed d\u1ee5ng c\u1ee7a function closure mà chúng ta có th\u1ec3 d\u1ec5 dàng nh\u1eadn ra trong nhi\u1ec1u ph\u1ea7n mã ngu\u1ed3n jQuery và JavaScript <\/strong>nâng cao.<\/p>\n \n\t\tNh\u1eefng lý do \u0111\u1ec3 làm nh\u01b0 v\u1eady là gì? Th\u1ee9 nh\u1ea5t là \u0111\u1ec3 rút g\u1ecdn t\u1ed1i \u0111a \u0111\u1ed9 dài c\u1ee7a code, ti\u1ebfp theo là \u1ea9n toàn b\u1ed9 các tham s\u1ed1 \u0111\u01b0\u1ee3c kh\u1edfi \u0111\u1ea7u b\u1eb1ng $ kh\u1ecfi mô hình global scope<\/strong> t\u1ed5ng th\u1ec3. Bên c\u1ea1nh \u0111ó, \u0111\u1ed1i v\u1edbi nh\u1eefng tr\u01b0\u1eddng h\u1ee3p chúng ta dùng nhi\u1ec1u n\u1ec1n t\u1ea3ng framework khác nhau thì vi\u1ec7c s\u1eed d\u1ee5ng ký hi\u1ec7u $ \u0111\u1ed1i v\u1edbi object function trong mô hình c\u1ee7a toàn b\u1ed9 ch\u01b0\u01a1ng trình r\u1ea5t d\u1ec5 gây nh\u1ea7m l\u1eabn.<\/p>\n \n\t\tNh\u01b0ng trong th\u1ef1c t\u1ebf thì \u0111i\u1ec1u \u0111ó l\u1ea1i hoàn toàn ph\u1ee5 thu\u1ed9c vào hoàn c\u1ea3nh và s\u1ef1 l\u1ef1a ch\u1ecdn chính c\u1ee7a ng\u01b0\u1eddi phát tri\u1ec3n. C\u1ee5 th\u1ec3, trong ph\u1ea7n ti\u1ebfp theo c\u1ee7a bài h\u01b0\u1edbng d\u1eabn thì chúng tôi không h\u1ec1 s\u1eed d\u1ee5ng b\u1ea5t c\u1ee9 framework ho\u1eb7c mã b\u1ed5 sung bên ngoài, cú pháp chung có th\u1ec3 h\u01a1i lo\u1eb1ng ngo\u1eb1ng và khó hi\u1ec3u, nh\u01b0ng t\u1ec9 l\u1ec7 xung \u0111\u1ed9t và l\u1ed7i phát sinh s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1ea3m b\u1ea3o \u1edf m\u1ee9c th\u1ea5p nh\u1ea5t. Cú pháp c\u01a1 b\u1ea3n chung nh\u01b0 sau:<\/p>\n \n\t\tV\u1edbi doSomething <\/strong>và doSomethingElse <\/strong>\u0111\u01a1n gi\u1ea3n ch\u1ec9 là nh\u1eefng \u0111\u1ed1i t\u01b0\u1ee3ng function \u0111ã \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a và kh\u1edfi t\u1ea1o tr\u01b0\u1edbc \u0111ó, nh\u01b0ng n\u1ebfu làm nh\u01b0 v\u1eady thì chúng ta \u0111\u1ed3ng th\u1eddi c\u0169ng m\u1ea5t \u0111i kh\u1ea3 n\u0103ng k\u1ebft h\u1ee3p, xâu chu\u1ed7i plugin jQuery v\u1edbi các function API <\/strong>\u0111ã có s\u1eb5n. Cu\u1ed1i cùng, n\u1ebfu các b\u1ea1n mu\u1ed1n plugin có kh\u1ea3 n\u0103ng chaining thì ph\u1ea3i s\u1eed d\u1ee5ng function sell-calling<\/strong> nh\u01b0 \u0111ã gi\u1ea3i thích \u1edf trên. N\u1ebfu k\u1ebft h\u1ee3p ch\u1ee9c n\u0103ng chaining c\u1ee7a plugin v\u1edbi mã c\u1ee7a nhi\u1ec1u d\u1ef1 án khác, các b\u1ea1n ch\u1ec9 c\u1ea7n ghép \u0111\u1ed1i t\u01b0\u1ee3ng và bi\u1ebfn c\u1ea7n thi\u1ebft t\u1edbi \u0111\u1ed1i t\u01b0\u1ee3ng $<\/strong>. ho\u1eb7c $.fn<\/strong>. L\u01b0u ý r\u1eb1ng trong jQuery, m\u1ed9t s\u1ed1 ký t\u1ef1 nh\u01b0 d\u1ea5u $ ho\u1eb7c m\u1ed9t vài tr\u01b0\u1eddng h\u1ee3p \u0111\u1eb7c bi\u1ec7t nh\u01b0 window.$<\/strong> có th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng thay th\u1ebf nhau, \u0111\u1ed3ng th\u1eddi còn \u0111\u01b0\u1ee3c dùng \u0111\u1ec3 \u0111\u1ec1 c\u1eadp chính xác t\u1edbi 1 \u0111\u1ed1i t\u01b0\u1ee3ng b\u1ea5t k\u1ef3 nào \u0111ó \u0111ã l\u01b0u trong b\u1ed9 nh\u1edb. Trong tài li\u1ec7u h\u01b0\u1edbng d\u1eabn c\u1ee5 th\u1ec3 c\u1ee7a jQuery c\u0169ng \u0111ã ch\u1ec9 ra r\u1eb1ng chúng ta nên s\u1eed d\u1ee5ng \u0111\u1ed1i t\u01b0\u1ee3ng jQuery thay cho d\u1ea5u $. Vì ký hi\u1ec7u $ ph\u1ea3i \u0111\u01b0\u1ee3c \u1ea9n, cho nên ch\u1ec9 s\u1eed d\u1ee5ng trong toàn b\u1ed9 c\u1ea5u trúc riêng c\u1ee7a jQuery mà thôi, và tuy\u1ec7t \u0111\u1ed1i không \u0111\u01b0\u1ee3c “ti\u1ebfp xúc” v\u1edbi b\u1ea5t k\u1ef3 tham s\u1ed1 $ nào t\u1edbi ph\u1ea7n implementators <\/strong>c\u1ee7a plugin<\/strong>.<\/p>\n \n\t\t\tTi\u1ebfp theo, chúng ta s\u1ebd tham kh\u1ea3o v\u1ec1 ph\u1ea7n mã internal c\u1ee7a plugin tùy ý v\u1edbi function anonymous<\/strong> self-referencing<\/strong> và ch\u1ee9c n\u0103ng l\u1ea5y các \u0111\u1ed1i t\u01b0\u1ee3ng jQuery d\u01b0\u1edbi d\u1ea1ng tham s\u1ed1. Nh\u01b0ng t\u1ea1i \u0111ây, chúng ta s\u1ebd d\u1ec5 b\u1ecb nh\u1ea7m l\u1eabn v\u1edbi t\u1eeb khóa this \u0111\u01b0\u1ee3c tham chi\u1ebfu t\u1edbi trong ph\u1ea7n pattern này và các v\u1ecb trí khác trong toàn b\u1ed9 code. C\u1ee5 th\u1ec3, chúng tôi \u0111ã t\u1ea1o m\u1ed9t s\u1ed1 bi\u1ebfn local v\u1edbi tên là vari – \u0111\u01b0\u1ee3c l\u01b0u tr\u1eef trong \u0111\u1ed1i t\u01b0\u1ee3ng jQuery chính ($.vari) và \u0111\u1ed1i t\u01b0\u1ee3ng jQuery fn ($.fn.vari)<\/strong>. Chúng c\u0169ng có th\u1ec3 là object function<\/strong>, nh\u01b0ng \u0111\u1ec3 \u0111\u01a1n gi\u1ea3n và d\u1ec5 hi\u1ec3u thì chúng ta ch\u1ec9 s\u1eed d\u1ee5ng ph\u1ea7n bi\u1ebfn c\u01a1 b\u1ea3n mà thôi. Các b\u1ea1n s\u1ebd d\u1ec5 dàng th\u1ea5y nh\u1eefng giá tr\u1ecb này hi\u1ec3n th\u1ecb cùng v\u1edbi ch\u1ee9c n\u0103ng c\u1ea3nh báo – alert<\/strong> trong \u0111o\u1ea1n mã d\u01b0\u1edbi \u0111ây.<\/p>\n \n\t\t\tTr\u01b0\u1edbc tiên là ph\u1ea7n pattern ch\u01b0a rút g\u1ecdn:<\/p>\n \n\t\t\t\t\/\/ $.fn is the object we add our custom functions to $.fn.DoSomethingLocal = function() { return this.each(function() { alert(this.vari); \/\/ would output `undefined` alert($(this).vari); \/\/ would output `$.fn.vari` }); }; })(jQuery);<\/p>\n \n\t\t\t\t\/\/ $ is the main jQuery object, we can attach a global function to it $.DoSomethingGlobal = function() { alert("Do Something Globally, where `this.vari` = " + this.vari); };<\/p>\n \n\t\t\t\t \n\t\t\tVà ph\u1ea7n chi ti\u1ebft c\u1ee5 th\u1ec3: <\/p>\n \n\t\t\t\t\/\/ 1.) Add a custom interface `DoSomethingLocal` \/\/ Which will modify all selected elements! \/\/ If you are a software engineer, think about this as \/\/ a member function of the main jQuery class $.fn.DoSomethingLocal = function() { \/\/ return the object back to the chained call flow return this.each(function() \/\/ This is the main processor \/\/ function that executes on \/\/ each selected element \/\/ (e.g: jQuery("div")) { \/\/ this ~ refers to a DOM element \/\/ $(this) ~ refers to a jQuery object<\/p>\n \n\t\t\t\t\/\/ Here, the `this` keyword is a self-refence to the \/\/ selected object `this.vari` is `undefined` because \/\/ it refers to selected DOM elements. So, we can do \/\/ something like: var borderStyle = this.style.border; \/\/ While $(this).vari, or jQuery(this).vari refers \/\/ to `$.fn.vari`<\/p>\n \n\t\t\t\t\/\/ You would use the $(this) object to perform \/\/ any desired modification to the selected elements \/\/ $(this) is simply a reference to the jQuery object \/\/ of the selected elements alert(this.vari); \/\/ would output `undefined` alert($(this).vari); \/\/ would output `$.fn.vari` }); }; })(jQuery); \/\/ pass the jQuery object to this function<\/p>\n \n\t\t\t\t\/\/ 2.) Or we can add a custom interface to the global jQuery \/\/ object. In this case, it makes no sense to enumerate \/\/ through objects with `each` keyword because this function \/\/ will theoretically work in the `global` scope. If you are \/\/ a professional software engineer, think about this \/\/ as a [static function] $.DoSomethingGlobal = function() { \/\/ this will output this.vari = $.vari alert("Do Something Globally, where `this.vari` = " + this.vari); };<\/p>\n \n\t\t\t\t \n\t\t\tTh\u1ef1c ra, có 2 d\u1ea1ng giao di\u1ec7n khác nhau mà chúng ta có th\u1ec3 gán vào object jQuery chính \u0111ã \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o s\u1eb5n b\u1edfi framework. Các b\u1ea1n hãy tham kh\u1ea3o k\u1ef9 ví d\u1ee5 trên, t\u1ea1i nh\u1eefng n\u01a1i chúng tôi \u0111ã gán thêm 2 function<\/strong>, \u0111ó là DoSomethingLocal <\/strong>và DoSomethingGlobal<\/strong>.<\/p>\n \n\t\t\tTrên th\u1ef1c t\u1ebf thì nhi\u1ec1u ng\u01b0\u1eddi l\u1ea1i thích \u0111\u1eb7t \u0111o\u1ea1n mã c\u1ee7a plugin trong function anonymous<\/strong>, và g\u1ecdi ra b\u1eb1ng cách g\u1eafn thêm d\u1ea5u ngo\u1eb7c \u0111\u01a1n \u1edf phía cu\u1ed1i m\u1ec7nh \u0111\u1ec1, sau \u0111ó chuy\u1ec3n \u0111\u1ed1i t\u01b0\u1ee3ng jQuery \u0111ó t\u1edbi gi\u1ed1ng nh\u01b0 ph\u1ea7n jQuery Plugin Design Pattern `A`<\/strong> trên, nh\u01b0ng li\u1ec7u chúng ta có th\u1ef1c s\u1ef1 c\u1ea7n ph\u1ea3i làm nh\u01b0 v\u1eady? Không. Hãy tham kh\u1ea3o 1 cách khác \u0111\u1ec3 t\u1ea1o plugin jQuery<\/strong> v\u1edbi c\u1ea5u trúc \u0111\u01a1n gi\u1ea3n và d\u1ec5 dàng h\u01a1n.<\/p>\n \n\t\t\tPh\u1ea7n pattern d\u01b0\u1edbi \u0111ây ph\u1ea3i \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong tr\u01b0\u1eddng h\u1ee3p chúng ta không th\u1ef1c hi\u1ec7n ch\u1ee9c n\u0103ng chainability<\/strong>, ho\u1eb7c nói theo cách khác là function <\/strong>c\u1ee7a plugin <\/strong>s\u1ebd không tr\u1ea3 l\u1ea1i \u0111\u1ed1i t\u01b0\u1ee3ng jQuery.<\/p>\n \n\t\t\t\t}<\/p>\n \n\t\t\t\t\/\/ Initializes plugin $.gShuffle.initialize = function() {<\/p>\n \n\t\t\t\t}<\/p>\n \n\t\t\t\t\/\/ Runs the plugin $.gShuffle.run = function() {<\/p>\n \n\t\t\t\t \n\t\t\tHy v\u1ecdng r\u1eb1ng nh\u1eefng thông tin trên s\u1ebd giúp b\u1ea1n hi\u1ec3u h\u01a1n v\u1ec1 các b\u01b0\u1edbc c\u01a1 b\u1ea3n t\u1ea1o plugin jQuery<\/strong>. Chúc các b\u1ea1n thành công!<\/p>\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":" \n\tTrong bài vi\u1ebft d\u01b0\u1edbi \u0111ây, chúng tôi s\u1ebd gi\u1edbi thi\u1ec7u và h\u01b0\u1edbng d\u1eabn các b\u1ea1n m\u1ed9t vài b\u01b0\u1edbc c\u01a1 b\u1ea3n \u0111\u1ec3 t\u1ea1o plugin b\u1eb1ng jQuery<\/strong><\/span>. Cho dù b\u1ea1n là ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u tìm hi\u1ec3u v\u1ec1 l\u0129nh v\u1ef1c phát tri\u1ec3n web ho\u1eb7c \u0111ã có th\u1eddi gian dài ti\u1ebfp xúc v\u1edbi JavaScript<\/strong> thì qu\u1ea3 th\u1ef1c jQuery là 1 n\u1ec1n t\u1ea3ng framework tuy\u1ec7t v\u1eddi và không th\u1ec3 b\u1ecf qua, \u0111\u1eb7c bi\u1ec7t là nh\u1eefng ng\u01b0\u1eddi \u0111\u1ebfn v\u1edbi jQuery t\u1eeb n\u1ec1n t\u1ea3ng Javascript có s\u1eb5n.<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[142],"tags":[],"class_list":["post-971","post","type-post","status-publish","format-standard","hentry","category-thu-thuat-jquery"],"views":444,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=971"}],"version-history":[{"count":0,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/971\/revisions"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n\t\u0110\u1ed1i t\u01b0\u1ee3ng trong JavaScript:<\/h2>\n
\n\tCác \u0111\u1ed1i t\u01b0\u1ee3ng chính trong jQuery:<\/h2>\n
\n\tvar jQuery = window.jQuery = window.$ = function(selector, context)
\n\t{
\n\t\/\/ …
\n\t\/\/ other internal initialization code goes here
\n\t};<\/div>\n\r\n
\/\/ Select all elements of class: "someClass" and\r\n\/\/ apply a red border to all of them\r\njQuery(".someClass").css("border", "1px solid red");<\/code><\/pre>\n\/\/ Exactly the same as above, but using $ $("#someId").html("<b>So Bold!<\/b>");<\/code><\/p>\n<\/div>\n\n\t\t\u0110i\u1ec3m m\u1ea5u ch\u1ed1t c\u1ee7a plugin jQuery:<\/h2>\n
\r\n
\/\/ Override the onload event\r\nwindow.onload = function()\r\n{\r\n \/\/ the page finished loading, do something here...\r\n}<\/code><\/pre>\n<\/p><\/div>\n\r\n<script type = "text\/javascript">\r\n \/\/ Define the entry point\r\n $(document).ready(function()\r\n {\r\n \/\/ The DOM (document object model) is constructed\r\n \/\/ We will initialize and run our plugin here\r\n });\r\n <\/script><\/pre>\n<\/p><\/div>\n\r\n<script type = "text\/javascript">\r\n \/\/ One way to initialize plugin code\r\n $(document).ready(function()\r\n {\r\n jQuery.Shuffle.initialize( "monalisa.jpg", 5, 8, 67, 1500);\r\n jQuery.Shuffle.run();\r\n });\r\n <\/script><\/pre>\n<\/p><\/div>\n\r\n<script type = "text\/javascript">\r\n (function($){ ... })(jQuery);\r\n <\/script><\/pre>\n<\/p><\/div>\n\r\n<script type = "text\/javascript">\r\n jQuery.func = doSomething;\r\n jQuery.fn.func = doSomethingElse;\r\n <\/script><\/pre>\n<\/p><\/div>\n
\n\t\t\tjQuery Plugin Design Pattern `A`<\/h2>\n
\r\n
(function($)\r\n{\r\n $.vari = "$.vari";\r\n $.fn.vari = "$.fn.vari";<\/code><\/pre>\n$(document).ready(function() { $("div").DoSomethingLocal(); $.DoSomethingGlobal(); });<\/code><\/p>\n<\/p><\/div>\n\r\n
\/\/ plugin-name.js - define your plugin implementation pattern\r\n(function($) \/\/ The $ here signifies a parameter name\r\n \/\/ As you can see from below, (jQuery) is\r\n \/\/ immediately passed as the $ param\r\n{\r\n $.vari = "$.vari";\r\n $.fn.vari = "$.fn.vari";<\/code><\/pre>\n\/\/ index.html - test the plugin $(document).ready(function() { $("div").DoSomethingLocal(); $.DoSomethingGlobal(); });<\/code><\/p>\n<\/p><\/div>\n\n
\n\t\t\tjQuery Plugin Design Pattern `B`<\/h2>\n
\r\n
\/\/ Plugin base object\r\n$.gShuffle = function()\r\n{<\/code><\/pre>\n};<\/code><\/p>\n<\/p><\/div>\n