分享 用 ruby 做了一个 web 前端代码检查工具

qhwa · 2012年02月01日 · 最后由 qhwa 回复于 2012年02月04日 · 4863 次阅读

名称叫做 fdlint,用来对 HTML/JS/CSS 代码进行扫描,找出一些不合理的地方。 做这个是因为我是前端开发工程师,团队 code review 的时候,发现有很多检查项目是可以用工具扫描的,于是就有了这个想法。

因为喜欢 ruby,就用 ruby 做了。我的 ruby 属于刚刚入门,幸好有高手相助,核心部分是另外一位牛人同事 (bencode) 一起写的,细心的可以看看 bencode 和我的提交记录,明显熟练程度很不一样,呵呵。开发的过程中学到了很多很多,之后会不断完善功能、重构代码。

项目主页:https://github.com/qhwa/fdlint

请提些意见吧!不管是代码上还是功能上的。

web 版,可以扫描部分规则,网速慢的情况下需要耐心等待一下: http://fdlint.herokuapp.com/

加个 把 fdlint 移到 bin/fdlint ,给个默认参数,那样就可以在 rails app root 下直接执行了

#2 楼 @vkill 不错,谢谢 :D

/* line 79, ../../app/assets/stylesheets/account.css.scss */ .signup_or_signin .login_left ul.form_wrapper li input#signup_button { ^ CSS 级联深度不能超过 4 层 ^ 页面级别样式不使用 id background-position: -320px -120px; } 为啥呀?请解释下捏

  1. css 选择器层数太多会造成浏览器渲染性能降低,所以要尽量简化 这个选择器有 5 层 .signup_or_signin .login_left ul.form_wrapper li input#signup_button 实际上可以简化成一个 #signup_button

  2. 页面级别不使用 id 选择器,用 class 选择器可以更有扩展性 因为今后如果需要页面上复制这个模块,或者模块功能会迁移到别的页面去?用 id 就会带来潜在的风险。在 css3 和 jquery 的帮助下,把 class 用得好,可以实现和 id 一样的效果。 因此上面这个选择器可以用 .signup_or_signin input.signup_button HTML 结构也做一下调整: <input id="signup_button" type="button" ... /> => <input id="signup_button" class="signup_button" type="button" ... />

太棒了!!!! #5 楼 @qhwa

这个要顶,看源码学习 Ruby 也很不错。

支持下,是 B2B 的同学么?

#8 楼 @nowazhu 是的,这边喜欢 Ruby 的同学也挺多的

#9 楼 @qhwa 哈哈,什么时候来我们这交流下。我们现在公司每周有 Ruby Tuesday

学习一个

匿名 #12 · 2012年02月02日

#10 楼 @nowazhu @qhwa 一般在哪里举行的 Ruby Tuesday

#12 楼 @imsoz 我也是灰常有兴趣,不过不晓得在哪里,哈哈

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册