V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
xinyu198736
V2EX  ›  JavaScript

写了一个可以把你网站所有 js 代码格式化成圣诞树的 NodeJS 库: js2image

  •  4
     
  •   xinyu198736 · 2015-12-23 19:14:55 +08:00 · 5463 次点击
    这是一个创建于 3256 天前的主题,其中的信息可能已经有所发展或是发生改变。

    其实代码拼成图形不麻烦,最麻烦的是拼完了之后,代码仍然可以运行,为这个做了很多工作。

    github 开源地址: https://github.com/xinyu198736/js2image 欢迎围观。

    这里还有篇技术细节讲解的文章: http://zhuanlan.zhihu.com/yutou/20439979

    效果:可以看一下我们公司官网页面里的 js , http://www.souche.com
    http://assets.souche.com/assets/js/lib/jquery-1.7.1.min.js
    效果图:

    35 条回复    2017-10-24 19:41:12 +08:00
    zythum
        1
    zythum  
       2015-12-23 19:22:28 +08:00
    看来贵公司很闲... 把所有 js 都处理了下。是不是功能都要测一遍才敢上啊....
    xinyu198736
        2
    xinyu198736  
    OP
       2015-12-23 19:36:20 +08:00
    @zythum 其实只替换了主要的几个 js ,随手测了下没报错就上了。。。
    zythum
        3
    zythum  
       2015-12-23 19:40:10 +08:00
    @xinyu198736 js 是运行时的随手测不一定能测全。朱一比较保守。不太敢这么玩....
    zythum
        4
    zythum  
       2015-12-23 19:40:25 +08:00
    @xinyu198736 不过确实挺有趣的
    chairuosen
        5
    chairuosen  
       2015-12-23 19:42:56 +08:00
    可以扩展一下,拼成个对联。。。。
    Strikeactor
        6
    Strikeactor  
       2015-12-23 19:44:58 +08:00
    你们。。赢了。。
    xinyu198736
        7
    xinyu198736  
    OP
       2015-12-23 19:45:47 +08:00
    @chairuosen 有图片就能拼。。。
    xinyu198736
        8
    xinyu198736  
    OP
       2015-12-23 19:46:16 +08:00
    @zythum 官网用的人不多了。。。没人管,随便改,哈哈
    rvw
        9
    rvw  
       2015-12-23 19:49:28 +08:00
    你牛你说话
    swolf119
        10
    swolf119  
       2015-12-23 19:59:25 +08:00
    也是寂寞的够了
    kiito
        11
    kiito  
       2015-12-23 20:00:52 +08:00 via Android
    有女朋友么
    banricho
        12
    banricho  
       2015-12-23 20:36:18 +08:00
    看来工作不饱和啊,不得不说这个团队氛围真的很赞
    xinyu198736
        13
    xinyu198736  
    OP
       2015-12-23 20:49:45 +08:00
    @kiito 早结婚了,老婆还没毕业的时候就领证了
    ilotuo
        14
    ilotuo  
       2015-12-23 20:57:45 +08:00
    用 c 比较无压力
    xinyu198736
        15
    xinyu198736  
    OP
       2015-12-23 21:42:35 +08:00
    已经 110 个 star 了,顶上去,走出中国冲出世界登录火星
    Wangxf
        16
    Wangxf  
       2015-12-23 21:44:55 +08:00
    建议加上英文版 readme_EN ,哈哈
    50vip
        17
    50vip  
       2015-12-23 21:54:30 +08:00
    要有英文才能登上火星。
    aksoft
        18
    aksoft  
       2015-12-23 22:08:25 +08:00
    @chairuosen 我顶你
    zonghua
        19
    zonghua  
       2015-12-23 22:08:54 +08:00 via iPhone
    这就是 javascript 要加分号的重要原因
    xinyu198736
        20
    xinyu198736  
    OP
       2015-12-23 22:18:39 +08:00
    @Wangxf 英文已加
    xinyu198736
        21
    xinyu198736  
    OP
       2015-12-23 22:19:08 +08:00
    @chairuosen 过年可以拼成对联
    otakustay
        22
    otakustay  
       2015-12-23 22:59:36 +08:00
    @zythum 这个其实没这么麻烦,通常这种格式美化只是换行和空格的调整,并不会改变代码的执行逻辑

    所以,拉出 AST 来看是不是没变就行了,我看到有少数的字符串被分开做+运算以便能够插入换行,这个可以很简单地在 AST 上做 merge 的

    也有可能会额外加入一些空语句来填充一些位置,这个我不确定是否方便,但做 tree shaking 应该也可以有效地去除

    但总的来说,嗯,你确实得很闲
    irobot03
        23
    irobot03  
       2015-12-23 23:01:37 +08:00
    很有新意,已 star
    xinyu198736
        24
    xinyu198736  
    OP
       2015-12-24 00:00:04 +08:00
    已经上 trending 。。。
    xinyu198736
        25
    xinyu198736  
    OP
       2015-12-24 00:01:24 +08:00
    @otakustay 恩,不过我不太懂 AST ,为了快速实现,用了暴力的字符串分析,也写了篇文章分析其中涉及的技术。不过不用 ast 的问题就是如果考虑不够全的话,不能保证 100%的编译成功。
    Tink
        26
    Tink  
       2015-12-24 00:09:28 +08:00 via iPhone
    求 python 版
    lwbjing
        27
    lwbjing  
       2015-12-24 00:12:21 +08:00
    芋百万 V587..
    lshero
        28
    lshero  
       2015-12-24 00:25:42 +08:00
    “官网用的人不多了。。。没人管,随便改”

    老板看见会不会发飙啊?
    xinyu198736
        29
    xinyu198736  
    OP
       2015-12-24 09:25:01 +08:00
    @lshero 不会,我们公司的业务就不在官网。。。已经一年多没动过代码了
    knva
        30
    knva  
       2015-12-24 09:36:00 +08:00
    @Tink 66666
    lk920724
        31
    lk920724  
       2015-12-24 12:06:40 +08:00
    ...怎么恢复?
    justjavac
        32
    justjavac  
       2015-12-24 12:34:06 +08:00
    @lk920724 ...怎么恢复?

    23333333333
    x4storm
        33
    x4storm  
       2015-12-24 13:02:00 +08:00
    @lk920724 恢复的话,格式化一下应该就好吧 o3o
    xinyu198736
        34
    xinyu198736  
    OP
       2015-12-24 21:59:17 +08:00
    @lk920724 源代码都在的。。。你访问我一个 js 的时候我会判断是否存在.xmas.js ,如果存在就输出 xmas 地内容,过了明天直接改一下这个配置就可以了
    xinyu198736
        35
    xinyu198736  
    OP
       2017-10-24 19:41:12 +08:00
    @lk920724 2333
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2962 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 00:35 · PVG 08:35 · LAX 16:35 · JFK 19:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.