Summer。桑莫。夏天

ES6 - let, const, Block-Level Scope let, const, var, function declaration, block-level scope, hoisting 相關筆記。 let 變數宣告，功能類似 var ，但有以下特性： block-level scope (塊級作用域) 沒有 hoising (變量提升) temporal dead zone, TDZ：宣告後才能使用 不允許重複宣告 const 常數宣告，有以下特性： 對於 primitives 的變數，宣告後就不能改變值，因此宣告時一定要設值，並且變數名指向資料；對於非 primitives 的變數，變數名指向資料所在的 address，不可重新賦值但可改變該 address 的內容 block-level scope 沒有 hoising temporal dead zone, TDZ 不允許重複宣告 Block-Level Scope 塊級作用域 javascript 只有 global 和 function 兩種 scope，意即若使用 var 與 function 做變數宣告，只能將變數的活動範圍限制在全域或函數中，這可能會產生非預期的結果。 例如：使用 var 宣告 i 當成 for loop 的 counter，當 i 離開 for loop 後，仍可被存取，因此得到 a[6]() 為 10。 var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); //10 改用 ES6 即可解決這樣的問題，let (和 const)有 block-level scope 特性，離開大括號({...})的範圍後便失效。 var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[2](); //2 Top-Level LexicalEnvironment Top-Level LexicalEnviro...

利用PhantomJS為SPA做SEO 隨著前端技術的不斷更新，使用前端框架(React、Vue等)來建構網站是普遍現象。但目前搜尋引擎無法有效讀取使用JavaScript render出來的頁面，且使用 AJAX Crawling 的解法只適用於Google又此法已被廢棄，因此另一解法就是使用PhantomJS。 這裡使用 Node.js + PhantomJS 為SPA/以Ajax讀取資料的頁面做SEO。

T3 - 構建大型網站的JavaScript框架 T3是一個JavaScript UI Framework，主要的功能是讓程式碼更結構化。如果網站內的程式碼很雜亂的話，很適合用來整理散落在各處的程式碼(尤其是針對年紀大需要翻新的大型網站)。而整理方式就是將程式碼分成幾個部份：Application、Module、Serveice、Behavior等來處理。頁面UI整理成Module，Module彼此共用的方法或事件整理成Behavior，而非UI邏輯且多個Module會共用的部份(例如：與Server端溝通取資料)則抽出來成為Service。

jQuery的陣列操作：$.map()與$.grep() 這陣子在整理系統內的程式碼，發現自己曾經使用一些過時的方法(例如：native javascript操作陣列)，而非使用jQuery提供的API來撰寫。以下整理並比較這兩種方法的差異。

JavaScript Object Oriented Programming 關於JavaScript Object Oriented Programming，會寫這一系列的文章是因為希望自己的JavaScript程式碼能更物件導向、更模組化。這一系列的文章有以下的內容...

JavaScript Object Oriented Programming - Early and Late Binding JavaScript在呼叫的時候設定this的值，而這個this的值有可能不是我們預期的結果。下面有幾個範例。 this的值並非預期的狀況 以下都會由Menu這個建構子作為範例。 function Menu(elem){ //... }; var menu = new Menu(document.createElement('div'));

JavaScript Object Oriented Programming - Exceptions 「例外(Exceptions)」是一個特別且重要的處理錯誤的方法。

JavaScript Object Oriented Programming - Factory Constructor Pattern 「Factory Constructor Pattern」不使用new來宣告新物件，新物件用function call來建立，如下： var animal = Animal('fox'); var rabbit = Rabbit('rab');

JavaScript Object Oriented Programming - All-in-one Constructor Pattern 所有的method和property都放在consctructor中，而不使用prototype。 Declaration function Animal(name){ this.name = name; this.run = function(){ console.log('running '+ this.name); } }; var animal = new Animal('Foxie'); animal.run();

JavaScript Object Oriented Programming - Pseudo-Classical Pattern Pseudo-class declaration 在pseudo-classical pattern中，物件是由「建構子」(constructor)這個函式所建立，並把method放到建構子的prototype中。

JavaScript Object Oriented Programming - The "instanceof" operator The instanceof operator instanceof 允許檢查物件是否為給定的constructor所產生的。 function Rabbit(){}; var rabbit = new Rabbit(); console.log(rabbit instanceof Rabbit); //ture rabbit的constructor的確是Rabbit。

constructor 物件有內建的屬性「constructor」，意即「參考建立此物件的function」。 範例 我們來建立一個簡單的constructor，然後看看新的物件是否有正確的constructor的值。 function Rabbit(){}; var rabbit = new Rabbit(); console.log(rabbit.constructor == Rabbit); //true

Object Oriented Programming - Extending Natives Native JavaScript物件將method存在prototype中。例如：當一個新的物件被建立，內容為空，但為何可以使用toString這個method？(參考下面的程式碼) var obj = { }; console.log( obj.toString() ); 這是因為 var obj = {}; ( 即 var obj = new Object(); )。而Object是Native JavaScript的建構式，obj由Object所產生，因此 obj.__proto__ == Object.prototype; 。所以，所有在Object.prototype中的屬性，obj皆可使用(包含 Object.prototype.toString )。這就是為什麼obj可以使用 toString 這個method了。對於Array、Function和其他物件也是相同的道理，而它們的method即在Array.prototype、Function.prototype等。

prototypal-inheritance 對大多數的語言來說，它們擁有「Class」和「Object」，而Class繼承其它的Class。對於JavaScript來說，繼承是使用prototype來實作的，意即沒有Class，而是由物件繼承其它的物件來達成繼承。

Plugin的撰寫 又重新看了 jQuery: Novice to Ninja ，所以做了些關於Plugin的筆記。以下使用 jQuery Newsticker Plugin 作為說明範例。

Angular.js Form Example 表單練習 這個表單會展示常用表單元件、基本Directive和Controller的功能運作。由於網路上有很多大大的教學文章，因此在這裡只記錄一些我在學習/實作上遇到的重要觀念。

JavaScript Design Pattern - Strategy 策略模式 JavaScript Design Pattern 「Strategy 策略模式」 筆記。

JavaScript - Event Delegation 事件委派 JavaScript Pattern 「Event Delegation 事件委派」 筆記。

JavaScript Design Pattern - Iterator 迭代器模式 JavaScript Design Pattern 「Iterator 迭代器模式」 筆記。

JavaScript Design Pattern - Factory JavaScript Design Pattern 「Factory 工廠模式」 筆記。