“scrollLoading.js”为什么不能被“Zepto”使用？？？

[tjtest_003]

这是一个实现图片滚动加载的函数，作者地址：http://www.zhangxinxu.com/wordpress/2010/11/jquery%E9%A1%B5%E9%9D%A2%E5%9B%BE%E7%89%87%E7%AD%89%E5%85%83%E7%B4%A0%E6%BB%9A%E5%8A%A8%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E5%AE%9E%E7%8E%B0/

问题一：
这是一个Jquery的类库，为什么直接将“(jQuery)”修改为“(Zepto)”不可以使用？？？

jQuery和Zepto的语法不是一样的吗？？？


/*!
* jquery.scrollLoading.js
* by zhangxinxu http://www.zhangxinxu.com
* 2010-11-19 v1.0
* 2012-01-13 v1.1 偏移值计算修改 position → offset
* 2012-09-25 v1.2 增加滚动容器参数, 回调参数
*/
(function($) {
$.fn.scrollLoading = function(options) {
[color=#FF0000][b]//问题二：“$.fn.scrollLoading”在Zepto中没有，有没有什么方法可以替代？？？

[/b][/color]
var defaults = {
attr: "data-url",
container: $(window),
callback: $.noop
};
var params = $.extend({}, defaults, options || {});
//问题三：这里是扩展的什么？？？

params.cache = [];


//问题四：这个each函数的作用是什么？？？ 重组是重组的什么？？？
$(this).each(function() {
var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
//重组
var data = {
obj: $(this),
tag: node,
url: url
};
params.cache.push(data);
});


//问题五：“params.callback” 这个函数的作用是什么？？？
var callback = function(call) {
if ($.isFunction(params.callback)) {
params.callback.call(call.get(0));
}
};


//动态显示数据

var loading = function() {
//问题六：这个函数的作用是什么？？？
var contHeight = params.container.height();
if ($(window).get(0) === window) {
contop = $(window).scrollTop();
} else {
contop = params.container.offset().top;
}

$.each(params.cache, function(i, data) {
var o = data.obj, tag = data.tag, url = data.url, post, posb;

if (o) {
post = o.offset().top - contop, post + o.height();

if ((post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) {
if (url) {
//在浏览器窗口内
if (tag === "img") {
//图片，改变src
callback(o.attr("src", url));
[color=#FF0000][b]//问题七：这里使用回调函数“callback”的作用是什么？？？
[/b][/color]
} else {
o.load(url, {}, function() {
callback(o);
//问题八：整个函数的设计思想是怎样的？？？

});
}
} else {
// 无地址，直接触发回调
callback(o);
}
data.obj = null;
}
}
});
};

//事件触发
//加载完毕即执行
loading();
//滚动执行
params.container.bind("scroll", loading);
};
})(jQuery);
// })();
//})(Zepto);

[starrycheng]

$.fn.scrollLoading 在zepto中没有吧

[tjtest_003]

又人会回答吗？？？

[豪情]

我试着答一下，并不能完全的解决你的困惑： 这是一个Jquery的类库，为什么直接将“(jQuery)”修改为“(Zepto)”不可以使用？？？ 1.jQuery和Zepto的语法不是一样的吗？？？ 他们的语法都是Javascript，但是里边的细节实现是不一样的，有的api zepto是不支持的。 这个百度一下都有答案。 http://blog.csdn.net/kongjiea/article/details/42522305 2.$.fn.scrollLoading 这是一个插件，不是zepto本身包括的，jquery.scrollLoading.js，这个文件就是这个插件的方法。 http://www.jquery001.com/how-to-write-jquery-plugin.html 3. $.extend({}, defaults, options || {}); 这个是参数的覆盖，就是原来有默认的配置，可以根据自己的需求修改。 完全可以看这个文档： http://www.jquery123.com/jQuery.extend/ each在这个网站上可以查到。 5.“params.callback” 这个函数的作用是什么？？？ 这个就是触发一下回调，简单说就是，插件内部实现的细节不用关心，只通知你，我这边做完了，该你上了，这个callback就是你上的意思。 6.loading 这个函数简单来看，就是等滚动条滚动到底部时加载图片。

/*!
 * jquery.scrollLoading.js
 * by zhangxinxu  http://www.zhangxinxu.com
 * 2010-11-19 v1.0
 * 2012-01-13 v1.1 偏移值计算修改 position → offset
 * 2012-09-25 v1.2 增加滚动容器参数, 回调参数
 */
(function($) {
    $.fn.scrollLoading = function(options) {
        //问题二：“$.fn.scrollLoading”在Zepto中没有，有没有什么方法可以替代？？？

                
        var defaults = {
            attr: "data-url",
            container: $(window),
            callback: $.noop
        };
        var params = $.extend({}, defaults, options || {});
        //问题三：这里是扩展的什么？？？

        params.cache = [];


        //问题四：这个each函数的作用是什么？？？   重组是重组的什么？？？
        $(this).each(function() {
            var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
            //重组
            var data = {
                obj: $(this),
                tag: node,
                url: url
            };
            params.cache.push(data);
        });


        //问题五：“params.callback” 这个函数的作用是什么？？？
        var callback = function(call) {
            if ($.isFunction(params.callback)) {
                params.callback.call(call.get(0));
            }
        };


        //动态显示数据

        var loading = function() {
            //问题六：这个函数的作用是什么？？？
            var contHeight = params.container.height();
            if ($(window).get(0) === window) {
                contop = $(window).scrollTop();
            } else {
                contop = params.container.offset().top;
            }

            $.each(params.cache, function(i, data) {
                var o = data.obj, tag = data.tag, url = data.url, post, posb;

                if (o) {
                    post = o.offset().top - contop, post + o.height();

                    if ((post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) {
                        if (url) {
                            //在浏览器窗口内
                            if (tag === "img") {
                                //图片，改变src
                                callback(o.attr("src", url));
                                //问题七：这里使用回调函数“callback”的作用是什么？？？
                                        
                            } else {
                                o.load(url, {}, function() {
                                    callback(o);
                                    //问题八：整个函数的设计思想是怎样的？？？

                                });
                            }
                        } else {
                            // 无地址，直接触发回调
                            callback(o);
                        }
                        data.obj = null;
                    }
                }
            });
        };

        //事件触发
        //加载完毕即执行
        loading();
        //滚动执行
        params.container.bind("scroll", loading);
    };
})(jQuery);
// })();
//})(Zepto);

[豪情]

http://www.lovelucy.info/write-a-jquery-plugin.html 如何写插件。