JavaScript Tips
XMLHttpRequest 和非同步呼叫的出現，大幅改變了網頁程式的運作思惟。在第一個階段 jQuery 勝出了，它能夠操弄 DOM，但對於應用程式的結構，並未提出好的組織和維護方式。
9-tricks-for-kickass-javascript-developers-in-2019 var vs let vs const in Javascript Javascript Inheritance and the Prototype Chain JavaScript Changes that You Will Love IE5 在 1998 年問世，自此可以在瀏覽器裡使用 XMLHttpRequest (XHR) 執行非同步網路呼叫 How to Build Large Scale Application
Debug console.log() debug advice Steps of AJAX Operation Debug Using Chrome DevTools
Service Worker service-worker.js update frequence
javascript-from-callbacks-to-async-await map is synchronous
最簡化的語法架構
<script type="text/javascript"> // Your code here </script>
舊版 Browser 使用 XHTML 的情況
<script type="text/javascript"> <!-- // Your code here --> </script>
<script type="text/javascript"><!--//--><![CDATA[//><!-- // Your code here //--><!]]></script>
範例: <div id="demo"><button type="button" onclick="loadDoc()">Change Content</button></div>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Object 有 Property, Method, Event 設定值，像 Document 是用來代表 JavaScript 存取中的網頁。
browserName.indexOf
myscript=new Object();
myscript.init=function()
{
// Some code
};
myscript.validate=function()
{
// Some code
};
var dynamicLinks={
linksInit:function()
{
if (!document.getElementById || !document.createTextNode)➥
{ return; }
var openLink=dynamicLinks.createLink('#','open');
dynamicLinks.appendLink(openLink);
var closeLink=dynamicLinks.createLink('closed.html','close');
dynamicLinks.appendLink(closeLink,'main');
},
createLink:function(linkTarget,linkName)
{
if (linkTarget == null) { linkTarget = '#'; }
if (linkName == null) { linkName = 'dummy'; }
var tempLink=document.createElement('a');
tempLink.setAttribute('href',linkTarget);
tempLink.appendChild(document.createTextNode(linkName));
return tempLink;
},
appendLink:function(sourceLink,elementId)
{
var element=false;
if (elementId==null || !document.getElementById(elementId))
{
element=document.body;
}
if(!element){element=document.getElementById(elementId)}
element.appendChild(sourceLink);
}
}
window.onload=dynamicLinks.linksInit;
window Methods: prompt() alert() confirm()
document.getElementById('id'), document.getElementByTagName('p') Change Table
<button name="submit" value="change table"
onclick="document.getElementById('table2').innerHTML = document.getElementById('table1').innerHTML;">Change Table</button>
document.createTextNode
var firstpara = document.getElementByTagName('p')[0];
var lastListElement = listElements[listElements.length - 1];
var linkItems = document.getElementsByTagName('li');
for(var i = 0; i < linkItems.length; i++)
{
// Do something...
}
如果 myFunc(varible) 在 HTML 載入前就執行，會遇到 Null Exception 錯誤，要調整順序，或用 window.onload or $(document).ready 處理。
第一排選項結果會決定第二排是否能選: 取消第二排選擇結果
Products.Collage: setupLinks(query)
Chrome DevTools Audit Feature to measure and optimize performance part-1
Object Literal vs Object Constructor
var mything = new SomeThing();
# equals to
var mything = {};
SomeThing.call(mything);
var myObj = {
myProp1:"abc",
myProp2:"xyz",
}
function myObj(){
this.myProp1 = "abc";
this.myProp2 = "xyz";
}
在 Construction Function 之前宣告 'use strict'; 後，this 預設值會是 undefined，呼叫時若缺少 new 會產生錯誤。
// when the user moves the mouse, get the name property
// from each feature under the mouse and display it
function onMouseMove(browserEvent) {
var coordinate = browserEvent.coordinate;
var pixel = map.getPixelFromCoordinate(coordinate);
var el = document.getElementById('name');
el.innerHTML = '';
map.forEachFeatureAtPixel(pixel, function(feature) {
el.innerHTML += feature.get('name') + '<br />';
});
}
map.on('pointermove', onMouseMove);
DOM
反覆利用 getElementsByTagName 可以存取想要的 Element，但效果通常不好而且有所侷限，善用 DOM 的 Children, Parents, Siblings 可能才是理想的方式。Document 裡的 Node 有 nodeType (例如 element, attribute, comment, text) 和 nodeName (例如 li 或 #text)，由於 nodeName 可能是大寫或小寫的英文，常用 if(obj.nodeName.toLowerCase()=='li'){}; 的技巧，利用 nodeValue 可以存取 Node 的內容，例如 Element 的內容是 Null。
document.getElementsByTagName('p')[0].nodeValue='Hello World';
# Enough for Assigning the First Paragraph Content? No
document.getElementsByTagName('p')[0].firstChild.nodeValue='Hello World';
# First Paragraph is an Element, So firstChild is Needed
yourElement.firstChild 和 yourElement.childNodes[0] 同義，yourElement.lastChild 和 yourElement.childNodes[yourElement.childNodes.length-1] 同義；利用 hasChildNodes() 可以檢查狀態。
要看一個變數有沒有, 該用 if (v != undefined) 還是 if (!v) ? 用 if (v) 別用 == 或 != 因為 null 空白 null string 所代表涵義都不太一樣，undefined 也是。 If you want to be careful, you should be more specific, like if (undefined !== v) or if (typeof v !== 'undefined'), especially if you are expecting numerical values. It causes errors easily if u just write like 'if (!v) { ... }' when v is undefined. The best way should be still using typeof.
if(typeof(strName) == ‘undefined’)
The Three Big Lies About JavaScript
d3.js Cross-Origin Resource Sharing Tree Structure particles.js
Why the JavaScript Obsession? #1 #2 unavoidable and should be embraced: Angular Story 主要四種技術分類：
- Packaging: Downloading JavaScript packages (NPM, bower)
- Build Tools: Tools to compile JavaScript and other things(Grunt, gulp, npm)
- Dependency Management/Module Loading: Load and user dependent JavaScript modules in your code (requirejs, systemjs, commonjs)
- Components: Organize your code into smaller, testable, easy to read bits (Angular, React, Patternslib)
redux : a predictable state container for JavaScript apps. collective.js.charcount remove character counter
Sortable Drag and Drop Test with Selenium
Debugging Production Only Issues
Visualization of Variable Scope
https://levelup.gitconnected.com/3-javascript-refactoring-techniques-for-clean-code-c356be1abbcb
Page Load, Focus, UnFocus, Exit Event
常見的網頁狀態及其判斷方式: 進入網頁分成 ready 和 onload 兩種，後者是指網頁完全載入完畢，包含圖片、素材等，而前者則是網頁 DOM 載入完畢就會被觸發，一般來說 ready 會在 onload 之前發生。
ready 事件只有 jQuery 才提供。
getUserMedia 取得麥克風耳機等設備
IE Compatible
IE8 Conditional Comment jquery.recurrenceinput.js
Disabling Copy and Paste Web Pages
Elegant Way to Implement Animated Sliding Panels
IE9: plone.formwidget.recurrence
Security: Zero-Width Characters
JavaScript Cost 如何降低效能成本; 最佳化前後的實作不一是危險的: typeof null 的正確答案應是 object
V8 Engine
2008 由 The Chromium Project 開發，被用於 Couchbase, MongoDB, Node.js 裡，透過 inlining, elision, inline caching 技巧來動態執行最佳化。
pyV8 is a python wrapper for Google V8 engine, it act as a bridge between the Python and JavaScript objects, and support to hosting Google's v8 engine in a python script.