经常会遇到这么个场景,需要将html代码转为JavaScript输出。
一般的做法,就是使用字符串拼接或者使用数组拼接后最终转为字符串。

比如常规做法:

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>函数内巧用注释实现多行文本拼接 www.ghugo.com</h1>' +
'   </body>' +
'</html>' +
'';

以前,我一般是用转换工具实现,比如这个网址:HTML to JavaScript Convertor

用工具确实是个好方法,那有没有更好的解决方案?以前曾用过函数内用注射来实现本地调试的效果,那么注释是否也可以实现字符串拼接?

于是google了一番,有些收获。

实现方案如下:

function multiline(fn){
		var reCommentContents = /\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)[ \t]*\*\//;
	var match = reCommentContents.exec(fn.toString());

	if (!match) {
		throw new TypeError('Multiline comment missing.');
	}

	return match[1];
}

原理非常简单:
1. 在一个function中写上一段多行注释
2. 将此function toString()
3. 将多行注释内容用正则匹配出来

如何使用?

multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>函数内巧用注释实现多行文本拼接 www.ghugo.com</h1>
    </body>
</html>
*/});

函数执行后输出:

<!doctype html>
<html>
    <body>
        <h1>函数内巧用注释实现多行文本拼接 www.ghugo.com</h1>
    </body>
</html>

利用注射巧妙的省去了字符串拼接的烦恼,那么在实际项目中是否可用?
一般在实际项目上线前,js都需要压缩,而压缩后将导致正则提取失败。

如何防止注释被压缩工具去掉?

1. uglify: 使用 /*@preserve 代替 /* 即可
2. Closure Compiler(Google): 使用 /*@preserve 代替 /*
3. YUI Compressor: 使用 /*! 代替 /*

如果需要压缩的话,可用如下方式输出:

multiline(function(){/*!@preserve
<!doctype html>
<html>
    <body>
        <h1>函数内巧用注释实现多行文本拼接 www.ghugo.com</h1>
    </body>
</html>
*/});

项目地址fork:https://github.com/baofen14787/multiline

One thought on “函数内巧用注释实现多行文本拼接

  1. /*@preverse 代替 /*, 在命令行下用uglifyjs a.js -o a.min.js -c –comments “all” 压缩,注释会被清除掉哦,貌似 uglifyjs仅能保留 js-doc风格的注释, 求解

    Reply

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required