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>