What's new with js
This commit is contained in:
Jeremy Likness
parent
dad9a93078
commit
2086a20e3c
41
pwa.js
41
pwa.js
|
|
@ -33,7 +33,7 @@ class Pwa {
|
|||
* Cache version
|
||||
* @type {number}
|
||||
*/
|
||||
this.CACHE_VERSION = 1.2;
|
||||
this.CACHE_VERSION = 1.3;
|
||||
/**
|
||||
* Pre-emptive files to cache
|
||||
* @type {string[]}
|
||||
|
|
@ -181,27 +181,28 @@ class Pwa {
|
|||
this.scope.addEventListener('fetch', event => {
|
||||
event.respondWith(
|
||||
caches.open(this.CACHE_NAME).then(async cache => {
|
||||
if (!event.request.url.startsWith("http://localhost")) {
|
||||
const response = await cache.match(event.request);
|
||||
if (response) {
|
||||
// found it, see if expired
|
||||
const headers = response.headers.entries();
|
||||
let date = null;
|
||||
for (let pair of headers) {
|
||||
if (pair[0] === 'date') {
|
||||
date = new Date(pair[1]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!date) {
|
||||
return response;
|
||||
}
|
||||
const age = parseInt(((new Date().getTime() - date.getTime()) / 1000).toString());
|
||||
const ttl = this.getTTL(event.request.url);
|
||||
if (ttl === null || (ttl && age < ttl)) {
|
||||
return response;
|
||||
if (event.request.url.startsWith("http://localhost")) {
|
||||
return fetch(event.request.clone());
|
||||
}
|
||||
const response = await cache.match(event.request);
|
||||
if (response) {
|
||||
// found it, see if expired
|
||||
const headers = response.headers.entries();
|
||||
let date = null;
|
||||
for (let pair of headers) {
|
||||
if (pair[0] === 'date') {
|
||||
date = new Date(pair[1]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!date) {
|
||||
return response;
|
||||
}
|
||||
const age = parseInt(((new Date().getTime() - date.getTime()) / 1000).toString());
|
||||
const ttl = this.getTTL(event.request.url);
|
||||
if (ttl === null || (ttl && age < ttl)) {
|
||||
return response;
|
||||
}
|
||||
}
|
||||
// not found or expired, fresh request
|
||||
return fetch(event.request.clone()).then(resp => {
|
||||
|
|
|
|||
|
|
@ -2,25 +2,20 @@
|
|||
<h1>Arrow Functions (Gosinta)</h1>
|
||||
<pre>
|
||||
var solarsystem = {
|
||||
planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter',
|
||||
'Saturn', 'Uranus', 'Neptune', 'Pluto (?)'],
|
||||
planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune', 'Pluto (?)'],
|
||||
showPlanets: function() {
|
||||
this.planets.forEach(function(planet, idx) {
|
||||
console.log(this.planets[idx]);
|
||||
})
|
||||
}
|
||||
};
|
||||
this.planets.forEach(function(planet, idx) {
|
||||
console.log(this.planets[idx]);});
|
||||
}};
|
||||
solarsystem.showPlanets(); // crash! ⛔
|
||||
</pre>
|
||||
<pre class="appear">
|
||||
var solarsystem = {
|
||||
planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter',
|
||||
'Saturn', 'Uranus', 'Neptune', 'Pluto (?)'],
|
||||
planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune', 'Pluto (?)'],
|
||||
showPlanets: function() {
|
||||
this.planets.forEach((planet, idx) => {
|
||||
console.log(this.planets[idx]);
|
||||
})
|
||||
}
|
||||
};
|
||||
this.planets.forEach((planet, idx) => {
|
||||
console.log(this.planets[idx]);});
|
||||
}};
|
||||
solarsystem.showPlanets(); // success! 🌍
|
||||
</pre>
|
||||
</pre>
|
||||
<next-slide>130-string-power</next-slide>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<title>String Power</title>
|
||||
<h1>String Power</h1>
|
||||
<pre>
|
||||
const code = "Pure JavaScript and clean code make great apps";
|
||||
</pre>
|
||||
<pre class="appear">
|
||||
if (code.startsWith("Pure JavaScript") &&
|
||||
code.includes("clean code")) {
|
||||
console.log(`${code} is ${code.endsWith("great apps")}`);
|
||||
}
|
||||
</pre>
|
||||
<pre class="appear">"Pure JavaScript and clean code make great apps is true"</pre>
|
||||
<next-slide>140-spread-operator</next-slide>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<title>The Spread Operator</title>
|
||||
<h1>The Spread Operator</h1>
|
||||
<pre>
|
||||
const list = [1,1,2,3,5];
|
||||
const bigger_list = [...list, 8, 13];
|
||||
// [1, 1, 2, 3, 5, 8, 13];
|
||||
</pre>
|
||||
<pre class="appear">
|
||||
const fn = (x, y, z) => x + y + z;
|
||||
fn(bigger_list);
|
||||
// "1,1,2,3,5,8,13ndefinedundefined" ([1,1,2,3,5,8,13] + undefined + undefined)
|
||||
fn(...bigger_list);
|
||||
// 4 (1 + 1 + 2)
|
||||
</pre>
|
||||
<pre class="appear">
|
||||
const src = { foo: "bar" };
|
||||
const cpy = { ...src }; // { foo: "bar" }
|
||||
const tgt = { ...src, bar: "foo" }
|
||||
// { foo: "bar", bar: "foo" }
|
||||
</pre>
|
||||
<next-slide>150-destructuring</next-slide>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<title>Destructuring</title>
|
||||
<h1>Destructuring</h1>
|
||||
<pre>
|
||||
var [x,y] = [1,2];
|
||||
// x=1, y=2
|
||||
[x,y] = [y,x];
|
||||
// x=2, y=1
|
||||
</pre>
|
||||
<pre class="appear">
|
||||
const obj = { foo: "bar", bar: "foo" };
|
||||
const {foo: f, bar} = obj;
|
||||
// f = "bar", bar = "foo";
|
||||
</pre>
|
||||
<pre class="appear">
|
||||
const twoRandos = () => [Math.random(), Math.random()];
|
||||
const randos = twoRandos();
|
||||
// [0.45235454, 0.6455656]
|
||||
const [random1, random2] = twoRandos();
|
||||
// random1 = 0.45235454, random2 = 0.6455656
|
||||
</pre>
|
||||
<next-slide>160-classes</next-slide>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<title>Classes</title>
|
||||
<h1>Classes</h1>
|
||||
<pre>
|
||||
class shape {
|
||||
constructor(sides) {
|
||||
this._sides = sides;
|
||||
}
|
||||
get sides() { return this._sides; }
|
||||
static makeShape(sides) {
|
||||
return new shape(sides);
|
||||
}
|
||||
}
|
||||
const triangle = shape.makeShape(3);
|
||||
// triangle.sides = 3
|
||||
</pre>
|
||||
<next-slide>165-classes-2</next-slide>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<title>Classes (2)</title>
|
||||
<h1>Classes</h1>
|
||||
<pre>
|
||||
class square extends shape {
|
||||
constructor() {
|
||||
super(4);
|
||||
}
|
||||
}
|
||||
|
||||
const sq = new square();
|
||||
// square.sides = 4;
|
||||
|
||||
const hex = sq.makeShape(6);
|
||||
// error: static method isn't inherited
|
||||
</pre>
|
||||
Loading…
Reference in New Issue