javascript - jQuery 自制图片展示小插件求建议

问题描述

问 题

先贴上代码 github

小白自制的jQuery小插件，希望各路大神看看javascript，css代码有哪些需要修改或提高的地方

我自知代码写得不够好，不要见笑！

解决方案

大概看了一下，感觉还是很棒！

个人愚见，有一些可以优化的地方。

• setTimeout的使用
  在高级浏览器中，requestAnimationFrame效率更高，因此建议去了解一下这个方法的使用，兼容性写法如下：

;
(function(ROOT, struct, undefined) {

    var lastTime = 0,
        nextFrame = ROOT.requestAnimationFrame       ||
                    ROOT.webkitRequestAnimationFrame ||
                    ROOT.mozRequestAnimationFrame    ||
                    ROOT.msRequestAnimationFrame     ||
                    function(callback) {
                        var currTime = + new Date,
                            delay = Math.max(1000/60, 1000/60 - (currTime - lastTime));
                        lastTime = currTime + delay;
                        return setTimeout(callback, delay);
                    },
        cancelFrame=ROOT.cancelAnimationFrame               ||
                    ROOT.webkitCancelAnimationFrame         ||
                    ROOT.webkitCancelRequestAnimationFrame  ||
                    ROOT.mozCancelRequestAnimationFrame     ||
                    ROOT.msCancelRequestAnimationFrame      ||
                    clearTimeout;
                    
                ...

• 扩展jQuery插件的方式，建议不要直接使用jQuery的内部方法，因为这样太依赖jquery了，你可以使用原生方法开发出来，然后使用jquery的$.fn.extend让自己的插件变成jquery的插件。

那么在以后的使用中，你就可以通过改变很小的地方，让自己的插件变成amd标准，在requirejs中使用，或者轻松转换为angular/react等的插件。

大致写法如下，

并不适用于你的插件，需要你自己下功夫多研究研究

$.fn.extend({
    xxx:function(config){
        return new Carousel(this,config);
    }
});

• 运动算法的计算方式，建议去了解一下TWeen，

• drag方法还可以提炼优化，有点复制，不利于重复调用

• 绑定事件的回调函数建议不要使用匿名函数

这篇关于javascript - jQuery 自制图片展示小插件求建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！