OurJS


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

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


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

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

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


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

更快地定位DOM(HTML)元素的方法(Rails)


分享到
分类 编程技巧   关键字 开源   发布 ourjs  1416702871315
注意 转载须保留原文链接,译文链接,作者译者等信息。  

问题


有很长一段时间,我都希望能够找出代码库中负责渲染DOM元素的那部分。我希望临时去掉其它团队成员添加的一些按钮。这个项目有10万行代码,并且我不太记得这个UI元素是从哪个Rails/backbone/ember视图上创建出来的。

当然grep或ack经常被用来干这个,但它们还是需要花一段时间去匹配。

注* grep和ack都是linux下查询文件/文件内容的命令。

解决方案


为了节省时间,我创建了一个在DOM元素的data-attribute中显示来源文件名和行号的插件。https://github.com/redgetan/view_inspect

现在只能在Rails下工具,但是它支持服务器端和客户端模板。

怎么使用


<li>
  <%= download_count rubygem %>
  <a href="<%= rubygem_path(rubygem) %>">
    <strong><%= rubygem %></strong>
    <%= short_info(rubygem.versions.most_recent) %>
  </a>
</li>

我们使用HTML解析器来处理这些模板。它支持大多数的模板引擎,(象 ERB, JST, Handlebars, EJS, Eco)。基本上,它使用<%= download_count rubygem %>进行标记,然后我们使用Nokogiri HTML解析器去解析输出的HTML片段的源文件,将文件:行号(file:line)信息添加到它的子结点上。然后我们返回ERB标签表达式,中止中断。

它无法在不是基于HTML的引擎上工作(像Slim和Haml)。

例子




希望这个库可以对你有所帮助。
原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. Nginx的大计划:将原生支持JavaScript
  2. NodeJS会是昙花一现吗?
  3. JavaScript的设计缺陷?浮点运算:0.1 + 0.2 != 0.3
  4. NodeJS就是癌症[2011]
  5. Go语言实例教程基础语法篇(一)
  6. Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的
  7. 理解JavaScript中的事件路由冒泡过程及委托代理机制
  8. SpiderMonkey的JavaScript引擎[Firefox]性能超越V8[Chrome]
  9. 基于HTML5和JavaScript实现的Winamp MP3播放器
  10. 一些你不知道的JavaScript Console调试命令
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 编程技巧
  1. Go语言实例教程基础语法:数组操作篇(二)
  2. 一些你不知道的JavaScript Console调试命令
  3. Go语言实例教程基础语法篇(一)
  4. 如何选择Node.js Web开发框架?
  5. 针对特定浏览器起作用的CSS: IE Chrome Firefox CSS Hack
  6. 创造canvas的艺术
  7. 有可能将CSS应用到一个字符的一半吗?
  8. Express.JS指南
  9. 在JavaScript中判断整型的N种方法
  10. 你应该使用HTML5的header和footer标签吗?

 关键字 - 开源
  1. Mongoose学习参考文档——基础篇
  2. 一个程序员是如何搞挂NPM和Node社区的
  3. 15个最好用的Node.JS后端框架
  4. 迫于社区压力:React(Native)16将更换成MIT开源协议
  5. 开源Node.js商城:基于Thinkjs+Mysql的开源微信小程序商城
  6. 使用NodeJS搭建邮件自动发送服务器
  7. NodeJS 文件(夹)压缩/解压方案(zip/unzip)-Linux上zip相关命令
  8. QRCode:用纯JavaScript实现的微信二维码图片生成器
  9. Stop-Server:用手机关闭你的电脑
  10. 几款开源的图形化Redis客户端管理软件

 欢迎订阅 - 技术周刊

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


 关注我们

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

ourjs官方微信号