jquery插件封装思路整理

<!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>

干前端两年了,第一次自己试着封装小插件,虽然有点迟但是依旧很兴奋!UP

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。