Cargo.js - 设计师也要有春天

2014年03月10日

因为工程师们都忙于产品的开发,所以建设团队博客这么“容易”的事情就落在了设计师头上。经过一番努力,本人终于建成了一个快如闪电、轻如鸿毛的博客。这时候大家觉得在关于页面放几张 Instagram 照片,可以展示一下我们团结紧张严肃活泼的精神面貌,这下完蛋了,要知道老子为了速度和体积,可是连 Bootstrap 都没用啊,怎么展示 Instagram 照片呢?是不是要用 jQuery 然后找个 plugin 来干这个事呢?万一明天大家不满足了,又想展示一下 Dribbble 图片了,是不是要再找一个 plugin 来干这个事啊?我突然感觉肚子疼,可能要请个假……

是什么?

Cargo.js 是一个独立轻巧,使用简单,获取 JSONP 内容来将其展示的小工具。

为什么?

作为设计师,我的要求很简单,我就要一个小工具,用起来傻瓜,体积小,速度快,不倚赖于其他库,可以一个搞定所有用 JSONP 的服务,有 client-side cache,可以轻松修改 markup 自己定制 template 的小工具。结果发现完全不简单,找来找去找到的都有点别扭,不是做得太多就是做得太少,没有称心如意的,只能自己写了,相信对我的设计师同僚们也是有用的。谁说设计师是一群孤独的人,只能做图片YY,做不了真东西?老子做一个给你看看!

怎么用?

下面以 Instagram 为例(Instagram 有点麻烦,所以特别讲一下,其他比较简单就不讲了):

  • 要使用 Instagram 的 API,首先你需要获得一个 access token。访问如下页面,注册一个新 Client / App:
http://instagram.com/developer/clients/manage/
  • Website 和 OAuth redirect_uri 都填写你的网站地址,如:http://mydomain.com;
  • 注册成功后你会获得一个 CLIENT-ID,拷下来;
  • 访问如下页面(将 CLIENT-ID 和 mydomain 替换为真实内容):
https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=http://mydomain.com&response_type=token
  • 点击“Authorize”后,页面会跳转到你的网站,在地址栏你会看到你的网站地址显示如下:
http://mydomain.com/#access_token=xxxxx.xxxxx.xxxxxxxxxxx
  • 将等号后面的一长串内容拷下来,这就是你的 access token 了。

以下才是真正使用 Cargo.js 的部分,以上看起来比较复杂都是 Instagram 的错,跟我没关系。

首先自然是将 Cargo.js 加到你的页面中去:

<head>
    <script src="cargo.js"></script>
</head>

然后扫一眼 Instagram API Endpoints (http://instagram.com/developer/endpoints/),了解大致的结构,就可以在需要的位置直接插入自己的 template 了,如:

<body>
    <script>
        cargo({
            endpoint: 'https://api.instagram.com/v1/users/self/media/recent/?access_token=ACCESS-TOKEN&count=25',
            template: '<div class="instagram">\
                <h1>Instagram</h1>\
                <ul class="instgram-photos">\
                    {{#data}}\
                    <li>\
                        <a href="{{link}}">\
                            <img src="{{images.low_resolution.url}}">\
                        </a>\
                    </li>\
                    {{/data}}\
                </ul>\
            </div>'
        });
    </script>
</body>

稍微解释一下代码:ACCESS-TOKEN 当然是要替换的;count 当然是指取回多少张照片;熟悉 {{mustache}} 的人应该知道,直观来说就是 {{#data}} 和 {{/data}} 会把他们俩中间每张取回来的照片变成一个带原链接的 li。

再来一个应用示例,展示 dribbble 的 dribbble shots:

<script>
    cargo({
        endpoint: 'http://api.dribbble.com/players/dribbble/shots',
        template: '{{#shots}}<img src="{{image_400_url}}">{{/shots}}'
    });
</script>

就是这么简单,就是这么 flexible,我们设计师要的就是这样的东西。对于工程师和看得懂代码的设计师,Cargo.js 还包括了一些参数,你们可以用来干其他高端一点的事情,如 cacheExpire,success,error,beforeRender,afterRender 等,由于本文是写给普通设计师看的,这些你们就自己研究吧。

Download Cargo.js from Github

如果你有什么 idea,欢迎 fork,或者……想干嘛干嘛吧,毕竟是 WTFPL Licence 嘛。当然如果可以的话,还是希望你能将它再简化,进一步造福设计师们,然后告诉我一下 :)