JavaScript Promise

JavaScript-Promise.md

JavaScript Promise

https://developers.google.com/web/fundamentals/getting-started/primers/promises

Promise 已获得 JavaScript 的原生支持！

人们究竟为何欢呼雀跃？

https://developers.google.com/web/fundamentals/getting-started/primers/promises#whats-all-the-fuss-about

Promise 术语

https://developers.google.com/web/fundamentals/getting-started/primers/promises#promise-terminology

Promise API 参考

https://developers.google.com/web/fundamentals/getting-started/primers/promises#promise-api-reference

对 XMLHttpRequest 执行 promise

旧 API 将更新为使用 promise，如有可能，采用后向兼容的方式。
XMLHttpRequest 是主要候选对象，不过，我们可编写一个作出 GET 请求的简单函数：

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

现在让我们来使用这一功能：

get('story.json').then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.error("Failed!", error);
})

https://github.com/googlesamples/web-fundamentals/blob/gh-pages/fundamentals/getting-started/primers/story.json

https://googlesamples.github.io/web-fundamentals/fundamentals/getting-started/primers/story.json

https://ufo-github.github.io/web-fundamentals/fundamentals/getting-started/primers/story.json

https://ufo-github.github.io/web-fundamentals/

es6-modules/readme.md

G:\wwwRoot\learning\es6-modules\readme.md

classlist

http://caniuse.com/#search=classlist

https://dom.spec.whatwg.org/#dom-element-classlist

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList

Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList集合。

使用 classList 是一个方便的替代方法，通过element.className作为空格分隔的字符串访问元素的类列表。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/className

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getAttribute

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute

设置指定元素上的一个属性值。如果属性已经存在，则更新该值;
否则将添加一个新的属性用指定的名称和值。

要获取属性的当前值，使用 getAttribute();
要删除一个属性，调用removeAttribute()。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/className

className 获取并设置指定元素的class属性的值。

https://developers.google.com/web/

https://developers.google.com/web/showcase/
https://developers.google.com/web/updates/
https://developers.google.com/web/tools/

https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/
https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/

https://developers.google.com/web/tools/service-worker-libraries/
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://developers.google.com/web/fundamentals/engage-and-retain/
https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

https://developers.google.com/web/fundamentals/discovery-and-monetization/
https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

https://developers.google.com/web/fundamentals/native-hardware/click-to-call/

NIST Telephone Time-of-Day Service 
<a href="tel:+1-303-499-7111">+1 (303) 499-7111</a>

https://developers.google.com/web/fundamentals/native-hardware/capturing-images/

<input type="file" accept="image/*" capture>

https://developers.google.com/web/fundamentals/design-and-ui/animations/asymmetric-animation-timing
https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance

https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/registration
https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https
https://developers.google.com/web/fundamentals/performance/http2/
https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content
https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content

https://github.com/html5rocks/www.html5rocks.com/pull/921/files
https://mathiasbynens.be/

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
https://developers.google.com/web/fundamentals/getting-started/primers/customelements
https://developers.google.com/web/fundamentals/getting-started/primers/media-source-extensions

http://w3c.github.io/webcomponents/spec/shadow/
https://dom.spec.whatwg.org/#shadow-trees

async-functions

https://developers.google.com/web/fundamentals/getting-started/primers/async-functions
https://developers.google.com/web/fundamentals/getting-started/primers/promises
https://gist.github.com/jakearchibald/0b37865637daf884943cf88c2cba1376
https://jakearchibald.com/2014/es7-async-functions/
https://github.com/tc39/proposal-async-iteration

服务工作线程

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://www.html5rocks.com/en/tutorials/workers/basics/
https://html.spec.whatwg.org/multipage/workers.html#dom-worker-postmessage

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

https://www.html5rocks.com/en/tutorials/appcache/beginner/
http://alistapart.com/article/application-cache-is-a-douchebag

https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web
https://developers.google.com/web/updates/2015/12/background-sync

ServiceWorker

http://caniuse.com/#search=ServiceWorker

Global 0% + 63.39% = 63.39%

https://jakearchibald.github.io/isserviceworkerready/

Web Workers

http://caniuse.com/#search=Worker
http://caniuse.com/#search=Web%20Workers

Global 94%

Shared Web Workers

