在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 相关文章推荐
文本加密解密
Jun 23 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
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 配置文件中open_basedir选项作用
2009/07/19 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
jQuery对象初始化的传参方式
2015/02/26 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
python修改字典内key对应值的方法
2015/07/11 Python
Python实现控制台进度条功能
2016/01/04 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
《圆明园的毁灭》教学反思
2014/02/28 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL