LeoOnTheEarth/sync-async.md

## sync-async.md

      
    Raw
  

              sync-async.md
            
          
    Sync & Async 重要觀念

JS 會優先執行 sync 的程式區塊之後再處理 async 的部分，以下是幾個範例
setTimeout(
    function() {
        console.log('其實我並不會因為 timeout 設為 0ms 就被馬上執行, 而是先完成之後 sync 的部分才會開始執行');
    },
    0
);

console.log('其實我會早一步被執行喲');
$.getJSON('/users', function(data) {
    conosle.dir({data:data});
});
$.getJSON('/contents', function(data) {
    conosle.dir({data:data});
});
$.getJSON('/comments', function(data) {
    conosle.dir({data:data});
});

while(1) {}

console.log('其實我永遠都不會被執行......同樣的前面三個 AJAX Request 一樣不會被執行');
Promise 簡介與實作

這個很複雜，就不打字了，有機會用講的
可以先看下面的 Promise.js 官網認識一下什麼是 Promise
https://www.promisejs.org/
認識 Promise 之前先講一個故事
// 從前從前，我們想要透過三個 AJAX 取得三種資料之後，再做一些處理
$.getJSON('/users', function(data) {
    var users = data;
    
    $.getJSON('/contents', function(data) {
        var contents = data;
        
        $.getJSON('/comments', function(data) {
            var comments = data;
            
            conosle.log(users, contents, comments);
        });
    });
});

// 只是循序地去用各個 API 取得的話時間會是 time1 + time2 + time3
// 假設時間花最多的是 time3，我們希望改進成最慢最慢也不要超過 time3 的時間
// 因此我們打算用下面的方式來作

var count = 0;
var _users = null;
var _contents = null;
var _comments = null;

function showResult() {
    if (3 === ++count) {
        conosle.log(_users, _contents, _comments);
    }
}

$.getJSON('/users', function(data) {
    showResult();
});
$.getJSON('/contents', function(data) {
    showResult();
});
$.getJSON('/comments', function(data) {
    showResult();
});

// 但是但是...這樣寫不是很方便啊
// 所以就有人想了 Promise 出來
// 前情提要到此結束...
// 接下來的劇情請看 https://www.promisejs.org/

Callback Hell

限制一定的 callback 層數來避免，TonyQ 是限制他自己最多用到 3 層的 callback，也聽說有公司是限制到 2 層
超過限制的 Callback 用一個 function 包起來處理
視情況也不見得需要用到 Promise 來處理流程的問題
好用工具介紹

"async.js"

Promise 好用的套件
https://github.com/caolan/async
async.map(
    ['users', 'contents', 'comments'],
    function(item, callback) {
        setTimeout(
            function() {
                $.getJSON(item, function(data) {
                    var err = function(e) {
                        console.log(e.message);
                    };

                    return callback(err, data);
                });
            },
            0
        );
    },
    function(err, results) {
	    console.log(results);
	})
);
也可以試試 async.waterfall async.parallel 等功能
async.js 算是 Promise 的一種實踐，只是多了一層功能導向的包裝，與 Promise 相無誰優誰劣的問題，總之看要解決什麼問題，再考慮要用那種方法處理
Node.js 中好用的 jQuery 替代品

https://www.npmjs.org/package/cheerio
思考 async 未來的發展

async 是屬於 Callback Design 的程式設計，因此操作了很多的 Callback function，變數的生命週期可能會變得越來越微小，小到在一個小 closure 就被釋放掉，最後最後，也許這樣的程式設計會越來越像 Functional Language 的樣子，讓我們試目以待
Publish–subscribe pattern (PubSub pattern)

async 程式開發的概念和 PubSub pattern 頗相符
Try JavaScript Native API

HTML5 之後的 JS API 已經進步很多，可以練習使用看看，也許可以把一些需求脫離必須使用 jQuery 來開發，同時 jQuery 開發 Team 也正在思考他們未來的定位，也許會改成全面使用新的 JS Native API，這個再觀察觀察
未來的 Web 開發

Web component (也許是 Web 開發的最後一塊拼圖)
http://webcomponents.org/
這邊也提到了 React.js，聽說是一種將頁面視為"狀態"的框架，有機會可以嘗試看看，聽說只要把頁面上的資料保存下來，就能很簡單地回復先前的頁面內容，但是通常都會有效能上的 issue，聽說 React.js 在效能上的 issue 有不錯的突破
在前端 MVC 的 SEO 通常會讓人擔心，但是可以花錢解決，可以花錢解決的問題就不是問題XD
手機的 Web 開發

小型專案，頁面不太複雜的情形下，再使用 RWD 是較適合的
中大型專案，像是 GMail 或是 FB 這種的，就不建議用 RWD，做個手機板專屬頁面是有其必要的
手機版的頁面也盡量是越簡化越好，以提升使用的順暢度