地下城与码农：点亮你的技能树
作为专业人员，我们不少人喜欢玩角色扮演游戏，比如 D&amp;D 这样的，那么有没有想过把你在 Web 前端方面的技能、经验也像游戏里面一样的技能树一样点亮呢？记得回来分享你的链接。
222.222.108.13
第一层全部点满，第二层点不到。我适合干什么
来自河北廊坊的 Chrome 53.0|Windows 7 用户
2016-10-11T11:26:02.000
123.120.81.152
适合继续学习。
linux [Chrome 53.0|Mac 10.11]
2016-10-11T17:00:33.000
218.17.122.82
内容貌似为web端，移动端的怎么办？
何亮 [Chrome 49.0|Windows 7]
2016-10-12T08:56:17.000
112.65.211.209
并没有考虑移动端，这东西又不是给一般人用的，使用频率也低，Web端就可以了
来自上海的 Chrome 55.0|Chrome OS 8838.1 用户
2016-10-14T14:41:20.000
218.17.122.82
如果想web端进军的话，倒是不错的学习之路。你这么看？
何亮 [Chrome 49.0|Windows 7]
2016-10-17T16:36:20.000
作为专业人员，我们不少人喜欢玩角色扮演游戏，比如 D&amp;D 这样的，那么有没有想过把你在 Web 前端方面的技能、经验也像游戏里面一样的技能树一样点亮呢？记得回来分享你的链接。
作为专业人员，我们不少人喜欢玩角色扮演游戏，比如 D&D 这样的，那么有没有想过把你在 Web 前端方面的技能、经验也像游戏里面一样的技能树一样点亮呢？


今天给大家介绍的就是这样的一个有趣的网站：[地下城与码农](http://www.dungeonsanddevelopers.com/)（Dungeons aNd Developers）。


题图就是老王自己点亮的技能树。


![](/data/attachment/album/201610/10/091023vxxlmd757ff00950.jpg)


啊哈，老王自己都不知道已经懂这么多了。是不是也想试试？


那么就点此链接吧： <http://www.dungeonsanddevelopers.com/> ，会看到如下界面：


![](/data/attachment/album/201610/10/091239attqfwrrzm95flrf.jpg)


点击“Open the talent tree »”，即可看到一个空白的技能树，虽然是英文的，不过这应该难不倒你。


英雄！去点亮你的技能树吧，你会回来分享你的链接的。


当然，作为专业人员，只是这样点一点，似乎并不满足，那么我们来探究一下背后所用的技术吧。


这个网站是 352 公司在内部竞赛中产生的，除了精美的仿游戏界面外，采用了 [jQuery](http://www.jquery.com/) 和 [Knockout](http://www.knockoutjs.com/) 来构建的。jQuery 大家已经熟知了，而 [Knockout](http://www.knockoutjs.com/) 可能有的人不太了解，其实它也不太新了，但是它的特性正好用在这个项目上：



> 
> Knockout 是一款很优秀的 JavaScript 库，它可以帮助你仅使用一个清晰整洁的底层数据模型，即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部 UI 内容需要自动更新（比如：依赖于用户行为的改变或者外部的数据源发生变化），Knockout 都可以很简单的帮你实现，并且非常易于维护。
> 
> 
> 


是不是也想自己搭建一个呢？

