在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中this关键字(翻译+自我理解)
Oct 20 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
range 标准化之获取
Aug 28 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 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
我的论坛源代码(九)
2006/10/09 PHP
关于crontab的使用详解
2013/06/24 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
javascript回到顶部特效
2016/07/30 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
JS实现轮播图效果
2020/01/11 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
python三引号输出方法
2019/02/27 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
Python发送邮件实现基础解析
2020/08/14 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
乌鸦喝水教学反思
2014/02/07 职场文书
求职自我推荐信
2014/06/25 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
Python连续赋值需要注意的一些问题
2021/06/03 Python
Vue h函数的使用详解
2022/02/18 Vue.js
nginx配置之并发频次限制
2022/04/18 Servers