在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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
理解JS事件循环
Jan 07 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
详解JavaScript 作用域
Jul 14 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验证码(支持中文)
2007/02/14 PHP
php文件上传的两种实现方法
2016/04/04 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
关于Python解包知识点总结
2020/05/05 Python
护士实习自我鉴定
2013/10/22 职场文书
医学院护理专业应届生求职信
2013/11/12 职场文书
养牛场项目建议书
2014/05/13 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
教师网络培训心得体会
2016/01/09 职场文书