Beyond Compare javascript 优化补丁

Beyond Compare 2 是一款很好的文件比较工具，并且可以很方便地将结果导出为html格式显示，如图所示 :

 

原图结果：

 

 

而不像他的桌面客户端一样可以各个文件可以拖动比较，而是整个窗口出现滚动条了，不方便在两个文件的同一行数据的同一位置进行比较。

 

改进分析：

 

1.结果 html 采用 table 显示数据，两个文件的同一位置代码位于 table 的同一行不同 td ，而 table 采用 auto table-layout 而使得代码表格撑破浏览器窗口了，应使用固定表格布局。

2.代码文字直接显示在 td 中，而滚动条则不能出现在 td 上。应在 td 中嵌套 div 从而使得 div 拥有滚动条可以滚动，并且滚动条div还要嵌套入数据div，并使得所有数据div具有相同宽度（最大宽度），使得即使很短的代码表格文本也可以滚动，同步长代码行。

3.需要一种最底层滚动条，使得其可以控制所有上述table的所有单元格同步滚动。

4.对于两个大文件的对比，要利用分时计算来防止浏览器失去响应。(当文件超过200K，建议使用chrome，否则请耐心等待)

 

图示分析：

 

 

改进结果：

上述步鄹都可以在原始页面载入后，利用 javascript 遍历 DOM 树来进行样式以及结构的调整 ，即只需要在原html 代码 中加入

 

<script src="patch.js"></script>

即可。

 

 

改进后：

 

 

 

 

代码注释讲解 (示例附件 )：

 

/*
    Beyond Compare 2 patch for html result
    author:yiminghe.iteye.com
    try MIT licence   
*/
Ext.onReady(function () {
    var mask = Ext.getBody().mask("start process ... ");
    var maskMessage = Ext.getBody()._maskMsg.dom.firstChild;
    /*
        分时计算，防止僵死
        修改自 ： http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/
    */
    function timedChunk(items, process, context, callback) {
        var index = items.getCount() - 1;
        var total = index;
        setTimeout(function () {
            var start = +new Date();
            do { //console.log(index);
                maskMessage.innerHTML = ("current step remain : " + ((index * 100) / total).toFixed(1) + "%");
                process.call(context, items.item(index));
                index--;
            } while (index >= 0 && (+new Date() - start < 50));
            if (index >= 0) {
                setTimeout(arguments.callee, 25);
            } else {
                callback(items);
            }
        },
        25);
    }
    var maxScrollWidth = -1; //设定固定布局，防止自动撑破
    Ext.select("table.fc").setStyle({
        "table-layout": "fixed"
    }); //为固定布局设置宽度
    var tbody = Ext.DomQuery.selectNode("table.fc > tbody");
    var firstTds = Ext.get(tbody).select(" > tr:first-child td");
    var widths = [2, 45, 5, 2, 45];
    firstTds.each(function (el, _tds, index_) {
        el.setStyle({
            width: widths[index_] + "%"
        });
    });
    var trs = Ext.get(tbody).select("> tr", true);
    timedChunk(trs, function adjustDiff(el) {
        for (var i = 0; i < 2; i++) {
            var turn = i ? (5) : 2; //console.log(el);
            var cel = el.child(">td:nth-child(" + turn + ")"); //console.log(cel);
            cel.dom.style.overflow = "hidden";
            cel.dom.innerHTML = "<div>" + cel.dom.innerHTML + "</div>"; //里层文字div不允许换行
            Ext.get(cel.dom.firstChild).setStyle({
                "white-space": "nowrap"
            }); //外层滚动条div，隐藏滚动条，注意 td 出不来滚动条
            //ie6 td 内 div 设置 width 100%，才能完全填充 td
            Ext.get(cel.dom.firstChild).wrap({
                tag: 'div',
                cls: 'code',
                style: {
                    "overflow": "hidden",
                    width: "100%" // for ie6
                }
            }); //获取外层滚动的最大宽度
            var cur = cel.dom.firstChild.scrollWidth;
            if (maxScrollWidth < cur) {
                maxScrollWidth = cur;
            }
        }
    },
    null, setDiff);
    function setDiff() {
        timedChunk(trs, function (el) {
            for (var i = 0; i < 2; i++) {
                var turn = i ? (5) : 2;
                var cel = el.child(">td:nth-child(" + turn + ")");
                var cur = cel.dom.firstChild.scrollWidth; //将文字div设置为所有格子最大滚动宽度，使得可以统一滚动
                if (maxScrollWidth > cur) {
                    cel.dom.firstChild.firstChild.style.width = maxScrollWidth + "px";
                }
            }
        },
        null, createScroll); //最后一行显示的滚动条创建，ie会根据宽度设置自动出现滚动条,firefox不会，只能设置scroll
        function createScroll() {
            Ext.DomHelper.append(tbody, {
                tag: "tr",
                cn: [{
                    tag: "td",
                    html: '&nbsp;'
                },
                {
                    tag: "td",
                    cn: [{
                        tag: 'div',
                        id: "scrollDiv0",
                        cls: 'code',
                        style: {
                            "overflow-x": "scroll",
                            //for firefox
                            width: "100%" // for ie6
                        },
                        cn: [{
                            tag: "div",
                            html: '&nbsp;',
                            //for firefox
                            style: {
                                width: maxScrollWidth + "px"
                            }
                        }]
                    }]
                },
                {
                    tag: "td",
                    html: '&nbsp;'
                },
                {
                    tag: "td",
                    html: '&nbsp;'
                },
                {
                    tag: "td",
                    style: { //"overflow-x":"scroll"
                    },
                    cn: [{
                        tag: 'div',
                        id: "scrollDiv1",
                        cls: 'code',
                        style: {
                            "overflow-x": "scroll",
                            //for firefox
                            width: "100%" // for ie6
                        },
                        cn: [{
                            tag: "div",
                            html: '&nbsp;',
                            //for firefox
                            style: {
                                width: maxScrollWidth + "px"
                            }
                        }]
                    }]
                }]
            }); //当底层滚动条滚动时，所有格子的滚动条都一起滚动，造成同一列属于一个整体的假象
            var scrollCells = Ext.select(".code");
            for (var i = 0; i < 2; i++) {
                var lsDiv = Ext.get("scrollDiv" + i);
                lsDiv.on("scroll", (function (i) {
                    return function () {
                        var srollDiv = this;
                        scrollCells.each(function (el) {
                            el.dom.scrollLeft = srollDiv.dom.scrollLeft;
                        });
                    }
                })(i));
            }
            Ext.getBody().unmask();
        }
    }
});

     

 

评论

1 楼 liangl923 2012-07-19  

发现楼主做的帖子都很精致，属于研究型人才，赞一个。