jquery插件的写法，以及requireJS如何引入jquery插件

下面，就是一个自制的jquery小插件(affix)，用于固定某个元素在浏览器顶部(也可以自定义距离浏览器顶部多高的位置)，不随滚动条的下拉而移动

;(function(){    $.fn.extend({            'affix':function(opt){                var DEFAULT = {                    'offLeft':'0',                    'offT':'0'                };                var options = $.extend({},DEFAULT,opt);                this.each(function(){                    var obj = $(this);                    var offTop = obj.offset().top;                    $(window).bind('scroll',checkTop);                    function checkTop(){                        var scrollT = $(window).scrollTop();                        if(scrollT >= offTop) {                            obj.css({'position':'fixed','left':'0','top':options.offT});                        } else {                            obj.css({'position':'static'});                        }                    }                });        }    });})($)

这个插件是一个符合jquery插件规范的，大家可以参照这种jquery插件的写法，来封装自己的插件。

那么在requireJS中，如何使用呢？
<script src="js/require-2.1.11.js" data-main="js/main"></script>
在我们的项目中引入requireJS，data-main="js/main"
main.js就是我们项目中js文件的入口文件

require.config({    paths:{        'jquery': [            'https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min',            'https://cdn.bootcss.com/jquery/2.1.4/jquery.min'        ]    },    shim:{        'affix':{            deps:['jquery']        }    }});require(['affix'],function(){    $('.subnav').affix();    $('.aside').affix();});

因为affix是一个深度依赖jquery的小插件，所以我们在require中引入affix的时候，需要先配置affix的依赖项

shim:{    'affix':{        deps:['jquery']    }}

那么页面中class为subnav和aside的元素，当滚动条往下拉的时候 ，元素滚动页面顶部的时候，就会被定住，不会继续往上滚动了。

---

写在最后：约定优于配置——-软件开发的简约原则.


——————————–(完)————————————–

我的
个人网站：https://neveryu.github.io/guestbook/
Github: https://github.com/Neveryu
新浪微博：http://weibo.com/Neveryu

　　　　　　　　

更多学习资源请关注我的新浪微博….

---