JavaScript/HTML的压缩和转义

最新推荐文章于 2024-08-01 16:54:27 发布

itas109

最新推荐文章于 2024-08-01 16:54:27 发布

阅读量1.7k

点赞数

文章标签：压缩 JavaScript压缩 HTML压缩 HTML转义 JavaScript转义

本文链接：https://blog.csdn.net/itas109/article/details/78727478

版权

如需转载请标明出处： 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