<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="https://www.jb51.net/jquery11.js"></script> <script src="https://www.jb51.net/OppJqoom.js"></script> <style type="text/css"> .jqoom { width: 350px; height: 350px; border: solid 1px #DFDFDF; z-index: 10; } .jqoom img { cursor: pointer; z-index: 10; max-height: 350px; max-width: 350px; } .jqoomy { background-color: white; position: relative; z-index: 999; opacity: 0.5; cursor: pointer; border: solid 1px #DFDFDF; } #jqoomz { border: solid 1px #DFDFDF; position: absolute; overflow: hidden; } .lef { border: 1px solid #DFDFDF; display: block; height: 72px; line-height: 72px; text-align: center; text-decoration: none; width: 10px; background-color:#EBEBEB; float:left; } .lef:hover { color:red; } .jqooz { float:left; width:352px; margin-top:20px; } .jqooz ul { float: left; margin: 0; padding: 0; width:328px; height:72px; } .jqooz ul li { display: inline; list-style: none outside none; margin: 0 10px; } .jqooz ul li img { border: 1px solid #DFDFDF; max-height: 72px; max-width: 120px; } .jqooz ul li img:hover { border: 1px solid #ff6600; } </style> <script type="text/javascript"> $(function () { $(".jqoom").jqoom(); }); </script> </head> <body> <div> <img src="https://www.jb51.net/article/b3.jpg" /> </div> <div> <a href="javascript:void(0)"><</a> <ul> <li><a> <img src="https://www.jb51.net/article/b3.jpg" /></a></li> </ul> <a href="javascript:void(0)">></a> </div> </body> </html>
效果:
现在我要修改这个插件为什么在谷歌浏览器第一次加载的时候没有效果,那我要重新跟着代码来梳理放大镜里面的整个功能步骤,这个放大镜的功能还不是很复杂,在实际项目中各种函数回调嵌套,取数,数据处理,显示,页面的动态效果都交织在onload或是ready里面你要花几个小时甚至一整天来梳理你要修改页面的代码逻辑,而且还未必能梳理的全面,所以经常会有前端同事在隔了一段时间给之前写的页面添加注释的时候说我自己写代码都开始看不懂了.
本身javascript特点之一是事件监听函数回调,这是它优点,nodejs作者之所以选择js其中一个原因就是javascript的事件监听函数回调带来的优点,但函数回调同时也带来一个缺点就是经常出现return不出数据,典型的例子就是ajax,jQuery传统的ajax成功之后回调success方法,当你要把这个ajax的输出作为另一个ajax的输入的时候你就不得不要嵌套ajax,一旦嵌套多了这个代码的可读性和复杂度就增加了很多!后期的维护也自然增加了难度,Promise出来之后,jQuery、angular也都纷纷加了Promise。为什么javascript在后期维护要花这么大的时间去梳理逻辑？
我们在看看后台java或c#的语言是怎么做，典型的javaweb几乎都是springMVC框架，C#做web毋庸置疑是.net MVC,他们都有共同的特点是c层提供给前台页面ajax调用的方法都是按照所需要的数据一个一个拆分的,还有相对于的m层,mvc其实是两个维度的分层这是我个人观点,一个维度是单个细小的功能分为view,control,model,另一个维度是整个页面分成多个小的功能.所以你发现后台代码要修改其实很容易就把逻辑梳理,那前台javascript也能不能按照整个思路来取分层呢?
这个插件没有涉及到动态取数,所以分层的标准也不一样,在这里我分了两层,第一层是对鼠标移动后图片的一系列算法,第二层是事件绑定分的一系列dom的操作,代码如下:
/** * Created by on 2016/11/2. */ (function ($) { //构造函数逻辑主线路 var OppJqoom = function (_this, potions) { this._this = _this; this.ImgUrl = $("img", this._this).attr("src"); this.ImgMinWidth = $("img", this._this).width(); this.ImgMinHeigth = $("img", this._this).height(); this.ImgWidth ,this.ImgHeight ,this.leftcha,this.topcha; var settings = { width: 350, height: 350, position: "right" } $.extend(this,settings); if (potions) { $.extend(this, potions); } this.domOperation.Jqoomhover.call(this); this.domOperation.imghover.call(this); }; OppJqoom.prototype = { // 第一层 算法层 basicOperation: { /* 获取遮罩层的top和left*/ finder: function (that) { var pagey1, pagex1; if (parseFloat($(this).offset().top + $(this).height() - (that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth)) >= parseFloat(this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2) && parseFloat(this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2) >= parseFloat($(this).offset().top)) { pagey1 = (this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2); } else { if ((this.pagey - that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2) < $(this).offset().top) { pagey1 = $(this).offset().top; } else { pagey1 = ($(this).offset().top + $(this).height() - (that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth)); } } if (($(this).offset().left + $(this).width() - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth) >= (this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2) && (this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2) >= $(this).offset().left) { pagex1 = (this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2); } else { if ((this.pagex - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2) < $(this).offset().left) { pagex1 = $(this).offset().left; } else { pagex1 = ($(this).offset().left + $(this).width() - that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth); } } that.leftcha = that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth / 2; that.topcha = that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth / 2; that.domOperation.docMousemove.call(that); return {top: pagey1, left: pagex1}; }, // 放大镜的图片的top和left mover: function (that) { if (parseInt(that.pagex2 + that.leftcha) <= parseInt(that._this.width() + that._this.offset().left) && that.pagex2 >= that.leftcha + that._this.offset().left) { $(this).offset({left: that.pagex2 - that.leftcha}); } else { if (parseInt(that.pagex2 + that.leftcha) > parseInt(that._this.width() + that._this.offset().left) && that.pagex2) $(this).offset({left: that._this.width() + that._this.offset().left - that.leftcha * 2}); else $(this).offset({left: that._this.offset().left}); } if (parseInt(that.pagey2 + that.topcha) <= parseInt(that._this.height() + that._this.offset().top) && that.pagey2 >= that.topcha + that._this.offset().top) { $(this).offset({top: (that.pagey2 - that.topcha)}); //document.getElementById("move").style.top = (pagey2 - (this.pagey - this.divtop)).toString() + "px"; } else { if (parseInt(that.pagey2 + that.topcha) > parseInt(that._this.height() + that._this.offset().top)) $(this).offset({top: (that._this.height() + that._this.offset().top - that.topcha * 2)}); //document.getElementById("move").style.top = (this.height - this.divHeight).toString() + "px"; else $(this).offset({top: that._this.offset().top}); //document.getElementById("move").style.top = "0px" } var bilx = ($(this).offset().left - that._this.offset().left) / (that.ImgMinWidth / that.ImgWidth); var bily = ($(this).offset().top - that._this.offset().top) / (that.ImgMinHeigth / that.ImgHeight); return{left:bilx,top:bily}; } }, // 第二层 事件绑定层 domOperation: { // 鼠标移动到图片的一系列dom的操作 imghover: function () { var that = this; $("img", this._this).hover(function (e) { this.pagex = e.x || e.pageX; this.pagey = e.y || e.pageY; var offset; var obj = new Image(); obj.src = that.ImgUrl; obj.onload = function () { if (obj.height > 0) { that.ImgWidth = obj.width; that.ImgHeight = obj.height; if ($("#jqoomz").length == 0) { that._this.after("<div></div>"); } offset = that.basicOperation.finder.call(that._this.find("img")[0],that); } }; if ($("#jqoomz").length == 0) { that.ImgWidth = obj.width; that.ImgHeight = obj.height; that._this.after("<div></div>"); } offset = that.basicOperation.finder.call(this,that); if ($("#jqoomy").length == 0) { $(this).after("<div></div>") .siblings("#jqoomy") .addClass("jqoomy") .show() .width((that.ImgMinWidth / that.ImgWidth * that.ImgMinWidth)) .height((that.ImgMinHeigth / that.ImgHeight * that.ImgMinHeigth)) .offset({ top: offset.top, left: offset.left }); } $("#jqoomz").width(that.width).height(that.height).offset({ left: that._this.outerWidth() + that._this.offset().left, top: that._this[0].offsetTop }).append($("<img></img>").attr("src", that.ImgUrl)); },function () {}); }, //鼠标在图片上滑动的一系列dom操作 docMousemove: function () { var that=this; $(document).on("mousemove", function (event) { that.pagex2 = event.x || event.pageX; that.pagey2 = event.y || event.pageY; var offset=that.basicOperation.mover.call($("#jqoomy"),that); $("#jqoomz img").css({"margin-left": -offset.left, "margin-top": -offset.top}); }); }, //鼠标移除图片的一系列dom操作 Jqoomhover:function () { this._this.hover(function (e) { }, function () { console.log(111); $("#jqoomz").remove(); $(document).unbind("mousemove"); $("#jqoomy").remove(); }); } } }; $.fn.extend({ jqoom: function (potions) { return new OppJqoom(this, potions); } }) })(jQuery);