百度编辑器从Json对象中取值，完成初次渲染，在编辑器内画表格

做企业级应用，头一个感受就是：逻辑必须清晰，而且很多概念跟之前做小项目完全不一样。就拿百度编辑器来说，怎么从服务器拉数据，然后渲染出一个表格？这看似简单，但里面藏着不少细节。

先别急着写代码，打开控制台，console.log(editor) 一下，看看编辑器实例长什么样。官方API里已经告诉我们，写入内容的方法是 setContent()。只要把你最终拼好的字符串传进去，就能在初始化时渲染出任何你想要的节点。

那数据怎么来？老规矩，先来一个兼容各浏览器的AJAX工具函数。这段代码出自尼古拉斯·泽卡斯（Nicholas C. Zakas）的经典著作，可以说是消除浏览器兼容的标配。

复制代码

function AJAX() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined") {
        if (typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    var xhr = new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    return xhr;
                } catch (ex) {
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("错误");
    }
}

发送请求后，在 onreadystatechange 里处理返回数据。服务器返回的通常是JSON格式，而JSON本身就是一组key-value的数据集。拿到JSON对象后，就要解析它，然后生成我们需要的DOM节点。比如下面这个简单的JSON数据集：

复制代码

{
    "head":{
        "rows":3,
        "cells":2
    },
    "body":{
        "rows":3,
        "cells":2
    }
}

数据实际上存储在 responseText 里，所以先拿一个变量接住：var a = eval("("+xhr.responseText+")");。到了这一步，整个JSON对象就从服务端取出来了。接着用 for...in 遍历它，就能拿到其中存储的数据。

复制代码

for (var b in a) {
    console.log(a[b].rows);
}
// for in遍历Json对象，b就是已经取到了key值了。

得到具体的JSON数据集后，就可以通过 += 来拼写节点的字符串了。从上到下，判断、循环，都可以，只需要在最开始设置一个空变量来接收这一切。

最后一步，editor.setContent(Json); 即可完成编辑器可编辑区域的初始化——从服务端取值，渲染出想要的节点。

业精于勤，荒于嬉；行成于思，毁于随。新人的成长，在于总结。所有文章与例子，仅是自我总结，仅供学习交流。