标签： JavaScript

EventSource 是浏览器端配合服务端事件（Server-Sent Events）使用的技术。和 WebSocket 相比，服务端事件是单向推送，而 WebSocket 是双向通信。

浏览器端

// 第二个参数是可选的，withCredentials 目前用于跨域 cookie，默认 false
const es = new EventSource(url, { withCredentials: true });
es.addEventListener('error', err => console.error(err));
// 监听 message 事件
es.addEventListener('message', evt => console.log(evt.data));
// 监听 type/custom 事件
es.addEventListener('type/custom', evt => console.log(evt.data));

EventSource 要求的是持续不断的输出，如果请求正常地结束终止了，那么客户端会再次自动发起连接，除非显式地调用 close() 方法来结束连接。

服务端

服务端的实现是返回标记为 Content-Type: text/event-stream 的持续内容，其内容的基本格式是：

event: evt-type
data: any message

其中，event 对应 EventSource 监听的事件类型，但该内容是可选的，如果没指定 event，那么则被 message 事件监听（可简化为 es.onmessage）。

紧邻的 data 字段会把内容合并起来，连接内容是一个空行。

直接以 : 开头的内容则是注释，不被解析使用。

（更多…）

Node.JS 中，同一个模块多次 require 得到的是同一个对象，这意味着修改了一个模块的内部值是可以在别的引用了该模块的地方生效的。

Webpack 的打包机制也是基于引用同一个对象来实现的，故同理。

示例代码

mod.js

module.exports = test;

function test() {
   return test.data; 
}

test.add = function(data) {
    this.data.push(data);
};

test.data = [];

comA.js

const mod = require('./mod');

mod.add(1);
mod.add(2);
mod.add(3);

console.log('in comA');

index.js

const mod = require('./mod');
require('./comA');

console.log(mod());   // ==> [1, 2, 3]

JavaScript 中 this 的指向根据上下文及使用方式而有所不同。

全局上下文 Global Context

在全局上下文（不在函数体内）中总指向全局对象，如在浏览器中是 window，在 Node.js 则是 global。

函数上下文 Function Context

• 简单调用
  • 严格模式：undefined
  • 非严格模式：全局对象
  • 可用 call 或 apply 来改变 this
• 作为对象的方法：指向直接所在的对象，如 a.b.c() 中 c 的 this 指向 b，适用于普通的对象、原型链方法和 getter/setter。
• 作为构造函数，指向正在构建的对象
• 作为 DOM 事件处理函数，指向触发事件的元素（指的是外层函数，如果是多层，遵循其余规则）
• bind：用 f.bind(object) 来返回新的绑定 this 的函数，不论怎么调用，如通过对象方法调用、call 或 apply 都不会改变 this。再次 bind 也不会改变。
• 箭头函数（arrow function）：this 指向词法上下文（实际运行生成箭头函数时上下文）的 this，不会被调用方式改变，但会因生成方式而不同。

var obj = {
    bar: function() {
        var x = (() => this);
        return x;
    }
};

var fn = obj.bar();
console.log(fn() === obj); // true

var fn2 = obj.bar;
console.log(fn2()() == window); // true

（更多…）

对于下面这段 js

function async3() {
  createPromise()
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    })
    .finally(() => {
        console.log('finally');
    });
}

其对应 async/await 版本是

async function async2() {
    try {
      const ret = await createPromise();
      console.log(ret);
    } catch (e) {
      console.error(e);
    } finally {
      console.log('finally');
    }
}

经 babel 转为 ES5 后，除了必要的 babel-polypill，会生成以下代码，其中 _asyncToGenerator 不会多次生成。

var async2 = function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    var ret;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 3;
            return createPromise();

          case 3:
            ret = _context.sent;

            console.log(ret);
            _context.next = 10;
            break;

          case 7:
            _context.prev = 7;
            _context.t0 = _context['catch'](0);

            console.error(_context.t0);

          case 10:
            _context.prev = 10;

            console.log('finally');
            return _context.finish(10);

          case 13:
          case 'end':
            return _context.stop();
        }
      }
    }, _callee, this, [[0, 7, 10, 13]]);
  }));

  return function async2() {
    return _ref.apply(this, arguments);
  };
}();

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

写法上直观了的，但在浏览器端，还是有些代价，生成的代码会多出不少。

实现中的 fetch 是希望能比 XMLHttpRequest 更好地做网络请求。

fetch('/')
    .then(res => { 
       if(res.ok) {
         return res.text();
       } else {
         throw new TypeError(res.statusText);
       }
    })
    .then(text => console.log(text.length))
    .catch(err => console.error(err.message));

Reference

注意点：

1. fetch 仅在网络因素下 reject，业务的错误，如 502 或 404 等会 resolve，需要判断 response 是否 ok
2. 默认不携带 cookie，需要明确指定
3. 跨域时会受 CSP 控制影响，需要配置

• Fetch API

一直意味在 JavaScript 中也和别的语言一样会触发错误，所以一直依赖使用除法都先小心地做个判断。但偶然中却发现并不需要在做除法前判断，因为不会报错，只需要拿到结果后进行处理即可。

发现不会报错后，稍微去看了一下规定：

Infinity / Infinity = NaN
Infinity / 0 = Infinity
-Infinity / 0 = -Infinity
Infinity / nonZeroFinite = Infinity
-Infinity / nonZeroFinite = -Infinity
aPositive / Infinity = 0
aNegative / Infinity = -0
0 / 0 = NaN
aPositive / 0 = Infinity
aNegative / 0 - -Infinity