WebWorker 中將已處理好的 VDOM 資料提交主執行緒渲染 DOM

上篇文章講了 WebWorker 的簡單用法，其實網上很多類似的文章，我寫的也比較垃圾。不會的建議可以網上看比較好點的資料。

這裡我會先講下我的大致思路。然後會貼上一堆不實用的垃圾程式碼供參考。

WebWorker 中必然是無法訪問 DOM 的，更無法建立 DOM 元素。如果想要實現把 Worker 中的東西渲染出來，只能把相關資料什麼的放到主執行緒去渲染。這用訊息機制是可以實現的。

DOM 既然只能在主執行緒渲染，那麼事件 Worker 執行緒自然也是無能為力了。而更關鍵的是 Worker 和主執行緒通訊的時候不能傳遞函式作為引數（toString 這種方式不作數），而事件處理程式都是函式。那麼就只好通過一個標識來代替函式，在 Worker 裡通過這個標識來決定具體執行什麼操作。

Worker 和主執行緒的分工相對是明確的，完善後的程式碼也基本上不怎麼會去寫執行在主執行緒上程式碼的，主要還是去寫執行在 Worker 裡面的程式碼。而等下次要討論的是如何把 HTML 編譯成類似在下邊的 worker.js 程式碼的 render 函式中直接用 JSON 寫的那部分。

再之後要討論 VDOM 相關的演算法，到時候不管寫的多爛，能用就行。

之後的之後就討論一些動畫，事件防抖等的處理方式，要放到很久之後才討論了，還有很多沒想好應該什麼時候討論的事情，一步步來吧，想到哪裡就寫到哪裡，我一個純高技術的，還是亂七八糟都學的人確實寫不出多好的東西來，多練習下也許N年後就好些了吧。

這裡直接不涉及任何 VDOM 相關的東西。所有的東西都是用 JSON 來表示而已。也說過以後的文章才會討論 VDOM，我對 VDOM 也是一知半解。搞出的東西不會有多麼高的保障。自己懂得的還是自己去研究的好，但好在這些演算法開源的實現很多。學習後換成好點的就行了。

HTML 裡面沒有什麼東西：

<div id="root"></div>
<script src="main.js"></script>

在主執行緒中執行的 main.js 中主要是為了渲染 DOM，繫結事件。這裡的程式碼遠遠不足以滿足正常使用，但這裡只是為了講一部分想法，沒必要寫那麼複雜。能夠渲染 DOM，繫結個事件就行了。至於更多的需求以後慢慢再討論。這裡宣告，這些程式碼完全不足以在專案中使用，不要拿著亂用，不然裡面很多問題你會很難解決的。

var worker = new Worker('worker.js');

worker.addEventListener('message', function (event) {
    console.log(event.data);
    var message = event.data;

    switch (message.type) {
        case 'render':
            render(message.payload);
            break;
    }
});


function render(data) {
    var root = document.getElementById('root');

    root.innerHTML = '';

    root.appendChild(createElement(data));
}

function setAttrs(element, attrs) {
    if (attrs) {
        for (var name in attrs) {
            element.setAttribute(name, attrs[name]);
        }
    }
}

function setProps(element, props) {
    if (props) {
        for (var name in props) {
            element[name] = props[name];
        }
    }
}

function setEvents(element, events) {
    if (events) {
        for (var name in events) {
            attachEvent(element, name, events[name]);
        }
    }
}

function setChildren(element, children) {
    if (children && children instanceof Array) {
        children.forEach(function (item) {
            element.appendChild(createElement(item));
        });
    }
}

function createElement(data) {
    if (!data) {
        return null;
    }

    var element = document.createElement(data.type);

    setAttrs(element, data.attrs);
    setProps(element, data.props);
    setEvents(element, data.events);
    setChildren(element, data.children);

    return element;
}

var eventBinders = {
    onTap: {
        bind: function (element, name, value) {
            element.addEventListener('click', function () {
                worker.postMessage({
                    type: 'command',
                    payload: {
                        name: value
                    }
                });
            });
        }
    }
};

function attachEvent(element, name, value) {
    eventBinders[name].bind(element, name, value);
}

function createAttribute(element, name, value) {
    element.setAttribute(name, value);
}

在 Worker 執行緒中中執行的 worker.js 會處理很多事務。基本上邏輯什麼的都在裡面了。

var data = {
    value: 1
};

function onDecreaseClick() {
    data.value -= 1;
    render(data);
}

function onIncreaseClick() {
    data.value += 1;
    render(data);
}

function handleCommand(data) {
    switch (data.name) {
        case 'onDecreaseClick':
            onDecreaseClick(data);
            break;
        case 'onIncreaseClick':
            onIncreaseClick(data);
            break;
    }
}

function render(data) {
    self.postMessage({
        type: 'render',
        payload: {
            type: 'div',
            attrs: {},
            props: {},
            children: [
                {
                    type: 'button',
                    events: {
                        onTap: 'onDecreaseClick',
                    },
                    props: {
                        textContent: 'Decrease'
                    }
                },
                {
                    type: 'span',
                    props: {
                        textContent: data.value
                    }
                },
                {
                    type: 'button',
                    events: {
                        onTap: 'onIncreaseClick',
                    },
                    props: {
                        textContent: 'Increase'
                    }
                }
            ]
        }
    });
}68 
self.addEventListener('message', function (event) {
    var message = event.data;

    switch (message.type) {
        case 'command':
            handleCommand(message.payload);
            break;
    }
});
80 render(data);

程式碼都很簡單粗暴。雖然確實可以跑起來。但是無論是 DOM 渲染 還是 Worker 中的處理都是很簡單的，同時也是不可實際生產使用的。接下來討論過 VDOM 之後會進一步完善。

這次的東西寫是寫完了，但不知道是不是隻有我自己能看懂自己寫的啥。就當練手把。有空把整個專案的實現都寫一遍，複習下也行，感覺不僅文筆差，思路好像也不是很好吧。