JavaScript/HTML的压缩和转义

如需转载请标明出处： http://blog.csdn.net/itas109

QQ技术交流群：129518033

在使用ctemplate生成html的时候，如果模板是从String输入的。那么我们最好能够将html的模板进行压缩处理。

原始数据：

<!DOCTYPE html>
<head><meta charset="utf-8"><title></title><script src="js/echarts.min.js"></script>
</head>
<body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));var option = {title : {text: '每种物资的使用次数',subtext: 'moutum copyring'},toolbox: {show: true,feature: {magicType: {type: ['line', 'bar']},restore: {}}},tooltip : {trigger: 'axis'},legend: {data:['使用次数']},xAxis : [{type : 'category',data : [{{#LOOP_SUPPLIES_TYPE_ITEM}}'{{SUPPLIES_TYPE_NAME}}',{{/LOOP_SUPPLIES_TYPE_ITEM}}]}],yAxis : [{type : 'value'}],series : [{name:'使用次数',type:'bar',data:[{{#LOOP_SUPPLIES_TYPE_COUNT_ITEM}}'{{SUPPLIES_TYPE_COUNT}}',{{/LOOP_SUPPLIES_TYPE_COUNT_ITEM}}]}]};window.onresize = myChart.resize ;        myChart.setOption(option);</script>
</body>

1.JavaScript/HTML的压缩

https://www.bejson.com/jshtml_format/

压缩结果：

<!DOCTYPE html><head><meta charset="utf-8"><title></title><script src="js/echarts.min.js"></script></head><body><div id="main"style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart=echarts.init(document.getElementById('main'));var option={title:{text:'每种物资的使用次数',subtext:'moutum copyring'},toolbox:{show:true,feature:{magicType:{type:['line','bar']},restore:{}}},tooltip:{trigger:'axis'},legend:{data:['使用次数']},xAxis:[{type:'category',data:[{{#LOOP_SUPPLIES_TYPE_ITEM}}'{{SUPPLIES_TYPE_NAME}}',{{/LOOP_SUPPLIES_TYPE_ITEM}}]}],yAxis:[{type:'value'}],series:[{name:'使用次数',type:'bar',data:[{{#LOOP_SUPPLIES_TYPE_COUNT_ITEM}}'{{SUPPLIES_TYPE_COUNT}}',{{/LOOP_SUPPLIES_TYPE_COUNT_ITEM}}]}]};window.οnresize=myChart.resize;myChart.setOption(option);</script></body>

2.转义

由于采用String输入，所以字符串需要转义

https://www.bejson.com/zhuanyi/

转义结果：

<!DOCTYPE html><head><meta charset=\"utf-8\"><title></title><script src=\"js/echarts.min.js\"></script></head><body><div id=\"main\"style=\"width: 600px;height:400px;\"></div><script type=\"text/javascript\">var myChart=echarts.init(document.getElementById('main'));var option={title:{text:'每种物资的使用次数',subtext:'moutum copyring'},toolbox:{show:true,feature:{magicType:{type:['line','bar']},restore:{}}},tooltip:{trigger:'axis'},legend:{data:['使用次数']},xAxis:[{type:'category',data:[{{#LOOP_SUPPLIES_TYPE_ITEM}}'{{SUPPLIES_TYPE_NAME}}',{{/LOOP_SUPPLIES_TYPE_ITEM}}]}],yAxis:[{type:'value'}],series:[{name:'使用次数',type:'bar',data:[{{#LOOP_SUPPLIES_TYPE_COUNT_ITEM}}'{{SUPPLIES_TYPE_COUNT}}',{{/LOOP_SUPPLIES_TYPE_COUNT_ITEM}}]}]};window.οnresize=myChart.resize;myChart.setOption(option);</script></body>

觉得文章对你有帮助，可以用微信扫描二维码捐赠给博主，谢谢！

如需转载请标明出处：http://blog.csdn.net/itas109

QQ技术交流群：12951803

JavaScript/HTML的压缩和转义相关推荐

gulp压缩js转义es6的常见错误及解决方案
gulp压缩js转义es6的常见错误及解决方案参考文章: (1)gulp压缩js转义es6的常见错误及解决方案 (2)https://www.cnblogs.com/uimeigui/p/11797 ...
url充定向 html转义,html、javascript、url特殊字符的转义诠释及使用方法详解
html.javascript.url特殊字符转义在实际编程中都是有用到的,有的人对特殊字符转义的使用不是很清楚,下面就对html,javascript,url特殊字符的转义做一下说明和归纳. htm ...
html前端如何转义特殊字符,html、javascript、url特殊字符的转义诠释及使用方法详解...
html.javascript.url特殊字符转义在实际编程中都是有用到的,有的人对特殊字符转义的使用不是很清楚,下面就对html,javascript,url特殊字符的转义做一下说明和归纳. htm ...
过滤器应用【编码、敏感词、压缩、转义过滤器】
2019独角兽企业重金招聘Python工程师标准>>> 前言在上篇博文中,我们已经讲解了过滤器的基本概念,使用以及简单的Servlet应用了.这篇博文主要讲解过滤器的高级应用.. ...
HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
CSS 格式化 ProCSSor - http://procssor.com/ CSS 压缩 CSS Compressor - http://www.cssdrive.com/index.php/ma ...
Java工具封装：Html、Css、Javascript文件内容压缩
文章目录 1. Javascript压缩 1.1 closure-compiler 2. Html压缩 2.1 htmlcompressor 3. Css压缩 3.1 yuicompressor 1. ...
记一个在线工具网站，程序员必备，json格式化、压缩、转义，加解密编码解码
为你工具 ToForU-在线json格式化|在线json压缩|在线json转义|工具大全提供 json格式化,json代码压缩,json校验解析,json数组解析,json转xml,xml转json ...
JavaScript前端实现压缩图片功能
通过原生的input标签拿到要上传的图片文件将图片文件转化成img元素标签在canvas上压缩绘制该HTMLImageElement 将canvas绘制的图像转成blob文件最后将该blob文件 ...
JavaScript 使用canvas压缩图片
压缩思路 JS 的图片压缩,一般是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果. 实现过程 (1)获取上传 Input 中的图片对象 File: (2)将图 ...

JavaScript/HTML的压缩和转义

JavaScript/HTML的压缩和转义相关推荐

最新文章

热门文章