javascript - 这段代码怎么封装好？

Question

实现的功能是：

1.
页面下拉时固定nav

// 固定nav栏目
    $.fn.smartFloat_mall = function() {
    var position = function(element) {
        var top = element.position().top;
        var left = element.position().left;
            pos = element.css("position");
        $(window).scroll(function() {
            var scrolls = $(this).scrollTop();
            if (scrolls >= top) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: "0.81rem",
                        left: left
                    });
                } else {
                    element.css({
                        top: scrolls,
                        left: left
                    }); 
                }
            }else {
                element.css({
                    position:"absolute",
                    top: "2.32rem",
                    left: 0,
                });
            }
        });
    };
        return $(this).each(function() {
            position($(this));                       
        });
    };
    
    $.fn.smartFloat_nav = function() {
    var position = function(element) {
        var top = element.position().top;
        var left = element.position().left;
            pos = element.css("position");
        $(window).scroll(function() {
            var scrolls = $(this).scrollTop();
            if (scrolls >= top) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: "1.81rem",
                        left: left
                    });
                } else {
                    element.css({
                        top: scrolls,
                        left: left
                    }); 
                }
            }else {
                element.css({
                    position:"absolute",
                    top: "2.32rem",
                    left: 0,
                });
            }
        });
    };
        return $(this).each(function() {
            position($(this));                       
        });
    };
    
    $(document).ready(function() {
       $("#fix_pa").smartFloat_header();
       $("#fix_pa").smartFloat_nav();
    });

问题是两个栏目后端是分离成组件并且公用的（smarty）！
结构和公用是很大的限制，还有代码冗余，这段代码如何分装比较好，变化的参数写进
smartFloat_nav();
smartFloat_header()；其中方法里面？

Answer 1

比较了一下你的代码，两段代码只有这么一点不一样

所以可以封装成一个函数，最多只是 smartFloat_nav 和 smartFloat_mall 调用不同。

共用部分不想暴露出来可以写成闭包

(function() {
    function smartFloat(position1, position2) {
        var position = function(element) {
            var top = element.position().top;
            var left = element.position().left;
            pos = element.css("position");
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls >= top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: position1,
                            left: left
                        });
                    } else {
                        element.css({
                            top: scrolls,
                            left: left
                        });
                    }
                } else {
                    element.css({
                        position: "absolute",
                        top: position2,
                        left: 0,
                    });
                }
            });
        };
        return $(this).each(function() {
            position($(this));
        });
    }

    $.fn.smartFloat_mall = function() {
        smartFloat("0.81rem", "2.32rem");
    };
    $.fn.smartFloat_nav = function() {
        smartFloat("1.81rem", "2.32rem");
    };
})();