github上的地址为 https://github.com/paperen/js-vim

实例地址为 http://paperen.com/demo/js-vim/

通过javascript在网页中重现vi的操作方式(基于jquery)

如何使用

1. 引入 core.js

   <script type="text/javascript" src="vim/core.js"></script>

2. 在想要实现vi操作的页面中加入

   <script>
   $(document).ready(function(){
    $(this).vim();
   });
   </script>
   

现有支持的命令

• r : 重新载入当前页面
• j : 向下滚动
• k : 向上滚动
• d : 向下滚动半页
• u : 向上滚动半页
• gg : 滚动到页面顶部
• G : 滚动到页面底部
• H : 后退
• L : 前进
• f : 打开当前页面上某个链接
• F : 在新标签页中打开当前页面上某个链接

有时候我们上线的网站可以要对第一次使用的用户进行一个引导，当然我们必须要建立帮助中心，也要附带一些图文说明指引用户进一步操作，而有时候也会使用一些更让人舒服的指引方法，使用一个偏暗遮罩将页面的元素挡住，然后将设定好的操作步骤一步一步加亮强调，从而引导用户去操作并附带一些说明文字与图片，这种方式不会影响太多用户体验，很简洁地引导了用户如何使用应用。

在web设计时有些操作需要给予操作者进一步提醒，我们常常会使用window.confirm();来弹出一个警告框

但是我们没法对它进行美化，它在日渐提高的审美水平下越发越觉得难看。当我们使用了bootstrap后你会发现里面有一个modal，而它实在太好看了（至少paperen是这么认为的） http://twitter.github.com/bootstrap/javascript.html#modals

我们使用这个modal来实现类似window.confirm的功能，但是这倒是需要写多点代码 例如下述代码：

将《高性能网站建设指南》读完了，感觉很好，这本书值得大家一读。让paperen对前端性能优化有了更多了解。steve souders 将所有法则都描述得很彻底，很简洁。书中一些观点更是让paperen深刻“只有10%-20%的最终用户响应时间花在了下载HTML文档上，其余的80%-90%时间花在了下载页面中的所有组件上”，“如果将后端响应时间缩短一半，整体响应时间只能减少5%-10%，如果关注前端性能，同样是将其响应时间减少一半，则整体响应时间可以减少40%-45%”，总结得真的很到位，更重要的是你在阅读过程中会通过例子自己体会到作者这些观点。

光看封面都挺有意思的，留意那只狗的比例。