JavaScript patterns chapter 8 of mine
Download as PPTX, PDF0 likes304 views
The document discusses several patterns for DOM scripting and browser interactions, including: - Separating concerns with HTML, CSS, and JavaScript handling specific tasks - Checking for function existence rather than browser strings to enable capabilities - Avoiding repeated DOM access and caching references for efficiency - Using document fragments to batch DOM updates for performance - Attaching event handlers with addEventListener rather than on- attributes - Implementing event delegation by binding to parents rather than each child - Offloading long tasks to Web Workers to avoid blocking the UI thread - Fetching remote data through XMLHttpRequest or JSONP calls across domains
JavaScript patterns chapter 8 of mine
- 1. DOM and Browser Patterns Carl 2016/02/23 1
- 2. Outline Separation of Concerns DOM Scripting Events Long-Running Scripts Remote Scripting Deploying JavaScript Loading Strategies Summary 2
- 4. Separation of Concerns Test without CSS/JS No inline event handlers or style(?) ReactJS JSX: <button onClick={this.test(this)}>Submit</button> Semantically HTML elements 4
- 5. Capability Detection Check function exist instead of check browser agent // antipattern if (navigator.userAgent.indexOf('MSIE') !== −1) { document.attachEvent('onclick', console.log); } // better if (document.attachEvent) { document.attachEvent('onclick', console.log); } // or even more specific if (typeof document.attachEvent !== "undefined") { document.attachEvent('onclick', console.log); } 5
- 6. DOM Scriping DOM Access DOM Manipulation 6
- 7. DOM Access Avoiding DOM access in loops Assigning DOM references to local variables and working with the locals Using selectors API where available Caching the length when iterating over HTML collections (see Chapter 2) 7
- 8. Avoiding DOM access in loops // antipattern for (var i = 0; i < 100; i += 1) { document.getElementById("result").innerHTML += i + ", "; } // better - update a local variable var i, content = ""; for (i = 0; i < 100; i += 1) { content += i + ","; } document.getElementById("result").innerHTML += content; 8
- 9. Assigning DOM references to local variables and working with the locals // antipattern var padding = document.getElementById("result").style.padding, margin = document.getElementById("result").style.margin; // better var style = document.getElementById("result").style, padding = style.padding, margin = style.margin; 9
- 10. Using selectors API where available document.querySelector("ul .selected"); document.querySelectorAll("#widget .class"); https://developer.mozilla.org/zh-TW/docs/Web/API/document.querySelector Faster than jQuery Dom method document.getElementById(myid) is still the fatest https://jsperf.com/getelementbyid-vs-queryselector/25 10
- 11. DOM Manipulation(Document Fragment) // antipattern // appending nodes as they are created var p, t; p = document.createElement('p'); document.body.appendChild(p); p = document.createElement('p'); document.body.appendChild(p); 11
- 12. DOM Manipulation(Document Fragment) var p, t, frag; frag = document.createDocumentFragment(); p = document.createElement('p'); frag.appendChild(p); p = document.createElement('p'); frag.appendChild(p); document.body.appendChild(frag); https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment 12
- 13. DOM Manipulation(Document Fragment) var oldnode = document.getElementById('result'), clone = oldnode.cloneNode(true); // cloneNode(true) if the children of the node should also be cloned, or false to clone only the specified node. https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode // work with the clone... // when you're done: oldnode.parentNode.replaceChild(clone, oldnode); 13
- 15. Events Handling Use addEventListener/attachEvent instead of onxxx(ex: onclick) onxxx bind to only one event 15
- 16. Event Delegation Bind event to parent instead of child Use event.target to check the target node Pros reduce event listeners Cons hard to find the event listener from browser developer tool Demo http://codepen.io/anon/pen/vLqvaV 16
- 17. Event Delegation ReactJS JSX: <button onClick={this.test(this)}>Submit</button> React use single top level event listener https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood- autobinding-and-event-delegation 17
- 18. Long-Running Scripts (setTimeout) var timer1 = setTimeout(myfunction1, 50); var timer2 = setTimeout(myfunction2, 100); var timer3 = setTimeout(myfunction3, 150); 18
- 19. Long-Running Scripts (Web Wrokers) var ww = new Worker('my_web_worker.js'); ww.onmessage = function (event) { document.body.innerHTML += "<p>message from the background thread: " + event.data + "</p>"; }; // Output message from the background thread: hello there message from the background thread: halfway there, `tmp` is now 3749999975000001 message from the background thread: all done 19 // my_web_worker.js var end = 1e8, tmp = 1; postMessage('hello there'); while (end) { end -= 1; tmp += end; if (end === 5e7) { // 5e7 is the half of 1e8 postMessage('halfway there, `tmp` is now ' + tmp); } } postMessage('all done');
- 20. Remote Scripting XMLHttpRequest JSONP Frames and Image Beacons 20
- 21. XMLHttpRequest var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState !== 4) { // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState return false; } if (xhr.status !== 200) { alert("Error, status code: " + xhr.status); return false; } document.body.innerHTML += "<pre>" + xhr.responseText + "</pre>"; }; xhr.open("GET", "page.html", true); xhr.send(""); 21
- 22. JSONP Not restricted by the same-domain policy (Use script tag) Often JSON wrapped in a function call https://zh.wikipedia.org/wiki/JSONP var script = document.createElement("script"); script.src = “http://remote.org/getdata.php?callback=myHandler”; document.body.appendChild(script); // Output of http://example.org/getdata.php?callback=myHandler myHandler({“hello”: “world”}); 22
Editor's Notes
- #20: IE10才開始支援