在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中引用示例介绍
Feb 21 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 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微信开发用Cache 解决数据缓存
2016/07/11 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
window.open的功能全解析
2006/10/10 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
python 布尔操作实现代码
2013/03/23 Python
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python中类的属性和方法介绍
2018/11/27 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python设置环境变量的作用和实例
2019/07/09 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
"引用"与多态的关系
2013/02/01 面试题
社区党务公开实施方案
2014/03/18 职场文书
主题班会演讲稿
2014/05/22 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
垂直极限观后感
2015/06/08 职场文书
观后感开头
2015/06/19 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书