OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

开源的多行字符串工具: 在JS中整段地写HTML


分享到
分类 JS开源   关键字 开源   发布 kris  1405649514476
注意 转载须保留原文链接,译文链接,作者译者等信息。  
这样看来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});


项目地址: https://github.com/sindresorhus/multiline
社区评论 ( Beta版 )
  • #0 bold_cherry 1405658356994

    mark

  • #1 crimson_lake 1405662102806

    sssssssssss**sssss**s sssssss

  • #2 patient_sun 1405662980760

    如果模版里有变量,变量替换、循环等不好操作

  • #3 452125301@qq.com 1405669974184

    @patient_sun #2

    我喜欢coffeescript,其中之一是因为可以这样写,当然除非必要的话,否则还是不要在js中写html。

  • #4 Magicdawn 1412091626254

    不错,我一般用第二种,

    sublime text 选中文本 , Ctrl+Shift+L , End 巨方便

  • #5 栾海鹏 1472085123317

    真麻烦,用ES6的反引号不就OK了。还可以支持变量的替换。

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 皇帝的新衣:Node.js
  2. 沃尔玛为什么要采用Node.js
  3. 告别Node.js
  4. 再见了,Heroku
  5. 失败的感觉:一个22岁女孩的创业故事
  6. Java的痛
  7. Android即将支持GO语言,从游戏开始
  8. Hacker News,TechCrunch, Product Hunt 推广效果对比
  9. JavaScript最大堆栈的数量
  10. 树树莓派推出新版本Model B+
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS开源
  1. 在nginx中使用lua脚本
  2. Google 的 Web Starter Kit
  3. Mongoose学习参考文档——基础篇
  4. 使用NodeJS搭建邮件自动发送服务器
  5. 翻译:Kendo UI 和 jQuery Mobile的区别
  6. Bearcat pomelo game 实战 -- treasures
  7. Ws.js:基于 Node.js的WS-*实现
  8. 开源项目:CSS 3D转换和动画学习示例教程
  9. 我为什么选择 D3.js
  10. Mozilla实验室发布的一款实时协作工具库TogetherJS

 关键字 - 开源
  1. Mongoose学习参考文档——基础篇
  2. 15个最好用的Node.JS后端框架
  3. 使用NodeJS搭建邮件自动发送服务器
  4. wemall app商城源码android开发MD5加密工具类
  5. 【数据可视化】基础知识贴:10大关键术语
  6. wemall app商城源码中基于PHP的ThinkPHP惯例配置文件代码
  7. Node.JS超越jQuery成为Github上第二受欢迎的开源项目
  8. wemall软件交易平台微信图文编辑器部分代码分享
  9. wemall开源商城免费商城系统部分代码(内含代码地址)
  10. Docker究竟是什么,为什么这么流行,它的优点和缺陷有哪些?

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号