在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 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
JS图片预加载三种实现方法解析
May 08 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
图书管理程序(一)
2006/10/09 PHP
支持oicq头像的留言簿(一)
2006/10/09 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
超清晰的document对象详解
2007/02/27 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
python迭代器与生成器详解
2016/03/10 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
Atom的python插件和常用插件说明
2018/07/08 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
Django 再谈一谈json序列化
2020/03/16 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
资料员岗位职责
2013/11/17 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
应用英语专业自荐信
2014/01/26 职场文书
高二生物教学反思
2014/01/27 职场文书
施工安全生产承诺书
2014/05/23 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
个人投资合作协议书
2014/10/12 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
数学教师个人工作总结
2015/02/06 职场文书
放假通知
2015/04/14 职场文书
感动中国何玥观后感
2015/06/02 职场文书
借钱欠条怎么写
2015/07/03 职场文书