Lập trình hướng đối tượng trong javascript và các kiểu mẫu thiết kế

Lp trình hng đi tng trong Javascript và các kiu mu thit k Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 1 MC LC LI NÓI U 6 I.Hàm function 7 1.1.Kin thc nn v hàm function 7 1.1.1.Cách ti thiu hóa s bin toàn cc 8 1.2.nh ngha thut ng 13 1.3.So sánh gia vic khai báo vi biu thc : tên names và s leo thang hoisting 15 1.4.Thuc tính name ca hàm function 16 1.5.S leo thanh ca hàm function - Function Hoisting 17 1.6.Kiu mu callback 19 1.6.1.Mt ví d mu v callback 19 1.6.2.Hàm callback và phm vi tn ti ca bin trong hàm callback 22 1.6.3.Lng nghe s kin không đng b 24 1.6.4. tr Timeouts 25 1.6.5.Hàm callbacks trong các th vin 25 1.6.6.Cách tr v trong hàm functions 25 1.6.7.Các hàm functions t đnh ngha 27 1.6.8.Các hàm functions tc thi 29 1.6.8.1.Các tham s ca 1 hàm tc thi 30 1.6.8.2.Các giá tr đc tr v t các hàm tc thi 31 1.6.8.3.Cách s dng và u đim 33 1.6.9.Cách khi to các đi tng tc thi 34 1.6.10.Phân nhánh thi gian khi to - Init-Time Branching 35 1.6.11.Các thuc tính ca functions – kiu mu ti u hóa b nh Memoization Pattern 37 1.6.12.Các đi tng cu hình - Configuration Objects 39 1.6.13.Curry 41 1.6.14.Function Application 41 1.6.15.Partial Application 42 1.6.16.Currying 44 1.6.17.khi nào ta s dng Currying 47 II.T mng arrays cho ti các đi tng objects 48 2.1.Các phn t, các thuc tính, các phng thc 50 Lp trình hng đi tng trong Javascript và các kiu mu thit k Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 2 2.2.Các mng arrays kt hp 50 2.3.Các truy cp vào các thuc tính ca đi tng 51 2.4.Cách gi các phng thc ca 1 đi tng 53 2.5.Cách bin đi các thuc tính / phng thc 54 2.6.Các s dng t khóa this 55 2.7.Các hàm to constructor 55 2.8.i tng toàn cc Global Object 57 2.9.Thuc tính to 58 2.10.Toán t instanceof 59 2.11.Các hàm functions mà tr v các đi tng objects 59 2.12.Các chuyn tip các đi tng 61 2.13.Cách so sánh các đi tng objects 62 III.Các đi tng đc xây dng sn 63 3.1.i tng object 63 3.2.i tng Mng array 64 3.3.i tng Function 67 3.3.1.Các thuc tính ca đi tng function 68 3.3.2.Các phng thc trong các đi tng objects function 71 IV.Biu thc chính quy 74 4.1.Các thuc tính ca các đi tng Objects 74 4.2.Các phng thc ca các đi tng regexp 76 4.3.Các phng thc string mà nhn các biu thc chính quy nh các tham s 76 4.3.1.search() và match() 77 4.3.2.replace() 77 4.3.3.Các hàm Replace callbacks 78 4.3.4.split() 80 4.3.5.Cách chuyn tip 1 chui string khi 1 regexp đc nh kì vng 80 4.4.Quy tc mu trong biu thc quan h 81 V.Prototype 88 5.1.Thuc tính prototype 88 5.2.Cách thêm các phng thc và thuc tính bng cách s dng Prototype 88 5.3.Cách s dng các thuc tính và phng thc ca Prototype 90 5.4.Các thuc tính chính gc so vi các thuc tính đc thêm vào qua prototype 91 Lp trình hng đi tng trong Javascript và các kiu mu thit k Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 3 5.5.Ghi đè thuc tính ca prototype vi thuc tính chính gc 93 5.6.Các lit kê các thuc tính 94 5.7.isPrototypeOf() 97 5.8.Bí mt v __proto__ Link 98 5.9.Cách làm gia tng các đi tng đc xây dng sn 100 5.10.Mt vài ghi chú v Prototype 101 VI.S k tha 106 6.1.Các chui móc ni prototype 106 6.2.Ví d v chui móc ni prototype 107 6.3.Cách chuyn các thuc tính đc chia s vào bên trong prototype 111 6.4.Cách tha k ch t prototype 113 6.5.Hàm to Constructor tm thi - new F() 115 6.6.Uber – truy cp đi tng cha t đi tng con 117 6.7.Cách phân tách phn k tha vào trong 1 hàm function 119 VII.Các kiu mu to đi tng object 120 7.1.Các phng thc và thuc tính riêng t 120 7.1.2.Các thành viên riêng t 120 7.1.3.Các phng thc đc u tiên 121 7.1.4.Các thiu sót quyn riêng t 122 7.1.5.Object Literals và quyn riêng t 123 7.1.6.Các Prototypes v quyn riêng t 125 7.1.7.Cách phát hin các hàm riêng nh các phng thc public 126 7.2.Cách thành viên c đnh static 127 7.2.1.Các thanh viên Public Static 128 7.2.2.Các thành viên Private Static 130 7.3.Các hng s đi tng 133 7.4.Kiu mu chui hóa - Chaining Pattern 135 7.4.1.u đim và nhc đim ca kiu mu chui hóa - Chaining Pattern 136 7.5.Phng thc method() 137 VIII.Các kiu mu có kh nng tái s dng - Code Reuse Patterns 139 8.1.Kiu mu hng class so vi các kiu mu phân cp hin đi 139 8.2.Kt qu nh mong mun khi s dng s k tha theo hng classical 140 8.3.Vic k tip chui prototype 141 Lp trình hng đi tng trong Javascript và các kiu mu thit k Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 4 8.4.Nhc đim khi s dng kiu mu #1 144 8.5.Kiu mu Classical Pattern #2 - Rent-a-Constructor – kiu mu vay mn hàm to . 145 8.5.1.Chui prototype 147 8.5.2.S đa k tha bng các hàm to vay mn 148 8.5.3.u đim và nhc đim ca kiu mu hàm khi to vay mn 149 8.6.Kiu mu Classical Pattern #3 - Rent and Set Prototype – kiu mu vay mn và thit lp prototype 149 8.7.Kiu mu Classical Pattern #4 – chia s prototype 151 8.8.Kiu mu Classical Pattern #5 – 1 hàm to tm thi 152 8.8.1.Cách lu tr Superclass 154 8.8.2.Cách cài đt li con tr hàm khi to 154 8.9.Klass 156 8.10.S k tha hng Prototypal 159 8.10.1.Tho lun 160 8.10.2.Vic b sung ECMAScript 5 162 8.10.3.S k tha bng cách sao chép các thuc tính 162 8.10.4.Mix-ins 165 8.10.5.Vay mn các phng thc Methods 166 8.10.6.Ví d : vay mn t 1 mng array 167 8.10.7.Vay mn và ràng buc 168 8.10.8.Function.prototype.bind() 170 IX.Kiu mu thit k 172 9.1.Singleton – kiu mu duy nht 172 9.1.1.Cách s dng new 173 9.1.2.Thc th trong 1 thuc tính static 174 9.1.3.Thc th trong 1 bao đóng 174 9.2.Factory – kiu mu sn xut đi tng 178 9.2.1.i tng Object Factory đc xây dng sn 181 9.3.Iterator – kiu mu bin lp 182 9.4.Façade 185 9.5.Proxy 188 9.5.1.Mt ví d mu 190 9.6.Composite 199 9.6.1.Vn đ đt ra 199 Lp trình hng đi tng trong Javascript và các kiu mu thit k Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 5 9.6.2.Cu trúc ca kiu mu composite pattern 202 9.6.3.Các mu ví d v kiu mu Composite Pattern 203 9.6.4.Mu ví d trong JS s dng kiu mu Composite Pattern 203 9.6.5.u đim và nhc đim ca kiu mu Composite Pattern 208 9.7.Observer – ngi quan sát 210 9.7.1.Mu ví d #1: vic đt mua tp chí 211 X.Asynchronous patterns - Kiu mu không đng b 216 10.1.Li ích và thách thc vi lp trình không đng b 216 10.2.Promises 218 10.3.Khám phá Promises trong b công c JQuery 222 XI.ASYNCH JS : sc mnh ca đi tng $.DEFERRED 225 11.1.Các hàm APIS không đng b ca trình duyt 225 11.2.Cách to các ng dng 1 cách không đng b 227 11.3.Cách hiu chnh s tht bi 228 11.4.$.DEFERRED 228 11.5.Các trng hp mu 232 11.6.JQuery.Deferred và Promise 233 11.6.1.$.Deferred 234 11.6.2.Phng thc deferred.resolve() 235 11.6.3.Phng thc deferred.reject() 235 11.6.4.Phng thc Promise() 236 Lp trình hng đi tng trong Javascript và các kiu mu thit k Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 6 LI NÓI U Tài liu đc vit ging nh 1 bn ghi chép, ghi li nhng th mà mình đư đc đc t các ebook ting anh, do vy b cc sp xp ca nó có th cha chính xác, cách trình bày không theo chun 1 ebook nào c và nhiu ch vit cha rõ ngha và không mch lc do hn ch v ngoi ng ca bn thân mình. Tài liu mang đm tính cht cá nhân do vy bn s bt gp trong tài liu này nhiu đon kí t in đm, in màu, c ch ln bt thng và đc tô màu khác nhau - đó là các đon có liên quan đn nhau hay là nhng ghi chú quan trng mà bn cn phi đc k. Ni dung trong tài liu này đc da trên các cun ebook: “JavaScript Patterns - Stoyan Stefanov”, “Object-Oriented JavaScript - Stoyan Stefanov”, “JavaScript: The Good Parts - Douglas Crockford”, và 1 s bài vit ca các tác gi mà mình không còn nh rõ na. Trc khi đc tài liu này, bn phi xác đnh mình nm rõ nhng gì thuc v c bn nht ca Javascript nh các cách khai báo, các kiu d liu c bn, các phép toán s hc, các mnh đ điu kin, ầ(nu bn có kin thc v 1 ngôn ng lp trình c bn nào đó, thì bn s làm quen vi nhng gì tài liu này b qua trong Javascript 1 cách rt nhanh chóng). Tài liu này ch tp trung vào nhng gì đc coi là đc bit nht ca Javascript so vi các ngôn ng lp trình thông dng khác, không phi dành cho nhng ngi mi bt đu hc Javascript. 1 đim na bn cn lu ý là trong tài liu này lc b phn tng tác gia Javascript vi DOM & Browser bi vì bn thân mình dùng Jquery đ thay th. Nu bn s dng Javascript kt hp vi Phonegap đ to ra các ng dng cho các nn tng mobile, thì các tài liu sau có th bn s quan tâm ti :  “Phonegap cho ngi mi hc”: http://www.slideshare.net/myloveforyounqt/phonegap-cho-nguoi-moi-hoc  “Cách ti u hóa môi trng lp trình ng dng cho Android”: http://www.slideshare.net/myloveforyounqt/cch-ti-u-ha-mi-trng-lp-trnh-ng-dng- cho-android-tng-tc-my-o-android  Hoc đn gin truy cp vào th mc chia s sau: http://sdrv.ms/VoAXBi Lp trình hng đi tng trong Javascript và các kiu mu thit k Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 7 I.Hàm function 1.1.Kin thc nn v hàm function Có 2 tính nng chính ca hàm functions trong JS làm cho chúng tr nên đc bit.điu đu tiên là hàm functions cng ging nh các đi tng class objects và điu th 2 là chúng cung cp 1 phm vi tn ti ca các bin Các hàm functions là các đi tng objects mà :  Có th to ra 1 cách linh hot trong thi gian chy trong xut quá trình thc thi ca chng trình  Có th gán vào các bin và có th tham chiu đ sao chép giá tr sang các bin khác, có th tham s hóa và trong 1 s trng hp nó có th b xóa  Có th chuyn tip nh các tham s vào trong hàm functions khác và cng có th đc tr v bi hàm functions khác  Có th có thuc tính và các phng thc  bên trong Do vy có th xy ra trng hp 1 hàm function A – là 1 đi tng object, đi tng này cha các thuc tính và phng thc – 1 hàm B khác, hàm B nhn 1 hàm C là tham s và khi thc thi nó có th tr v hàm D. Thông thng khi ta ngh v 1 hàm function trong JS thì ta ngha v 1 đi tng object vi tính nng đc bit duy nht là đi tng object này có kh nng gi đc, điu này có ngha là nó có th đc thc thi x lý Thc t thì hàm function là đi tng object và hin nhiên ta s thy hàm to new Function() nh sau : // antipattern // for demo purposes only var add = new Function('a, b', 'return a + b'); add(1, 2); // returns 3  đon code này thì không có s ng vc gì v vic add() là 1 đi tng object. cách s dng hàm to Function() constructor không phi là cách s dng hay vì nó s gây ra 1 vài bt tin cho vic vit và đc hiu Lp trình hng đi tng trong Javascript và các kiu mu thit k Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 8 tính nng quan trng th 2 là các hàm function cung cp 1 phm vi tn ti.bt c bin nào đc đnh ngha vi var bên trong 1 hàm function thì là 1 bin đa phng và nó không tn ti đc bên ngoài hàm function này.vic nói rng du ngoc {} không cung cp phm vi đa phng có ngha là nu ta đnh ngha 1 bin vi var bên trong 1 mnh đ if hay bên trong 1 mnh đ for hay mnh đ while thì điu này không có ngha là bin này là đa phng vi if hay for.nó ch là đa phng đi vi hàm function bao quanh nó và nu không có hàm function nào bao quanh nó thì nó là 1 bin toàn cc.nh đư nói đn  chng trc thì vic ti thiu hóa s bin toàn cc là 1 s thích tt bi vì các hàm functions là bt buc đ gi các bin tn ti trong 1 phm vi có kim soát 1.1.1.Cách ti thiu hóa s bin toàn cc Js s dng các hàm functions đ kim soát phm vi tn ti ca bin.1 bin đc khai báo trong 1 hàm function là bin đa phng và nó không tn ti ngoài hàm function này.theo cách khác, các bin toàn cc là các bin đc khai báo không  trong bt c hàm functions nào Mi môi trng trong JS đu là 1 đi tng toàn cc global object có th đc truy cp khi ta s dng this  bên ngoài bt c hàm functions nào.mi bin toàn cc mà ta to ra tr thành 1 thuc tính ca đi tng toàn cc.di đây là 1 đon mư code nh ch ra cách to và truy cp 1 bin toàn cc trong môi trng trình duyt : myglobal = "hello"; // antipattern console.log(myglobal); // "hello" console.log(window.myglobal); // "hello" console.log(window["myglobal"]); // "hello" console.log(this.myglobal); // "hello" 1.1.1.2.Các vn đ ny sinh vi các bin toàn cc các vn đ ny sinh vi bin toàn cc là vic chúng đc chia s trong phm vi toàn b mư code trong ng dng JS.chúng sng trong cùng 1 namespace toàn cc và s luôn luôn có 1 tình hung xy ra va chm trong cách đt tên – khi 2 phn tách riêng ca 1 ng dng đnh ngha các bin toàn cc vi cùng 1 tên nhng có mc đích s dng khác nhau đây cng là vn đ thng xy ra cho các web pages nhúng mư code không đc vit bi nhà lp trình ca trang page đó ví d : Lp trình hng đi tng trong Javascript và các kiu mu thit k Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 9  1 th vin JS ca bên th 3  Các mư Scripts t 1 đi tác qung cáo  Mư code t 1 mư phân tích và lu vt ca ngi s dng bên th 3  Các loi widgets, badges, và buttons khác nhau Chúng ta nói rng 1 trong các mư scripts ca bên th 3 đnh ngha 1 bin toàn cc đc gi ví d nh result.sau đó bên trong 1 trong các hàm functions ca ta đnh ngha 1 bin toàn cc khác đc gi là result.kt qu ca điu này là bin result khai báo cui cùng s ghi đè lên bin result trc đó và mư script ca bên th 3 rt có th không hot đng Do vy điu quan trng đ làm 1 ngi hàng xóm thân thin vi các mư scripts khác là các chin thut ti thiu hóa s bin toàn cc Khá là ngc nhiên là rt d dàng to ra bin toàn cc 1 cách rt vô tình trong JS bi vì 2 tính nng ca JS.điu đu tiên là ta s dng các bin mà không khai báo chúng.và điu th 2 là JS luôn có ng ý là toàn cc vi bt kì bin nào mà ta không khai báo thì nó s tr thành 1 thuc tính ca đi tng toàn cc global object.xét ví d sau : function sum(x, y) { // antipattern: implied global result = x + y; return result; } Trong mư code trên thì result đc s dng mà không khai báo.đon code vn hot đng tt nhng sau khi hàm function này ta kt thúc vi 1 bin toàn cc result thì đây có th là ngun gc ca nhiu vn đ Theo kinh nghim thì luôn luôn khai báo các bin vi var, và ta sa li ví d trc nh sau : function sum(x, y) { var result = x + y; return result; } Lp trình hng đi tng trong Javascript và các kiu mu thit k Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 10 1 trong nhng li d dàng to ra các bin theo hng toàn cc khác chính là chui gán liên tip các bin var.xét đon ví d sau, thì bin a là đa phng nhng bin b là toàn cc : // antipattern, do not use function foo() { var a = b = 0; // } Nu ta ngn nhiên là ti sao li nh vy thì đó là bi vì s đánh giá đi t phi sang trái.đu tiên biu thc b = 0 đc đánh giá trc và ti đây thì b không đc khai báo.giá tr tr v ca biu thc này là 0 và nó đc gán vào 1 bin đa phng mi đc khai báo vi var a.theo cách khác ta có th vit li nh sau : var a = (b = 0); nu ta đư khai báo tt c các bin và thc hin chui gán thì đây là cách tt và ta không to ra các bin toàn cc 1 cách vô tình na : function foo() { var a, b; // a = b = 0; // both local } 1.1.1.3.Các hiu ng ph khi ta quên var ây là 1 đim hi khác bit gia các bin ng ý toàn cc và s đnh ngha hoàn toàn là 1 bin toàn cc – s khác bit là kh nng không xác đnh đc các bin này bng cách s dng toán t delete :  Các bin toàn cc đc to ra vi var ( các bin đc to ra bên ngoài bt c hàm functions nào ) có th không b xóa  Các bin ng ý toàn cc không đc to ra vi var ( bt chp nu nó đc to ra bên trong hàm function ) có th xóa [...]... tho u th c function expression u ch m ph y.d u ch m ph y n thi t trong khai t bu c trong bi u th c function expressions d t n d u ch m ph t email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 14 L u m u thi t k 1.3 a vi i bi u th c leo thang hoisting V d d ng bi u th expressions? Trong nhi ng h chuy n ti s d ng function object gi trong chu c ng : // this is a function expression, // pased as an... th c t s logic trong vi c hi u ch hide() var hide = function (nodes) { var i = 0, max = nodes.length; for (; i < max; i += 1) { nodes[i].style.display = "none"; } }; Hi ta ph i duy t 2 l n m ng nodes, t c hi pt n2l n // executing the functions hide(findNodes()); c thi hi tb n t trong m c tr v b hide() ph i l p l i 1 l n n findNodes() tr u qu c ta ch t findNodes() u ta th s v u ki ng b n trong findNodes(),... = function () { return 2 + 2; ) } (); c tr v c th c tr v tr v b d ng ph m vi c mc s c th ti li u c tr v b n getResult c th n tr v c trong res trong s s c th i : var getResult = (function () { var res = 2 + 2; return function () { return res; }; }()); c th cs d i thu i trong su vi c c n ph ic c th s d c tr v c c th i s tr c th c a thu var o = { email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum... email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 13 L u m u thi t k add ) trong bi u th N u ta b u th c cg sau : // function expression, a.k.a anonymous function var add = function (a, b) { return a + b; }; Khi ta b d ng bi u th c unnamed ng gi t function.ch g i ra c ng function object s r ng.thu n m r ng c chu i n trong is ng.n u ta gi l ch a chu t h u d ng khi s d ng 1 debug gi quy ngay b Cu... www.phonegap.vn/forum 29 L u m u thi t k p d u ngo c b t bu c n n) td trong JSLint (function () { alert('watch out!'); } )(); Ki u m u d ng b c p 1 ph m v h 1 k ch b i th page load gi thi t l p khi trang nh event handlers, t tc t c kh i t o c c th c hi n ch 1 l named function t m nh ng bi ng ta ph i d ng n n sau khi tr ra t t c it ng t i n u t o i sao ta c m vi c trong ph c th i ra b t c bi c: (function () { var days... "undefined" typeof global_fromfunc; // "undefined" trong ch tc c kh bi n antipatterns i 1.1.1.4.C c truy c p t b t c ph n code u ta c n truy c p bi nh v b tc c m vi function l ng nhau : var global = (function () { return this; }()); email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 11 L u m u thi t k yv t cb c ng t c cs y ta ph i ch p nh n 1 ki u m ch t a ta trong n n ph ti n um ur th ud c ut 1.1.1.5.Ki... function () { return this.message; } }; // usage o.getMsg(); // "call me" o.message; // "call me" o.message u chu i string ch nt th c thi trong su s d ki u m m c th vi cs d n th c hi i gi l i b t c bi i lo l cv script tc vi nt m i kh c c c th g th - ki u m c s d ng trong bookmarklets b ki u m u bookmarklets ch tc -contained email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 33 L u m u thi t k... ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 34 L u m u thi t k m c a ki u m ng v i ki u m c trong khi th c th o v namespace kh i t o m c a ki u m i thi t i thi um u u qu gi mc i thi c vi 1.6.10 i gian kh i t o - Init-Time Branching Init-time branching bi t r cg load-time branching) u ki um ut i trong su t o ra kh u ki sau khi ta nh n bi ic t 1 l n c XMLHttpRequest c h tr ts tc c as b c i native... function (el, type, fn) { // pretty much the same } }; V v i hi u qu cao.m i l n ta g i t i utils.addListener() hay utils.removeListener() m tra gi ng nhau s th a d ng init-time branching it oc trong s script t trong su h ic ng pc // AFTER // the interface var utils = { addListener: null, removeListener: null }; // the implementation if (typeof window.addEventListener === 'function') { utils.addListener... ch t d ng setTimeout().chuy n ti p chu i "thePlotThickens()" thay th cho 1 con tr um v i eval() 1.6.5 n um t m nh m k r ki n s tr th d ng l i nhi u nh ks tr nd m nc i s d ng s c thay th , ta t p trung trong d cc nd ng, m r nh v cs d n tr v li th c th uh t ng l c ch 1.6.6 t t qu c ng d li u hay 1 m ng d c thi c t l tr v u gi email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 25 L u m u thi t k . Currying 47 II.T mng arrays cho ti các đi tng objects 48 2.1 .Các phn t, các thuc tính, các phng thc 50 Lp trình hng đi tng trong Javascript và các kiu mu thit k Ngô Quang. 2.2 .Các mng arrays kt hp 50 2.3 .Các truy cp vào các thuc tính ca đi tng 51 2.4.Cách gi các phng thc ca 1 đi tng 53 2.5.Cách bin đi các thuc tính / phng thc 54 2.6 .Các. hàm functions là các đi tng objects mà :  Có th to ra 1 cách linh hot trong thi gian chy trong xut quá trình thc thi ca chng trình  Có th gán vào các bin và có th tham chiu