很多喜欢便利的web开发人员也许很熟悉jQuery脚本库。但是转移到Octopress下面，它并没有自带jQuery，这一点让我这个非前端开发者但又经常需要做web开发的人为难了好久。因为当我试着自己增加jQuery到Octopress头部的时候，会出现和其它库的冲突问题。既然如此就有必要学习一下Octopress提供的库和它们的优势了。

打开Octopress的网页头部代码，可以看到自带的js脚本包括：modernizr ender 和一个octopress.js文件。实际上准确来说除了modernizer，其它2个不算是库。

Modernizer是一个提高HTML5,CSS3标准化的库，它的作用很简单，就是检测一个浏览器是不是具有某个特性。与传统的通过navigator.userAgent方法不同，modernizer具有实际测试某项特性的能力，所以使用它会让网页显示标准化更准确。但是对我现在来说，它的作用不大。我是希望可以找到代替jquery做seletor engine再加上ajax请求的库，这样我可以方便的给Octopress增加我自己需求的异步请求特性等等。

再看octopress.js这个文件其实也不是我需要的，它是Octopress自己的一个脚本文件，做一下初始化工作等等。

那么就只能从ender入手了。其实这个名字也是我第一次接触。当第一次进入它的网站http://ender.no.de/就发现确实能替代jquery，可以看一下Ender官方网站首页截图如下：

是不是一下子又看到了类似jQuery的亲切的语法了呢！而且可以看到有选择器、event binding根据、css属性修改、loop工具和ajax请求工具。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$('#content a.button')
  .bind('click.button', function (e) {
    $(this).data('clicked', true).unbind()
    e.preventDefault()
  })
  .css({
      opacity: 1
    , color: 'red'
  })
  .fadeOut(250)
$.map(['a', 'b', 'c'], function (letter) {
  return letter.toUpperCase()
})
$.ajax('/data', function (resp) {
  $('#content').html(resp)
})

但是如果你进一步查看官方说明就会了解，Ender其实并不是jquery的替代产品，它甚至不算一个js库。它是一个前端脚步库的管理工具。可以根据不同的需求编译和重组不同的js库。它的哲学是：

small, loosely coupled modules are the future and large, tightly-bound monolithic libraries are the past!

这个观点非常吸引人。根据需求提供代码总是web程序员希望达到，却又很少去做的部分。例如你的网站加了一个jquery.js但是实际上，你的网站到底用到了这个库里多少功能呢？20%~40%，我觉得已经很高了。

既然Ender是这个情况，我们就需要看看Octopress给ender里编译了几个库进去。打开Octopress提供的ender.js文件，可以看到头部注释：

1
2
3
4
5
6

/*!
  * =============================================================
  * Ender: open module JavaScript framework (https://ender.no.de)
  * Build: ender build jeesh reqwest
  * =============================================================
  */

其中jessh是由4个库组成的小巧工具集合大小7.5k。你也可以通过ender工具自己选择去掉其中某些。

• domReady - a cross-browser domReady
• Qwery - a fast light-weight selector engine
• Bonzo - a bullet-proof DOM utility
• Bean - a multi-platform Event provider

domready

1

$.domReady(function () {...})

DOM queries

1

$('#boosh a[rel~="bookmark"]').each(function (el) { ... })

Manipulation

1
2
3
4

$('#boosh p a[rel~="bookmark"]').hide().html('hello').css({
  color: 'red',
  'text-decoration': 'none'
}).addClass('blamo').after('✓').show();

Events

1
2
3

$('#content a').bind('keydown input', handler)
$('#content a').emit('customEvent')
$('#content a').remove('click.myClick')

而reqwest是一个ajax库https://github.com/ded/reqwest。这里列出几个样例代码：

1
2
3
4
5
6
7
8

reqwest({
    url: 'path/to/html'
  , method: 'post'
  , data: { foo: 'bar', baz: 100 }
  , success: function (resp) {
      qwery('#content').html(resp)
    }
})

不过不能直接按照reqwest官方文档的方法来，根据在Octopress里的实际测试，发现通过ender编译的reqwest需要使用不同的语法。

1
2
3
4
5
6
7
8

$.ajax({
    url: 'path/to/html'
  , method: 'post'
  , data: { foo: 'bar', baz: 100 }
  , success: function (resp) {
      qwery('#content').html(resp)
    }
})

至此我需要的jquery的功能就都在ender里找到代替的库了。所以看了，如果你用了Octopress的话就直接放弃jquery这样的库把，相比较ender做出来的库更小巧，并且可订制化更强。