JavaScript/HTML的压缩和转义

来源：互联网发布：国家网络质量管理编辑：程序博客网时间：2024/04/30 15:04

如需转载请标明出处：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.onresize=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.onresize=myChart.resize;myChart.setOption(option);</script></body>

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

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

QQ技术交流群：12951803

阅读全文

0 0