运行时与编译时

学习过程中发现了比较有趣的词，运行时、编译时。那么什么是运行时，什么是编译时框架呢。往细了说运行时就是代码已经存储进内容并且运行这些可执行代码的过程，编译时就是将计算机不可直接执行的代码编译成计算机可执行的代码(二进制形式)。

例子中的场景没有这么细，主要场景还是vue文件编译成可执行的js代码。

运行时

我们可以通过代码来看看javascript框架中纯运行时框架是咋样的。

/**
 * 数据对象
 */
const obj = {
    tag: 'div',
    children: 'click me',
};

/**
 * 渲染函数
 * @param obj 数据对象
 * @param root 需要挂载的节点
 */
function render(obj, root) {
    const el = document.createElement(obj.tag);

    if (typeof obj.children === 'string') {
        el.appendChild(document.createTextNode(obj.children));
    } else if (Array.isArray(obj.children)) {
        obj.children.forEach((child) => render(child, el));
    }

    // 将元素添加到root节点下
    root.appendChild(el);
}

从上面代码不难看出纯运行时的代码都是可以直接执行的js代码

编译时

编译肯定是将一个东西编译成另一个东西，我们可以通过代码来看看纯编译时框架是咋样的。

<div>hello world</div>;
// 我们将html上面的代码编译成下面的obj数据对象，就是纯编译时
/**
 * 数据对象
 */
const obj = {
    tag: 'div',
    children: 'hello world',
};

经过上面代码我们不难看出我们将html代码编译成一个obj对象的过程就是纯编译时

运行时+编译时

我们可以通过代码来看看javascript框架中运行时+编译时框架是咋样的。

<div>hello world</div>;
// 我们将html上面的代码编译成下面的obj数据对象，就是纯编译时
/**
 * 数据对象
 */
const obj = {
    tag: 'div',
    children: 'hello world',
};

/**
 * 渲染函数
 * @param obj 数据对象
 * @param root 需要挂载的节点
 */
function render(obj, root) {
    const el = document.createElement(obj.tag);

    if (typeof obj.children === 'string') {
        el.appendChild(document.createTextNode(obj.children));
    } else if (Array.isArray(obj.children)) {
        obj.children.forEach((child) => render(child, el));
    }

    // 将元素添加到root节点下
    root.appendChild(el);
}

如上代码，我们将html代码编译成可执行的Javascript对象(编译时)，然后通过执行js代码达到预期效果的过程就是运行时+编译时。

总结

通过学习，感觉对运行时、编译时框架有了更为直观的了解。