TWaver HTML5 继承结构和成员说明

JavaScript是一门动态语言，但是面向对象的特征没有Java那么明显，导致我们开发起来非常不习惯。拿继承来说，Java中有专门的extends和implements关键字实现，但是在JavaScript却引入了一个"别扭的"prototype，而且实现方式有很多种，虽然灵活，却很容易让初学者一头雾水不知所措。TWaver HTML5的doc是一个js文件，对编辑器很友好，但是我们看起来却不是很方便，远不如JavaDoc来得一目了然，于是我们做了另一个html，算是对原js格式doc的补充。先看一下最后完成的效果：

运行截图：

---

这并不是一个静态页面，而是用JavaScript动态解析TWaver，所以即使TWaver更新也没关系，只要在这个html中引入新的twaver.js就可以了。

界面说明：整个页面的布局借助twaver.controls.SplitPane实现，左侧是TWaver的树组件，中间是List组件，右侧是一个pre标签，借助beautify和prettify展现js代码。

接下来介绍一下页面上三个部分的实现方式：

• Tree的实现，下面是初始化Tree的全部代码：

//twaver.Util.getAllClassNames()返回TWaver所有的内部类型

var allClassNames = twaver.Util.getAllClassNames();

//遍历类名

allClassNames.forEach(function (data) {

     addClass(data);

});

var elementBox = new twaver.ElementBox();

var map = {};

//初始化Tree box

function addClass(name) {

    var node = new twaver.Node(name);

    node.setName(name);

//分割字符串，找我们需要的类或对象

    var clazzArr = name.split(".");

    var clazz = window;

    for (var i = 0; i < clazzArr.length; i++) {

          clazz = clazz[clazzArr[i]];

    } 

//根据不同的类型设置Icon     

    if (typeof clazz === "object") {

          node.setIcon("object");     

    } else if (typeof clazz === "function") {

          node.setIcon("class");     

    }     

    //同时将node存入map，方便查询使用

    map[name] = node;

    node.clazz = clazz;

    elementBox.add(node); } 

    //... 

    var tree = new twaver.controls.Tree(elementBox); 

getAllClassNames返回的是类或对象的名字，但是我们要获得实际的类和对象以便可以解析它们的属性和方法。思考一下：在浏览器环境下window是根对象，所有全局对象都是window对象的属性而已，TWaver也不例外，所以我们分割字符串，通过window对象一层一层找属性，最终找到我们要的类或对象。然后我们生成Node，填充box数据容器；同时做了一个< 名字---Node>的映射，后面会用到。 初始化Tree以后设置节点的父子关系：

 elementBox.toDatas().forEach(function (data) { 

//TWaver所有内置类型都有superClass属性，指向实际的父类或父对象，通过它可以得到父类然后从map中取出树上相应的节点     

     var superClass = data.clazz.superClass;     

     if (superClass && superClass.getClassName) { 

         data.setParent(map[superClass.getClassName()]);  

     } 

}); 

大家注意到，Tree的上方还有一个用来过滤数据的文本框，我们看一下它的事件处理：

 

//Tree的过滤文本框 

var treeFilter = document.createElement("input");

treeFilter.type = "text"; 

treeFilter.addEventListener("input", function () {

     var value = treeFilter.value.trim().toLowerCase();     

     if (value.length > 0) {

             tree.setVisibleFunction(function (data) {

                 if(data.getName().toLowerCase().indexOf(value)>=0){return true};

                 //如果当前节点的名字与过滤字符串不匹配，就去查询是否有子节点匹配

                 //如果子节点匹配，父节点同样可见

                 return isChildVisible(data, value);

             });

     } else {

            tree.setVisibleFunction(null);

     }

});

//...

//递归是否有子节点可见

function isChildVisible(parent, value) {

    var children = parent.getChildren();

    for (var i = 0; i < children.size(); i++) {           

          var child = children.get(i);           

           if (child.getName().toLowerCase().indexOf(value) >= 0) {

               return true;

          } else if (isChildVisible(child, value)) {

                return true;

          }

     }

     return false;

}

对于Tree过滤器，不能简单的判断当前节点，因为可能当前节点的名字不符合过滤字符串，但是子节点符合，这种时候父节点也要显示，所以需要做递归处理：如果当前节点的子节点符合过滤字符串，当前节点同样可见。

• List的实现

List比Tree要简单的多，监听Tree的选中改变事件，得到选中的Node然后解析属性和方法，填充进List的数据容器

tree.getSelectionModel().addSelectionChangeListener(function (e) {

     var selectedData = tree.getSelectionModel().getLastData();

     if (selectedData) {

           var html = '';

           list.getDataBox().clear();

           //TWaver内置的属性和方法都在prototype上，所以如果data的类型是function，我们就遍历它的prototype

           var obj = typeof selectedData.clazz === "function" ? selectedData.clazz.prototype : selectedData.clazz;

           for (var name in obj) {

                if (obj.hasOwnProperty(name)) {

                      var listNode = new twaver.Node();

                      if (typeof obj[name] === "function") {

                            listNode.setIcon("method");

                      } else {

                            listNode.setIcon("property");

                      }

                      listNode.setName(name + " - " + typeof obj[name]);

                      //注意getContent方法，对于function直接返回，对于Object再进行一次遍历

                      listNode.content = "" + getContent(obj[name]);

                      html += name + ":" + listNode.content;

                      list.getDataBox().add(listNode);

                 }

            }

            pre.innerHTML = '';

            html = js_beautify(html);

            pre.appendChild(document.createTextNode(html));

            prettyPrint();

       }

});

除了填充list，我们还直接把对象属性的js代码组合起来放到右侧pre中，为了规范js代码，我们用到了js_beautify和prettify两个类库，感兴趣的同学可以谷歌一下。

• pre的实现

在List上点击某个属性或方法的时候，更新pre的内容为属性值或方法代码

//list选中的节点发生变化时更新pre

list.getSelectionModel().addSelectionChangeListener(function (e) {

     var data = list.getSelectionModel().getLastData();

     if (data) {

         pre.innerHTML = '';

         var html = js_beautify(data.content + "");

         pre.appendChild(document.createTextNode(html));

         prettyPrint();

      }

});

这三部分介绍完，实际上这个页面也就写完了，通过这些代码，大家应该可以感受到JavaScript的灵活之处，页面布局部分的代码就不介绍了，大家可从下载附件自行研究，最后附上附件见原文最下方