简单构建一个 jQuery 插件---extend

当我们写了一段有价值的 jQuery 代码的时候，是很希望能够封装成一个 jQuery 插件的。

可是该怎么封装呢？这里给出框架的结构

/*******************************************************************
 * @authors yanmo
 * @web http://www.jianshu.com/u/319464da1cc1
 * @email ym1185509297@163.com
 * @date 2015年9月4日
 * @version Beta 1.0
 *******************************************************************/
(function($) {
    // 下面 ymEnlargeZoom 是插件的名字，可以任意命名
    $.fn.ymEnlargeZoom = function(F) {
        F = $.extend({

            // 这里是参数设置，根据需要随便命名
            size: 400, // 大小
            magnifierImgUrl: '',  // 不需要需要轮播时，填写放大镜的url
            imgArray: [], // 需要需要轮播时，填写放大镜的url数组
            maskBackground: '#333'

        }, F);
        // 仔细看这个 F 这个是必须一致的。

        // 将插件赋值设置为变量
        var showSize = F.size, // 大小
          imgArray = F.imgArray // 放大镜的url数组

        var isCarousel = false // 是否需要轮播列表

        // 将作用DOM元素赋值为 Obj 然后下面所有的元素，都以Obj 为根进行查询，确保插件不会影响到其他地方。

        var Obj = $(this);
        
        // 如果你给方法绑定了dom元素，这里面的this是你绑定的dom

        /* 你的插件代码开始 */
        // 在这里写代码，随便写啦
        /* 你的插件代码结束 */
    }
})(jQuery);

如果你给方法绑定了dom元素，那么方法里面的this是你绑定的dom。

框架有了怎么用呢？

用例如下：

<div class="magnifier_effect"></div>
<script type="text/javascript">
  $('.magnifier_effect').ymEnlargeZoom({
    size: 400, // 大小,范围800-250之间
    // maskBackground: 'red', // 放大镜颜色，默认：#333
    // magnifierImgUrl: 'image/3.jpg', // 不需要需要轮播时，填写放大镜的url
    imgArray: ['image/0.jpg', 'image/1.jpg', 'image/2.jpg', 'image/3.jpg', 'image/4.jpg'] // 需要需要轮播时，填写放大镜的url数组
  })
</script>

使用的时候引入你的插件文件，然后.方法名就可以使用了。

最后给大家附上我的jquery插件：放大镜特效

后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。