天猫首页迷思之－jquery实现整个div的懒加载(2)-插件面向对象化-闭包和原型的实例

前文有简单的实现了一个制做懒加载的方法，但其实以方法的形式作插件扩展性不强。那么本文就来用面向对象的方法将其制做成一个真正的插件：

我想要的最终的调用效果是：

1 $(".loading").lazyLoadDiv_cc({
2      //自定义效果，可不填
3     "beginHeight":400,
4     "loadingBgClass":"loading",
5     "whenToLoad":"someIn"
6 });

分析一下，须要扩展jquery的实例如：$(".loading")的方法。插件确定要用到$这个方法。因此初步原型是：

1 ;(function($){
2     $.fn.lazyLoad=function(this,options){
3          //处理代码
4     };
5   })(jQuery);

你可能会问的问题：

• 为何前面加封号？ 答：防止该插件以前的代码忘记加封号。影响代码解析；
• 为何使用匿名函数？答：写js的一个原则是尽可能不要污染全局变量。插件若是足够庞大，确定把全部属性和方法都暴露给全局。因为js中没有语句的块级做用域，因此这里使用当即执行的匿名函数。将不须要暴露给全局，可是插件的逻辑要用到得部分代码放到函数的局部做用域中。这样就不会和其余的插件命名冲突啦。
• 为何参数要传jQuery?答：这里其实不传也不会报错，可是为了保证代码的独立性，传一下其实更保险。相似window，document这种均可以传进来。

tips:这里见缝插针，说下jquery和jquery的原型。

　　1.$是什么？

　　从jquery源码开始分析：

      第一次出现jQuery：

　　

　　由图得知，jquery是一个函数。函数的入参是selector和context，返回一个实例。

　　So,$("#div2")是一个实例，拥有不少方法，方法大部分在jQuery原型里面。

 

　　暴露给全局变量：

　　      

　　可知$和jQuery实际上是同一个函数。

　　

　　2.$.fn是什么？

　　源码中：

jQuery.fn = jQuery.prototype=$.fn

　　因此它是jQuery和$对象的原型。在它里面添加方法至关于$的实例（如$("#div1")）都能调用到。

---------------------------------------------我是一个分割线-------------------------------------------

言归正传，初步的模型并无用到面向对象的特性。当插件愈来愈庞大时，面向过程就会变得逻辑混乱，难于管理，难于扩展。so。我们再改一下

 1 ;(function($){
 2     var lazyloadPlugin=function(ele,opt){
 3         this.elements=ele?ele:$(".loading"),//若没有第一个参数，默认获取class为loading的元素
 4         this.defaults={
 5             //参数的默认值
 6             "beginHeight":0,
 7             "howToLoad":"fadeIn",
 8             "loadingBgClass":"loading",//定义未加载前背景图片的类名
 9             "whenToLoad":"allIn"//默认为div所有在可视窗口内开始加载；其余值：“someIn”
10         },
11         this.options=$.extend({},this.defaults,opt)
12     };
13     lazyloadPlugin.prototype={
14         bindLazy:function(){
15          //实现代码
16         }
17     };
18     //以上至关于MVC中的模型层，不须要关心逻辑怎么串起来
19     $.fn.lazyLoadDiv_cc=function(options){
20                //至关于MVC中的业务逻辑层，须要组织逻辑
21         var llp=new lazyloadPlugin(this,options);
22         return llp.bindLazy();
23     };
24 })(jQuery);

lazyloadPlugin是定义在匿名函数中的对象，除了调用lazyLoadDiv_cc方法，并无其余方式可使用它。所以它的各类属性和方法都很安全。特别是它的原型，由于实例没有办法改变原型，因此原型中的方法是不可修改的，很安全。经过这一层封装，咱们只暴露出来了一个看似简单的方法。却实现了可扩展、独立性强、保证性能的方法。1.可扩展性。　　经过options入参，能够实现不一样用户的需求。例如options中的whenToLoad字段，能够经过定义不一样的值，让插件在不一样的位置触发懒加载。同时，options在构造函数中定义了默认值。更健壮。2.独立性强　　将大部分属性封装起来，经过匿名函数+闭包，让代码更简洁安全3.保证性能　  根据共享的放在原型中，不共享的放在构造函数中这一原则。将默认值都放在对象的构造函数中，而方法的实现放在原型中。方法部分的内存共享，提升性能。只是一个简单的例子，就用到了原型、闭包、this、匿名函数等多个知识点，多多实践比只看书真的好多啦。实现逻辑以后，网上有在线压缩工具。所谓压缩，只是把变量语义化的名字名字改成更短的，多行也改成了一行，文件体积确实是压缩了，可是逻辑一点也没少哦。本次插件地址：    压缩后-https://github.com/HappyBangs/bang_plugins/blob/master/plugin_TmallLazyLoad/version2.0/lazyload_pcc.min.js　　 压缩前-https://github.com/HappyBangs/bang_plugins/blob/master/plugin_TmallLazyLoad/version2.0/lazyload_pcc.js