在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 类
Nov 07 Javascript
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
webpack3之loader全解析
Oct 26 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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生成静态页的实现方法
2013/05/10 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
使用Python实现博客上进行自动翻页
2017/08/23 Python
python实现屏保计时器的示例代码
2018/08/08 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python接口自动化测试的实现
2020/08/28 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
生育关怀行动实施方案
2014/03/26 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js