代码注释对齐

最新推荐文章于 2024-05-15 19:19:30 发布

@井九

最新推荐文章于 2024-05-15 19:19:30 发布

阅读量3.9k

点赞数 1

分类专栏： Web 文章标签： function 正则表达式 button html 工具 c

本文链接：https://blog.csdn.net/problc/article/details/6802031

版权

Web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

图1

图2

感觉上我们认为图2是我们想要的注释对齐的效果。但感觉是不能拿来代码实现的。

所以我们需要定义什么叫注释对齐。如下图

假设代码部分的长度为CL,代码到//之间的长度为Width。注释对齐实际上就是计算Width-CL，中间填充这么多个空格。

那么尝试定义注释对齐。

1.内存对齐方式

参考计算机内存对齐方式。Width长度为一个基准(程序中的fact)的整数倍。

类似于坐电梯。代码先上电梯，电梯容量为fact，等代码快上完，注释再上。代码上的时候发现没上满，就拿空格占位，空着也不让注释上。

2.指定Width(程序中的min)方式

相当于限额。代码要先占前W个位置，人不够用空格占，都占完了，注释才能上来。

这样就会有个问题，代码如果超过W，位置不够用了怎么处理。

处理方式有，

2.1代码和注释都将就，都满了，就顺序上了。
2.2开始的时候就看好了，超过W就按内存对齐方式处理
2.3满了之后的部分重新按内存对齐方式处理，满之前按限额处理

定义好了，实现就容易了。

var fact = 16;
var min = 64;

程序中的这两个变量，如果min = 1，则实现的是内存对齐方式。

如果fact=1，则是2.1的处理方式。

如果min是fact的整数倍，实际效果跟2.2，2.3相似。

特别的，如果fact=1，min=1，则可以实现注释不对齐，即图2向图1的转换。

建议fact和min都取4的整数倍，这样缩进之间的注释也比较有层次。

因为js不熟，所以代码基本是类C的风格，不太简洁。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            注释对齐工具
        </title>
        <script type="text/javascript">
            function doCommentFormat(code, comment) {
                var str0 = code.replace(/\s*$/, "");
                var str1 = str0.replace(/^\s*/, "")
                var fact = 16; //注释之间的间隔
                var min = 64;  //最小注释位置
                var rate = Math.ceil(str1.length / fact);
                var len = Math.max(rate*fact,min) - str1.length;
                var i;
                for (i = 0; i < len; i++) str0 += " ";
                return str0 + "//" + comment;
            }
            function parse(str) {
                var result = "";
                var lines = str.split('\n');
                var i;
                for (i = 0; i < lines.length; i++) {
                    var line = lines[i];
                    if (line.indexOf('//') != -1) {
                        var strArr = line.split('//');
                        if (strArr.length < 2) {
                            result += line + '\n';
                        }
                        else {
                            code = strArr[0];
                            comment = strArr[1];
                            result += doCommentFormat(code, comment) + '\n';
                        }
                    }
                    else {
                        result += line + '\n';
                    }
                }
                return result;
            }

            function do_js_beautify() {
                var js_source = document.getElementById('content').value;
                document.getElementById('content').value = parse(js_source);
                return false;
            }
        </script>
        
        <body>
            <textarea rows="20" cols="100" id="content">
            </textarea>
            <br />
            <br />
            <button οnclick="return do_js_beautify()" id="beautify">
                格式化
            </button>
        </body>
</html>

代码还是精简一下，js的正则表达式很强大啊

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
        <title>
            注释对齐工具
        </title>
        <script type="text/javascript">
            function parse(str) {
            	  var fact = 16; //注释之间的间隔
                var min = 64;  //最小注释位置
                var result = "";
                var lines = str.split("\n");
                var re = /(\s*)([^;]+;)\s*(\/\/[^\0]+)/;
                for (var i = 0; i < lines.length; i++)
                {
									if(re.exec(lines[i]))
									{
										var code = RegExp.$2;
										var rate = Math.ceil(code.length / fact);
                		var len = Math.max(rate*fact,min) - code.length;
                		while (len-->0) code += " ";
										result += RegExp.$1 + code + RegExp.$3 + "\n";
									}
									else
										result += lines[i] + "\n";
								}
                return result;
            }

            function do_js_beautify() {
                var js_source = document.getElementById('content').value;
                document.getElementById('content').value = parse(js_source);
                return false;
            }
        </script>
        
        <body>
            <textarea rows="20" cols="100" id="content">
            </textarea>
            <br />
            <br />
            <button οnclick="return do_js_beautify()" id="beautify">
                格式化
            </button>
        </body>
</html>