在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使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
js实现简单的无缝轮播效果
Sep 05 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
第九节 绑定 [9]
2006/10/09 PHP
PHP中cookies使用指南
2007/03/16 PHP
php session 检测和注销
2009/03/16 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
深入理解python对json的操作总结
2017/01/05 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
绘画设计学生的个人自我评价
2013/09/20 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
大学生学习计划书
2014/09/15 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
技能培训通讯稿
2015/07/18 职场文书
任命书格式范文
2015/09/22 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android