jquery插件封装思路整理

浏览数：28 / 时间：2015年06月09日

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写插件的栗子</title>
</head>
<body>
    <img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0422/thumb_1_220_318_20150422091710455317.jpg" width="220" height="318" alt="神探驾到">
    <img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0401/thumb_1_174_98_20150401051450832875.jpg" alt="" width="220" height="318">
    <img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0422/thumb_1_220_318_20150422092027822146.jpg" alt="" width="220" height="318">
</body>
</html>
<script src="http://js.static.m1905.cn/core/jquery-edge.min.js"></script>
<script type="text/javascript">

(function($){

    $.fn.changeImgSrc = function(options){
        var defaults = {
            "data":"data-lazysrc",
            ‘border‘:"1px solid red"
        };
        //extend 是把options 和 defaults合并 取并集，在这config的结果其实就是defaults定义的对象，所以取值的时候可以直接config打点取到data border等自定义属性
        // defaults = {
        //     "a" : 1,
        //     "b" : 2
        // };
        // options = {
        //     "a" : 1,
        //     "b" : 3
        // };
        // 那么config = {
        //     "a" : 1,
        //     "b" : 3
        // }  
        // 以options最后自定义的为主优先级最高，defaults默认的其次
        var config = $.extend({}, defaults, options);
        return this.each(function(){
            var lazysrc = $(this).attr(config.data);
            $(this).attr(‘src‘,lazysrc).css("border",config.border);
        })
    }
    $(‘img‘).changeImgSrc({
        ‘data‘:"data-lazysrc",
        ‘border‘:‘20px solid yellow‘
    });

})(jQuery);

</script>