webworker

4 years ago · e1823e4229
3 changed files with 172 additions and 0 deletions
--- a/demo.worker.js
+++ b/demo.worker.js
@ -0,0 +1,27 @@
 importScripts("./dist/fineui_without_jquery_polyfill.js");
 BI.initWorker();
 var Model = BI.inherit(Fix.Model, {
    state: function () {
        return {
            count: 0
        };
    },
    computed: {
        name: function () {
            return this.getText(this.model.count);
        }
    },
    actions: {
        addCount: function () {
            this.model.count += 1;
        }
    },
    getText (count) {
        return "被点击了" + count + "次";
    }
 });
 BI.model("demo.model", Model);
--- a/dist/fix/worker.compact.js
+++ b/dist/fix/worker.compact.js
@ -0,0 +1,89 @@
 ;(function () {
    var contexts = {};
    var worker;
    BI.useWorker = function (wk) {
        worker = wk;
        var _init = BI.Widget.prototype._init;
        BI.Widget.prototype._init = function () {
            createWorker.call(this);
            try {
                _init.apply(this, arguments);
            } catch (e) {
                console.error(e);
            }
        };
        var _initRender = BI.Widget.prototype._initRender;
        BI.Widget.prototype.postMessage = function (data) {
            switch (data.eventType) {
                case "create":
                    this.model = data.msg;
                    _initRender.call(this);
                    break;
                case "watch":
                    var watchArgs = data.args;
                    this.watch[data.currentWatchType].apply(this, watchArgs);
                    break;
            }
        };
        BI.Widget.prototype._initRender = function () {
            if (_global.Worker && this._worker) {
                this.__asking = true;
                this.__async = true;
            } else {
                _initRender.apply(this, arguments);
            }
        };
        var unMount = BI.Widget.prototype.__d;
        BI.Widget.prototype.__d = function () {
            delete contexts[this.getName()];
            try {
                unMount.apply(this, arguments);
            } catch (e) {
                console.error(e);
            }
        };
        worker.addEventListener("message", function (e) {
            var data = e.data;
            contexts[data.name].postMessage(data);
        }, false);
    };
    function createWorker () {
        var self = this;
        if (_global.Worker && this._worker) {
            var name = this.getName();
            contexts[name] = this;
            var modelType = this._worker();
            worker.postMessage({
                type: modelType,
                name: name,
                eventType: "create",
                watches: BI.map(this.watch, function (key) {
                    return key;
                })
            });
            var store = {};
            this.store = new Proxy(store, {
                get (target, key) {
                    return function () {
                        worker.postMessage({
                            type: modelType,
                            name: name,
                            eventType: "action",
                            action: key,
                            args: [].slice.call(arguments)
                        });
                    };
                },
                set (target, key, value) {
                    return Reflect.set(target, key, value);
                }
            });
        }
    }
 }());
--- a/worker.html
+++ b/worker.html
@ -0,0 +1,56 @@
 <html>
 <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/>
    <!-- 下面是不包含normalize.css的css -->
    <!-- <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui_without_normalize.min.css" /> -->
    <script src="./dist/fineui.js"></script>
    <script src="./dist/fix/worker.compact.js"></script>
 </head>
 <body>
 <div id="wrapper"></div>
 <script>
    var worker = new Worker("./demo.worker.js");
    BI.useWorker(worker);
    var Widget = BI.inherit(BI.Widget, {
        _worker: function () {
            return "demo.model";
        },
        watch: {
            name: function (val) {
                this.button.setText(val);
            }
        },
        render: function () {
            var self = this;
            console.log(this.model);
            return {
                type: "bi.button",
                ref: function (_ref) {
                    self.button = _ref;
                },
                text: this.model.name,
                handler: function () {
                    self.store.addCount();
                }
            };
        }
    });
    BI.shortcut("demo.worker", Widget);
    BI.createWidget({
        type: "bi.absolute",
        items: [{
            el: {
                type: "demo.worker"
            },
            top: 100,
            left: 100
        }],
        element: "#wrapper"
    });
 </script>
 </body>
 </html>