在JavaScript里嵌入大量字符串常量的实现方法


Posted in Javascript onJuly 07, 2013

数量少还好,多的话就密密麻麻的一坨文字,讲究美观的文艺青年们,会用大量的字符连接符号甚至加上缩进,强制换成好几行。例如:

var html =
    '<div>' +
        '<p>Hello</p>' +
        '<p>World'</p>' +
    '</div>';

这还好,要是字符串里有不少双引号单引号,那就更麻烦了,各种转义字符看的眼花缭乱。

其实有个不怎么起眼的小技巧,就能解决这个问题。大家总认为字符串必须在"..."或'...'里面,这点没错。但还有一个地方的字符串也能当非代码语义保存下来,那就是一个function的toString,把整个函数的代码当字符串输出——其中的注释部分当然也是保留的!

所以我们写个空函数,里面就一个/**/注释,其中就是我们想要的常量内容。toString后加一个正则就可以提取我们想要的!

马上试试:

var RES_CODE = _TEXT(function(){/*
    #include <iostream>
    int main()
    {
        std::cout << "Hello world" << std::endl;
        return 0;
    }
*/});
var RES_POEM = _TEXT(function(){/*

更吹落,星如雨。

宝马雕车香满路。

凤箫声动,玉壶光转,一夜鱼龙舞。

蛾儿雪柳黄金缕,

笑语盈盈暗香去。 

众里寻他千百度, 

蓦然回首,那人却在灯火阑珊处。
*/});
var RES_XML = _TEXT(function(){/*
    <projectDescription>
        <name>Hello</name>
        <comment></comment>
        <projects>
        </projects>
        <buildSpec>
            <buildCommand>
                <name>com.adobe.flexbuilder.project.flexbuilder</name>
                <arguments>
                </arguments>
            </buildCommand>
            <buildCommand>
                <name>com.adobe.flexbuilder.project.apollobuilder</name>
                <arguments>
                </arguments>
            </buildCommand>
        </buildSpec>
    </projectDescription>
*/});
function _TEXT(wrap) {
    return wrap.toString().match(/\/\*\s([\s\S]*)\s\*\//)[1];
}
alert(RES_CODE);
alert(RES_POEM);
alert(RES_XML);

OK!就是Chrome里把注释每行前面的Tab去掉了,如果仅仅是放代码的话问题也不大~ 当然有个前提是字符里不能出现*/

值得注意的是,压缩代码的时会过滤注释,需要手动排除一部分。

Javascript 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
js对象的构造和继承实现代码
Dec 05 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
Node.js笔记之process模块解读
May 31 Javascript
vue 实现走马灯效果
Oct 28 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
JavaScript实现滚动加载更多
Dec 27 Javascript
JQuery表格内容过滤的实现方法
Jul 05 #Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 #Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 #Javascript
javascript实现跳转菜单的具体方法
Jul 05 #Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 #Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 #Javascript
JS 精确统计网站访问量的实例代码
Jul 05 #Javascript
You might like
[转帖]PHP世纪万年历
2006/12/06 PHP
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
php数组去重复数据示例
2014/02/25 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
php简单中奖算法(实例)
2017/08/15 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
详解Python中用于计算指数的exp()方法
2015/05/14 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python 项目转化为so文件实例
2019/12/23 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
2014年五一活动策划方案
2014/03/15 职场文书
2014年教学工作总结
2014/11/13 职场文书
先进个人材料怎么写
2014/12/30 职场文书
怒海潜将观后感
2015/06/11 职场文书
养成教育工作总结
2015/08/13 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
python - timeit 时间模块
2021/04/06 Python