推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
xinyu198736

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

  •  4
     
  •   xinyu198736 · Dec 23, 2015 · 6510 views
    This topic created in 3968 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

    老板看见会不会发飙啊?
    xinyu198736
    xinyu198736
    OP
    Dec 24, 2015
    29
    @lshero 不会,我们公司的业务就不在官网。。。已经一年多没动过代码了
    knva
    knva
    Dec 24, 2015
    30
    @Tink 66666
    lk920724
    lk920724
    Dec 24, 2015
    31
    ...怎么恢复?
    justjavac
    justjavac
    Dec 24, 2015
    32
    @lk920724 ...怎么恢复?

    23333333333
    x4storm
    x4storm
    Dec 24, 2015
    33
    @lk920724 恢复的话,格式化一下应该就好吧 o3o
    xinyu198736
    xinyu198736
    OP
    Dec 24, 2015
    34
    @lk920724 源代码都在的。。。你访问我一个 js 的时候我会判断是否存在.xmas.js ,如果存在就输出 xmas 地内容,过了明天直接改一下这个配置就可以了
    xinyu198736
    xinyu198736
    OP
    Oct 24, 2017
    35
    @lk920724 2333
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2864 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 95ms · UTC 13:58 · PVG 21:58 · LAX 05:58 · JFK 08:58
    ♥ Do have faith in what you're doing.