搞笑向， 面向IE8的webworker-ployfill

首先，这是一篇不严谨的博文。

本文仅供参考，无法在实际生产中运用。

在捯饬文件分片上传的过程中，我总是觉得单线程太慢了。

于是想，用webWorker呗。

首先，我们可以查看一下WebWorker的兼容性。根据MDN文档来看，主流浏览器都兼容。

但有个问题，MDN表示WebWorker只支持到IE10.如果要兼容到ie8，势必要维护两份上传代码，怎么破？？？

发挥我们聪明才智的时候到了

---

好了，我们可以开始开脑洞了，

要声明的是，我们只是实现Worker这个假的构造函数。

首先，WebWorker在书写逻辑上是同步的，但其实加载Worker这个行为是异步的。

其次，WebWorker依赖事件与主线程进行沟通，中间经过的数据会被toString()。

再者，WebWorker的api比较简单，模拟起来也比较方便。

---

首先来看Worker的interface定义

[Constructor(USVString scriptURL, optional WorkerOptions options), Exposed=(Window,Worker)]
interface Worker : EventTarget {
  void terminate();

  void postMessage(any message, optional sequence<object> transfer = []);
  attribute EventHandler onmessage;
  attribute EventHandler onmessageerror;
};

dictionary WorkerOptions {
  WorkerType type = "classic";
  RequestCredentials credentials = "omit"; // credentials is only used if type is "module"
  DOMString name = "";
};

enum WorkerType { "classic", "module" };

Worker includes AbstractWorker;

Worker接口继承了EventTarget,所以还能使用addEventListener removeEventListener这俩api

所以我们要实现一个假的Worker，需要实现以下内容：

• 加载Worker脚本

  • 加载规则为同域名，从根目录开始寻找。
  • 暂不做blob生成,对本篇文章主题而言没有意义。

• 实现以下内容

  • 实现onmessage
  • 实现onmessageerror (文章中暂不实现)
  • 实现close
  • 实现terminate (文章中暂不实现)
  • 实现addEventListener (文章中暂不实现)
  • 实现removeEventListener (文章中暂不实现)
  • 实现个假事件。

一步一步来

---

为了模拟Worker的同步书写方式

我们需要实现一个同步加载脚本的方法 (●ﾟωﾟ●)

注：在现代浏览器里已经不赞成使用了

(function (root) {
    var cache = {};

    // debug
    window.__rc = cache;
    var module = {};
    module.exports = null;

    var config = {
        rootPath: ''
    };

    function hash(str) {
      var hash = 5381,
          i    = str.length;

      while(i) {
        hash = (hash * 33) ^ str.charCodeAt(--i);
      }

      /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
       * integers. Since we want the results to be always positive, convert the
       * signed int to an unsigned by doing an unsigned bitshift. */
      return hash >>> 0;
    }

    var defaultShimFunction = function (code, f) {
        if (f) {
            return f.replace('[[code]]', code);
        }
        return code;
    };
    root.require = function (scriptPath, shim) {
        var path = scriptPath;
        shim = shim || '';
        if (/^(\/|https?:\/\/)/.test(scriptPath) !== true) {
            path = config.rootPath + scriptPath;
        }
        if (/\.js$/.test(path) === false) {
            path += '/index.js';
        }
        var keyName = path + '?hash=' + hash(shim);
        if (cache[path]) {
            if (cache[keyName]) {
                return cache[keyName]
            }
            eval(defaultShimFunction(cache[path], shim));
            return cache[keyName] = module.exports;
        }
        var request = new XMLHttpRequest();
        request.open('GET', path, false);
        request.send(null);
        if (request.status === 200) {
            cache[path] = request.responseText;
            eval(defaultShimFunction(cache[path], shim));
            cache[keyName] = module.exports;
        }
        return cache[keyName];
    };

    root.require.config = function (opts) {
        for (var i in opts) {
            config[i] = opts[i]
        }
    };
}(window));

(๑´ㅂ`๑)上述代码不要在意，主要实现的功能其实就是特别智障的在浏览器里同步加载commonjs模块。。。

加了个垫片，方便操作

万事具备，只欠东风

来吧，直接上代码，worker-ployfill.js

window.__wbus = {
    _lis: {},
    on: function (evt, fn) {
        this._lis[evt] = fn;
    },
    off: function (evt) {
        if (!evt) {
            this._lis = {};
            return;
        }
        delete this._lis[evt];
        delete this._lis['close' + evt];
    },
    emit: function (evt, data) {
        this._lis[evt] && this._lis[evt](data);
    }
};

function copy (a) {
    if (typeof a === 'object') {
        var c = JSON.stringify(a);
        return JSON.parse(c);
    }
    return a;
}

function FakeEvent (data, id) {
    this.data = copy(data);
    this.type = 'message';
    this.id = id;
}

var uuid = 1;

var FakeWorker = function (p) {
    var self = this;
    self._id = uuid++;
    window.__wbus.on(self._id, function (data) {
        var Fe = new FakeEvent(data, self._id);
        self.onmessage && self.onmessage.call(Fe, Fe);
    });

    window.__wbus.on('close' + self._id, function (data) {
        self.terminates();
    });
    var path = location.protocol + '//' + location.host + '/' + p;
    var wf = require(path, '
        module.exports = function () {\
            var self = {};\
            self.postMessage = function (data) {\
                window.__wbus.emit(' + self._id + ', data);\
            };\
            self.onmessage = function () {};\
            self.close = function () { window.__wbus.emit(close' + self._id + ') };\
            [[code]]\
            ;return self;\
        }\
    ');

    this.worker = wf();
};

FakeWorker.prototype.onmessage = function () {
};

FakeWorker.prototype.postMessage = function (data) {
    if (!this.worker) {
        throw new ReferenceError('Worker already stoped!');
    }
    var d = new FakeEvent(data, this._id);
    this.worker.onmessage && this.worker.onmessage.call(d, d);
};

FakeWorker.prototype.terminates = function () {
    this.worker = null;
    window.__wbus.off(this._id);
};

module.exports = FakeWorker;

智障儿童欢乐多。

来，让我们玩一把吧，下面是测试代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试23333</title>
</head>
<body>
    <span>
        {{text}}
    </span>
    <script type="text/javascript" src="/static/js/require.js"></script>
    <script type="text/javascript">
        require.config({
            rootPath: '/node_modules/'
        });
    </script>
    <script type="text/javascript">
        var Worker = require('/static/js/worker-ployfill.js');
        var cpus = require('cpus/browser.js')().length;
        var workers = [];

        for (var i = 0; i < cpus; i ++) {
            workers[i] = new Worker('static/js/worker-test.js');
        }

        workers.forEach((item) => {
            item.onmessage = function (e) {
                console.log('main thread'),
                console.log('thread id: %s', e.id);
                console.log('msg: %s', JSON.stringify(e.data));
            };
            item.postMessage({
                message: 'message from main'
            });
        })
    </script>
</body>
</html>

// worker-test.js
self.onmessage = function (e) {
    console.log('worker thread'),
    console.log('thread id: %s', e.id);
    console.log('msg: %s', JSON.stringify(e.data));
    self.postMessage({
        message: 'from FackWorker'
    });
};

你看，智障系列

233333333.