热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

在JavaScript里嵌入大量字符串常量的实现方法_javascript技巧

在JavaScript文件里嵌入大量字符串常量是经常遇到的事。有时为了省事,就把一些界面的HTML和CSS直接写在JS文件里
数量少还好,多的话就密密麻麻的一坨文字,讲究美观的文艺青年们,会用大量的字符连接符号甚至加上缩进,强制换成好几行。例如:

代码如下:


var html =
'

' +
'

Hello

' +
'

World'

' +
'

';

这还好,要是字符串里有不少双引号单引号,那就更麻烦了,各种转义字符看的眼花缭乱。

  其实有个不怎么起眼的小技巧,就能解决这个问题。大家总认为字符串必须在"..."或'...'里面,这点没错。但还有一个地方的字符串也能当非代码语义保存下来,那就是一个function的toString,把整个函数的代码当字符串输出——其中的注释部分当然也是保留的!

  所以我们写个空函数,里面就一个/**/注释,其中就是我们想要的常量内容。toString后加一个正则就可以提取我们想要的!

  马上试试:

代码如下:


var RES_CODE = _TEXT(function(){/*
#include

int main()
{
std::cout <<"Hello world" < return 0;
}
*/});

var RES_POEM = _TEXT(function(){/*
  更吹落,星如雨。
  宝马雕车香满路。
  凤箫声动,玉壶光转,一夜鱼龙舞。
  蛾儿雪柳黄金缕,
  笑语盈盈暗香去。
  众里寻他千百度,
  蓦然回首,那人却在灯火阑珊处。
*/});

var RES_XML = _TEXT(function(){/*

Hello





com.adobe.flexbuilder.project.flexbuilder




com.adobe.flexbuilder.project.apollobuilder





*/});

function _TEXT(wrap) {
return wrap.toString().match(/\/\*\s([\s\S]*)\s\*\//)[1];
}
alert(RES_CODE);
alert(RES_POEM);
alert(RES_XML);

OK!就是Chrome里把注释每行前面的Tab去掉了,如果仅仅是放代码的话问题也不大~ 当然有个前提是字符里不能出现*/

值得注意的是,压缩代码的时会过滤注释,需要手动排除一部分。

推荐阅读
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • iOS超签签名服务器搭建及其优劣势
    本文介绍了搭建iOS超签签名服务器的原因和优势,包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势,即一个证书只能安装100个,成本较高。文章还详细介绍了超签的实现原理,包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后,还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 本文介绍了P1651题目的描述和要求,以及计算能搭建的塔的最大高度的方法。通过动态规划和状压技术,将问题转化为求解差值的问题,并定义了相应的状态。最终得出了计算最大高度的解法。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 解决Cydia数据库错误:could not open file /var/lib/dpkg/status 的方法
    本文介绍了解决iOS系统中Cydia数据库错误的方法。通过使用苹果电脑上的Impactor工具和NewTerm软件,以及ifunbox工具和终端命令,可以解决该问题。具体步骤包括下载所需工具、连接手机到电脑、安装NewTerm、下载ifunbox并注册Dropbox账号、下载并解压lib.zip文件、将lib文件夹拖入Books文件夹中,并将lib文件夹拷贝到/var/目录下。以上方法适用于已经越狱且出现Cydia数据库错误的iPhone手机。 ... [详细]
  • 本文讨论了使用HTML5+JS开发App所需的框架和工具推荐,希望能提供真实案例作为参考。重点考虑框架和工具的文档齐全性以及是否支持二维码扫描、摇一摇等功能。同时提到了H5+框架的适用性。 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
author-avatar
不会做饭的我
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有