Frully.org

(function ($) {
    var $body = $('html, body');
    $.scrollTo = function (selector, offset) {
        var top = $.isNumeric(selector) ? selector : $(selector).offset().top + (offset || 0);
        $body.animate({'scrollTop':top});
    };
}(jQuery));

这是一个让页面快速滚动到指定元素位置或指定高度的插件，用法如下

jQuery(function($){
  var $content = $('#content');
  $.scrollTo($content);
  $('a.go-footer').on('click', function() {
    $.scrollTo('#footer', -20);
    return false;
  });
  $('a.back-to-top').on('click', function() {
    $.scrollTo(0);
    return false;
  });
});

最近开始读jQuery源码，并打算将所思所学记录下来。阅读顺序是从易到难，先读简单的，把event和core这样的大块头留到最后。

顺带一提，源码下载地址为：https://github.com/jquery/jquery/downloads。

今天先分析最外层的匿名函数，最外层的匿名函数代码在 intro.js 和 outro.js 这两个文件内，一个头一个尾。代码如下：

(function( window, undefined ) {
//jQuery 代码....
})( window );

可以看到 window 对象被作为参数传入，这种方式可以减少解析变量 window 时查询作用域链的深度，有助于提升性能。很多 jQuery 插件也是以这种方式把 jQuery 对象传入闭包内部的。

还有一个声明后未被传值的参数 undefined。由于 undefined 被设计成一个全局变量而不是关键字，所以 undefined 是可以被赋值的，为避免使用被污染的全局变量 undefined 而导致 bug，所以在函数作用域里产生一个名为 undefined 的未被赋值的参数(未被赋值的变量其值为 undefined 的默认值)正好不过。

下一篇内容为 data 模块。

jQuery Templates 是一个 jQuery 的官方插件，中文叫 jQuery 模板，用途是简化 data to html 操作。说明不如演示，看下例：

<ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl">
    <li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script type="text/javascript">
    var movies = [
        { Name: "The Red Violin", ReleaseYear: "1998" },
        { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
        { Name: "The Inheritance", ReleaseYear: "1976" }
    ];
    // Render the template with the movies data and insert
    // the rendered HTML under the "movieList" element
    $( "#movieTemplate" ).tmpl( movies )
        .appendTo( "#movieList" );
</script>

发现端倪没？有个 script 的 type 居然是 text/x-jquery-tmpl，恩，这就是模板了。 (更多…)