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

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

 $(".loading").lazyLoadDiv_cc({
//自定义效果,可不填
"beginHeight":400,
"loadingBgClass":"loading",
"whenToLoad":"someIn"
});

分析一下,需要扩展jquery的实例如:$(".loading")的方法。插件肯定要用到$这个方法。所以初步原型是:

 ;(function($){
$.fn.lazyLoad=function(this,options){
//处理代码
};
})(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。咱们再改一下

 ;(function($){
var lazyloadPlugin=function(ele,opt){
this.elements=ele?ele:$(".loading"),//若没有第一个参数,默认获取class为loading的元素
this.defaults={
//参数的默认值
"beginHeight":0,
"howToLoad":"fadeIn",
"loadingBgClass":"loading",//定义未加载前背景图片的类名
"whenToLoad":"allIn"//默认为div全部在可视窗口内开始加载;其他值:“someIn”
},
this.options=$.extend({},this.defaults,opt)
};
lazyloadPlugin.prototype={
bindLazy:function(){
//实现代码
}
};
//以上相当于MVC中的模型层,不需要关心逻辑怎么串起来
$.fn.lazyLoadDiv_cc=function(options){
//相当于MVC中的业务逻辑层,需要组织逻辑
var llp=new lazyloadPlugin(this,options);
return llp.bindLazy();
};
})(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

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

  1. 天猫首页迷思之-jquery实现整个div的懒加载(1)

    懒加载是众所周知的减少网页负载,提高性能的方法,不少大型用图片用的多的网站都用到了. 于是我网上一搜,得到一插件:jquery.lazyload    网址:http://www.appelsiini ...

  2. jquery延迟加载(懒加载)插件

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  3. 天猫首页迷思之-jquery实现左侧广告牌图片轮播

    本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两 ...

  4. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

  5. jquery.lazyload.js实现图片懒加载

    个人理解:将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片 ...

  6. jQuery图片懒加载lazyload插件

    http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ js 模板引擎

  7. 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  8. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  9. vue-cli3项目首页加载速度优化(cdn加速,路由懒加载,gzip压缩)

    今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...

随机推荐

  1. js计算当前日期上一个月和下一个月

    /**         * 获取上一个月         *         * @date 格式为yyyy-mm-dd的日期,如:2014-01-25         */        funct ...

  2. Delphi GetCurrentDir 获取当前文件夹

    //获取当前文件夹 GetCurrentDirvardir: string;begindir := GetCurrentDir;ShowMessage(dir); //C:\Documents and ...

  3. 【bzoj1977】[BeiJing2010组队]次小生成树 Tree 最小生成树+权值线段树合并

    题目描述 求一张图的严格次小生成树的边权和,保证存在. 输入 第一行包含两个整数N 和M,表示无向图的点数与边数. 接下来 M行,每行 3个数x y z 表示,点 x 和点y之间有一条边,边的权值为z ...

  4. [CF1041E]Tree Reconstruction

    题目大意:有一棵树,现在给你每条树边被去掉时,形成的两个联通块中点的最大的编号分别是多少,问满足条件的树存不存在,存在输出方案 题解:一条边的两个编号中较大的一个一定是$n$,否则无解. 开始构造这棵 ...

  5. [COGS 2421] [HZOI 2016] 简单的Treap 笛卡尔树

    笛卡尔树就是你给两维限制,一维堆R,一维二叉搜索树K,平地拔起一棵Treap,最广范的应用:用LCA求区间最值,建Treap,还有个什么范围top k我表示并不会查都查不到.它最妙最高的地方在于用栈来 ...

  6. pmap用法小计

    By francis_hao    Aug 4,2017   pmap-报告进程的内存映射.   概要 pmap [options] pid [...]   描述 pmap命令用来报告一个或多个进程的 ...

  7. js用for of 遍历数组

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ext4文件系统由文件的inode号定位其inode Table

    在ubuntu中(以16.06为例),stat filename 可以查看文件的inode数值,但是如何确定该inode项具体在哪个块组下的inode Table中不是那么容易,接下来通过一步步计算来 ...

  9. Win7/8 绿色软件开机启动

    在查找番茄工作法PC端软件时,发现了淡高的文章win8绿色软件开机启动,试用了一下wintabs,的确好用! 另外,office软件中有一款 OFFICE tabs的插件,标签式的管理,非常方便快捷, ...

  10. IDEA无法编译java8的lambda表达式提示Error:(16, 48) java: -source 1.5 中不支持 lambda 表达式

    在idea中新建了一个java8的项目,但是写lambda表达式提示语法错误,提示如下错误信息: Error:(16, 48) java: -source 1.5 中不支持 lambda 表达式 (请 ...