2024年12月19日 星期四 甲辰(龙)年 十月十五 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

js代码注释对齐

时间:09-21来源:作者:点击数:15

图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>
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