jqzoom源码解读-1

Posted 2022-12-13 Rank-Bill

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jqzoom源码解读-1相关的知识，希望对你有一定的参考价值。

,包含版本申明总代吗量在733行，实际代码量在700行左右

对代码进行紧凑大概在10行左右对理解代码有很大的好处
21行与733行的（function($))（jquery）为编写插件的基本用法传入jquery的对象（。。）表示在该插件是建立在jquery的基础上潜台词也即是在编码的时候肯定是先导入 jquery的文件理解这句代码明白
1.这是一句匿名的自执行的代码，作为插件会预加载一些方法

2.在jquery等价于 $，如下在jquery的源码中 window.jQuery = window.$ = jQuery;

3在形参使用 $主要是为了不和其他的标签库产生冲突（如在jstl中也会使用到$ ，之前就会有人问什么是js的问题）

23行：获取版本的信息为ie并且版本<7的时候将返回值赋给isIE6的变量
对于$.browser的用法存在着一定的争论对于

  navigator.appCodeName和navigator.appVersion

将称浏览器想象成为导航器水手航海家获得版本也即是浏览器的版本在jquery1.9中剔除了该方法，
换成了support的方法（具体的问题在下篇文章介绍）

24与25行也即是获得该对象 document.body window的对象
26行初始化

27行

需要明白
1. $.fn=$ .prototype
2.在js中所有的方法都是原型继承而来
直白点就是在 jquery上定义了一个jqzoom的方法以后可以直接使用
35行

jqzoom = function（）

只是在27行的代码中会用到该函数（注意区别）

687行定义一些初始化参数与方法
$.jqzoom =

27-34行也即定义了一个函数函数的主体方法在jqzoom中
1.注意this的指向的不一样前一个为jquey对象后一个为dom元素在后一个也即是经过筛选的dom中a元素
2.获得节点名称后统一小写如果为a 则调用jqzoom
3.返回this.each主要是为了可以直接使用该对象 ,方便进行链式操作如：$().jqzoom().XXX()等

主要的核心代码在35-686行

35行也即是定义了一个传入两个参数的函数 el和option

jqzoom = function (el, options)

35-38行主要对与api的操作

var api = null; 初始api为空
api = $(el).data(“jqzoom”);
if (api) return api;

37行获得含有a标签的（el）data为jqzoom的值

35-52行很明显的即是对其进行依稀额参数的设定具体的作用后面会有介绍，里面唯一需要提到的即是 $.extend(,$ .jqzoom.defaults, options || ); 也即是原型继承将后面的参数合并到原型继承中去作为全局对象的参数
具体用法可以参考http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html （原作者版权所有，转载所用）

以下为将设为全局后obj输出的结果可以很明显的看到为jqzoom

57-65行基本上用到了后面的所有方法

也即是对a标签下第一个 img 的选择
下图为设置后的输出

57-60均是对title的处理，由判断可知优先为是el.title（当然是去掉首尾空格后）
接下来是依次的调用了 5个的函数 Smallimage（img） Lens（）， Stage（）， Largeimage（）， Loader（）等

接下来也即是依次的解析这5个函数

很明显的既然是放大的效果，那么必然会有小图片与大图片该函数的作用是这个的吗？

首先来看一下 Smallimage 传入的image也即是上面传过来的image集合

其中的this指向smallimage

262行也即是设置了node的值为image[0]

可以猜测 262-317也均是对$obj其进行设置（原因很简单对于有反回的函数类型）

findborder

this.findborder = function ()

初始化bordertop的值
btop = ”;初始化btop
将传入image border-left-width的值给borderleft

以上同bordertop ，结果也即是产生了两对的变量 bordertop btop 与borderleft 与bleft，接下来也即是对两个的值进行的处理

substr的参数是字符位置与字符长度区别（subtstring slice）
isNaN判断是否为非数值 (Not a Number) 不是则返回true ,为数值则返回false
也即是选取bordertop值的前三的值（为数值），而并非和注意中间的‘’符号
例如：123px取得123
border-top-width;
注意该一般属性在border中 border：1px 则为上下左右均为1px,当只有两个值的时候为上下，左右分
具体详见
http://www.w3school.com.cn/tiy/t.asp?f=csse_border-width（版权作者所有，此处只为连接所用，感谢原作者）

同上进行分析
结果在上面已有，回看一下也的确是 findborder

再来看fetchdata 函数

第一句也即是会执行findborder()的函数获得top与left的border

获得图片的大小宽度（width）和高度(height)

获得outerwidth与outerHeight(也即是包含 padding border margin（true）)
具体的详细如下：

关键在于offset代表的是什么看下图也即可以可以得到并没有包含border(或者client) 到border的border内部（不包含）
offset的大小由offsetparent来决定的
http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html(版权为原作者所有，此处只作为引用连接，感谢原作者的文章)