TWaver HTML5 继承结构和成员说明

2015/04/22 00:58
阅读数 203

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的灵活之处,页面布局部分的代码就不介绍了,大家可从下载附件自行研究,最后附上附件见原文最下方

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部