在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对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
js事件触发操作实例分析
Jun 21 Javascript
vue开发简单上传图片功能
Jun 30 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学习之数据类型之间的转换介绍
2011/06/09 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
JPA面试常见问题
2016/11/14 面试题
商务英语专业自荐信
2013/10/14 职场文书
大学生就业策划书范文
2014/04/04 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
岗位职责说明书模板
2014/07/30 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
2015年大学生工作总结
2015/04/21 职场文书