Global 47.59%

FileReaderSync

Global 93.75%

IndexedDB

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

IndexedDB 是一种低级API用于客户端存储大量结构化数据(包括, 文件/ blobs)。
该API使用索引来实现对该数据的高性能搜索。
虽然 DOM 存储 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。
IndexedDB提供了一个解决方案。

Web_Workers_API

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API

Web Workers是一种机制，通过它可以使一个脚本操作在与Web应用程序的主执行线程分离的后台线程中运行。
这样做的优点是可以在单独的线程中执行繁琐的处理，让主（通常是UI）线程运行而不被阻塞/减慢。

使用 Web Workers

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers

Worker

https://developer.mozilla.org/zh-CN/docs/Web/API/Worker/Worker

Worker() 构造函数创建一个 Worker 对象，该对象执行指定的URL脚本。
这个脚本必须遵守 同源策略 。
如果 此URL有一个无效的语句，或者违反同源策略，则会抛出一个 SECURITY_ERR 类型的DOMException 。

Worker.postMessage()

https://developer.mozilla.org/zh-CN/docs/Web/API/Worker/postMessage

Worker 接口的 postMessage()方法向worker的内部作用域发送一个消息。
这接受单个参数，这是要发送给worker的数据。
数据可以是由结构化克隆算法处理的任何值或JavaScript对象，其包括循环引用。

ServiceWorker

https://developer.mozilla.org/zh-CN/docs/Web/API/ServiceWorker

ServiceWorker API 的 ServiceWorker接口 提供一个对一个服务工作者的引用。
多个浏览上下文（例如页面，工作者等）可以与相同的服务工作者相关联，每个都通过唯一的ServiceWorker对象。

使用 Service Workers

https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers

本文提供了有关开始使用 service workers所需的信息。
包括基本架构、注册一个service worker、一个新service worker的安装和激活过程、更新你的service worker、缓存控制和自定义响应,
这一切都在一个简单的具有离线功能的应用程序的上下文中。

https://serviceworke.rs/
https://github.com/mozilla/serviceworker-cookbook

https://github.com/mozilla/serviceworker-cookbook/blob/master/server.js
https://github.com/mozilla/serviceworker-cookbook/tree/master/fetching
https://github.com/mozilla/serviceworker-cookbook/blob/master/fetching/service-worker.js

service-worker-cookbook

https://github.com/ufo-github/serviceworker-cookbook

Angular2

https://www.cnblogs.com/yanxiaodi/p/5750860.html
https://www.cnblogs.com/whitewolf/p/5851196.html
https://github.com/greengerong/rebirth

https://www.cnblogs.com/jasondan/p/6380597.html
https://github.com/stanzhai/be-a-professional-programmer
https://www.cnblogs.com/bymax/p/5878113.html

https://www.cnblogs.com/sb19871023/p/3894452.html

chrome-extension://oemmndcbldboiebfnladdacbdfmadadm/http://liubin.org/promises-book/javascript-promise-book.pdf
https://dwqs.gitbooks.io/frontenddevhandbook/content/practice/front-end-skills.html

https://www.cnblogs.com/whitewolf/
https://github.com/greengerong/rebirth

最新Angular2案例

https://github.com/greengerong/rebirth
https://www.cnblogs.com/whitewolf/

http://greengerong.com/
https://www.amazingcounters.com/

http://greengerong.com/blog/2016/01/30/zone-dot-js-bao-li-zhi-mei/
http://greengerong.com/blog/2015/11/18/javascript-duo-xian-cheng-zhi-html5-web-worker/
http://greengerong.com/blog/2015/10/22/promisede-miao-yong/
http://greengerong.com/blog/2015/10/27/javascript-single-thread-and-browser-event-loop/
http://greengerong.com/blog/2015/11/20/ni-ying-gai-zhi-dao-de-jqueryji-qiao/

requestAnimationFrame

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法将在重绘之前调用的回调作为参数。

http://greengerong.com/blog/2015/11/18/javascript-duo-xian-cheng-zhi-html5-web-worker/
http://plnkr.co/edit/IoXkPw?p=preview
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers

async function & async callback js & ES7

https://gist.github.com/xgqfrms-GitHub/0b568d347fdf84fb07119491610efc92