这样看来ES6的多行字符模板可能就不需要了……


通过这个你可以整段整段地在JS中写HTML、SQL了。

示例


之前你得这样写

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>❤ unicorns</h1>' +
'   </body>' +
'</html>' +
'';

写起来太复杂

或者这样写

var str = '\
<!doctype html>\
<html>\
   <body>\
       <h1>❤ unicorns</h1> \
   </body> \
</html>';

限制很多，你不能使用Windows的换行符，"\" 必须在最后；


现在你可以这样写

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});

原理


非常简单：
  1. 在一个function中写上一段多行注释
  2. 将此function toString()
  3. 将多行注释内容用正则匹配出来

如下所示：

var str = (function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});
str.toString().match(/\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)\s*\*\//);

整个源码压缩后可能不足1K。

防压缩？


注释被压缩工具去掉了怎么办？

  • uglify: 使用 /*@preserve 代替 /* 即可
  • Closure Compiler(Google): 使用 /*@preserve 代替 /*
  • YUI Compressor: 使用 /*! 代替 /*


所以最终版本是这个样子的：

var str = multiline(function(){/*!@preserve
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/console.log});


开源的多行字符串工具： 在JS中整段地写HTML的更多相关文章

  1. MVC中用View.bag保存json字符串。在js中使用，不用ajax请求。。。。

    有时候我们只需要使用一次json数据,这时候直接在后台查出json,然后用view.bag传到前台使用,就会很方便..(在前台用ajax请求的话,感觉有点多余..) 上代码 后台: public Ac ...

  2. json字符串返回到js中乱码

    Ajax 的post请求值返回到js中时出现中文乱码的情况,但是在action中写入时并未乱码,解决办法在action中写入前,加上这两行: request.setCharacterEncoding( ...

  3. JS中函数之外不能写return

    JS中return有时会遇到这种情况,具体表现为:google浏览器等浏览器可以继续执行,IE浏览器不能执行return,并且google浏览器:执行时会显示SyntaxError: Illegal ...

  4. Asp.net MVC Razor输出字符串方法（js中嵌入razor）

    @{ Model p = new Model(); //输出名称和年龄 //1.第一种方式 @:姓名=@p.Name //2.第二中方式 <text>年龄=</text>p.A ...

  5. js中如何优雅的写if判断

    我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃 ...

  6. 假设用一个名为text的字符串向量存放文本文件的数据，其中的元素或者是一句话或者是一个用于表示段分隔的空字符串。将text中第一段全改为大写形式

    #include<iostream> #include<string> #include<vector> using namespace std; int main ...

  7. 发布一个开源极致的javascript模板引擎tpl.js

    tpl.js(大家直接去https://git.oschina.net/tianqiq/tpl.js这个上面看) 简介 tpl.js是一个比较极致(极小,极快,极简单)的js模板引擎,可以在各种js环 ...

  8. JS 中对变量类型判断的几种方式

    文章整理搬运,出处不详,如有侵犯,请联系~   数据类型判断和数据类型转换代码工具 在 JS 中,有 5 种基本数据类型和 1 种复杂数据类型,基本数据类型有:Undefined, Null, Boo ...

  9. parcel 在js中导入 html 文件

    parcel不支持将html文件导入为字符串,如果您对parcel使用熟练,直接使用 parcel-plugin-phtml 插件即可,此插件使用 .phtml 后缀 为什么用parcel? 因为从我 ...

随机推荐

  1. npm更换为淘宝镜像源

    1.通过config命令   1 2 npm config set registry http://registry.cnpmjs.org npm info underscore (如果上面配置正确这 ...

  2. js 本地存储 localStorage 之 angular

    今天项目中用到 php yii框架 用的不是 angular路由 所以用rootScope传值是不行的 我就用到了 localStorage 本地持久化存储 如下 set 顾名思义是设置 值 loca ...

  3. MySql数据库创建表

    3.3.MySql数据库创建表 创建5个表: UserInfo用户基础表 Role 角色表 MenuInfo 菜单即控制表 Relation_Role_Menu 角色对应菜单关系表 RelaTion_ ...

  4. LOJ#120. 持久化序列（FHQ Treap）

    题面 传送门 题解 可持久化\(Treap\)搞一搞 //minamoto #include<bits/stdc++.h> #define R register #define inlin ...

  5. python自动化测试学习笔记-8单元测试unittest模块

    官方参考文档:http://docs.python.org/2.7/library/unittest.html unittest是一个python版本的junit,junit是java中的单元测试框架 ...

  6. 三分 POJ 2420 A Star not a Tree?

    题目传送门 /* 题意:求费马点 三分:对x轴和y轴求极值,使到每个点的距离和最小 */ #include <cstdio> #include <algorithm> #inc ...

  7. 405 Convert a Number to Hexadecimal 数字转换为十六进制数

    给定一个整数,编写一个算法将这个数转换为十六进制数.对于负整数,我们通常使用 补码运算 方法.注意:    十六进制中所有字母(a-f)都必须是小写.    十六进制字符串中不能包含多余的前导零.如果 ...

  8. error: no such device : 76de62ec-ac60-4c4d-bb Entering rescue mode .. grub resuce>（系统硬盘驱动器MBR已损坏）问题解决办法（图文详解）

    问题详情   近期,由于博主我,担任实验室整个大数据集群的leader,突然的断电给整个集群造成,如下的情况问题.(欲哭无泪,我的各种服务啊) 解决办法 第一种方法:尝试,直接重启机器(我这里是台式机 ...

  9. SVN服务器搭建 内网可用外网不可用的问题

    检查1:内网端口映射到了外网端口,这样外网才能够访问到 映射的方式有两种: 1.通过路由器的虚拟服务器功能,网上一搜一大把. 2.将路由器的DMZ功能开启,并把DMZ主机设置为目标计算机. 检查2:S ...

  10. 致创业者：APP已死 服务永生

    前几日,有位创业者和我讲他在带领团队做一个将爱踢球的人集中在一起的App,我告诉他你的创业方向错了.原因在于你的目的是要为爱踢球的人提供服务,而你现在却在竭尽全力的做App,你应该做的是设计你为爱踢球 ...