本文来自白板（BearyBoard）的设计团队，白板是一款设计图实时讨论工具，旨在为设计师提供一个更好的方式将设计展示给团队。
因为工程师们都忙于产品的开发，所以建设团队博客这么“容易”的事情就落在了设计师头上。经过一番努力，本人终于建成了一个快如闪电、轻如鸿毛的博客。这时候大家觉得在关于页面放几张 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 加到你的页面中去：
<head>
<s cript src="cargo.js"></s cript></head>
然后扫一眼 Instagram API Endpoints (http://instagram.com/developer/endpoints/)，了解大致的结构，就可以在需要的位置直接插入自己的 template 了，如：
<body>
<s cript>
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>'
});
</s cript></body>
稍微解释一下代码：ACCESS-TOKEN 当然是要替换的；count 当然是指取回多少张照片；熟悉 {{mustache}} 的人应该知道，直观来说就是 {{#data}} 和 {{/data}} 会把他们俩中间每张取回来的照片变成一个带原链接的 li。
再来一个应用示例，展示 dribbble 的 dribbble shots：
<s cript>
cargo({
endpoint: 'http://api.dribbble.com/players/dribbble/shots',
template: '{{#shots}}<img src="{{image_400_url}}">{{/shots}}'
});</s cript>
就是这么简单，就是这么 flexible，我们设计师要的就是这样的东西。对于工程师和看得懂代码的设计师，Cargo.js 还包括了一些参数，你们可以用来干其他高端一点的事情，如 cacheExpire，success，error，beforeRender，afterRender 等，由于本文是写给普通设计师看的，这些你们就自己研究吧。
如果你有什么 idea，欢迎 fork，或者……想干嘛干嘛吧，毕竟是 WTFPL Licence 嘛。当然如果可以的话，还是希望你能将它再简化，进一步造福设计师们，然后告诉我一下 :)
1
作品
1
粉丝
0
关注
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册