JavaScript面向?qū)ο蠓謱铀季S全面解析
js本身不是面向?qū)ο笳Z言,在我們實(shí)際開發(fā)中其實(shí)很少用到面向?qū)ο笏枷?以前一直以為當(dāng)要復(fù)用的時(shí)候才封裝成對(duì)象,然而隨著現(xiàn)在做的項(xiàng)目都后期測(cè)試階段發(fā)現(xiàn)面向?qū)ο蟮淖饔貌粌H僅只是復(fù)用,可能你們會(huì)說面向?qū)ο筮€有繼承,多態(tài)的概念,但在javascript里面多態(tài)的概念是不存在,而繼承由于web頁(yè)面的必須先下載js在運(yùn)行導(dǎo)致js的繼承不能像后臺(tái)那么靈活而且js沒有重載以及重寫不方便(而且js中重寫的意義不是很大),所以在js中很少用到面向?qū)ο?可能在一些插件中會(huì)看到對(duì)象的寫法,寫js的都會(huì)有同樣的感覺在寫一個(gè)插件的時(shí)候一般是先用面相過程把插件功能寫出來,然后在重構(gòu)改成對(duì)象的方法.但在實(shí)際項(xiàng)目開發(fā)中要求時(shí)間進(jìn)度和開發(fā)成本很少會(huì)有那么寬松的時(shí)間讓你先用面向過程實(shí)現(xiàn)功能在重構(gòu).實(shí)際開發(fā)中我們基本都是用面相過程寫完就直接提交了.
這種寫法發(fā)現(xiàn)一個(gè)問題就是,當(dāng)你把這個(gè)頁(yè)面的寫完了之后過一段時(shí)間突然這個(gè)頁(yè)面的功能需求或是頁(yè)面布局要調(diào)整,你在看這個(gè)頁(yè)面的代碼,一下很難快速的把整個(gè)頁(yè)面的代碼邏輯步驟梳理清楚,我相信很多寫前端都要同感吧! 舉個(gè)例子:我?guī)啄昵皩懙姆糯箸R插件,現(xiàn)在我在放出來發(fā)現(xiàn)我寫的這個(gè)插件在谷歌瀏覽器第一次渲染的時(shí)候沒有效果,代碼如下:
/// <reference path="../jquery11.js" /> (function ($) { $.fn.extend({ jqoom: function (potions) { var settings = { width: 350, height: 350, position: "right" } if (potions) { $.extend(settings, potions); } var ImgUrl = $("img", this).attr("src"); var ImgMinWidth = $("img", this).width(); var ImgMinHeigth = $("img", this).height(); var ImgWidth = 0; var ImgHeight = 0; var de = true; $(this).hover(function (e) { }, function () { $("#jqoomz").remove(); $(document).unbind("mousemove"); $("#jqoomy").remove(); de = true; }); $("img", this).hover(function (e) { var pagex = e.x || e.pageX; var pagey = e.y || e.pageY; var pagex1 = 0; var pagey1 = 0; var leftcha = 0; var topcha = 0; _this = $(this).parents("div"); if ($("#jqoomz").length == 0) { _this.after("<div id='jqoomz'></div>"); var obj = new Image(); obj.src = ImgUrl; obj.onload = function () { if (de && obj.height > 0) { de = false; ImgWidth = obj.width; ImgHeight = obj.height; finder.call(_this.find("img")[0]); } }; $("#jqoomz").width(settings.width).height(settings.height).offset({ left: $(_this).outerWidth() + $(_this).offset().left, top: $(_this)[0].offsetTop }).append($("<img></img>").attr("src", ImgUrl)); if (de && obj.height > 0) { de = false; ImgWidth = obj.width; ImgHeight = obj.height; finder.call(this); } } function mover(event) { var pagex2 = event.x || event.pageX; var pagey2 = event.y || event.pageY; if (parseInt(pagex2 + leftcha) <= parseInt($(_this).width() + $(_this).offset().left) && pagex2 >= leftcha + $(_this).offset().left) { $(this).offset({left: pagex2 - leftcha}); } else { if (parseInt(pagex2 + leftcha) > parseInt($(_this).width() + $(_this).offset().left) && pagex2) $(this).offset({left: $(_this).width() + $(_this).offset().left - leftcha * 2}); else $(this).offset({left: $(_this).offset().left}); } if (parseInt(pagey2 + topcha) <= parseInt($(_this).height() + $(_this).offset().top) && pagey2 >= topcha + $(_this).offset().top) { $(this).offset({top: (pagey2 - topcha)}); //document.getElementById("move").style.top = (pagey2 - (this.pagey - this.divtop)).toString() + "px"; } else { if (parseInt(pagey2 + topcha) > parseInt($(_this).height() + $(_this).offset().top)) $(this).offset({top: ($(_this).height() + $(_this).offset().top - topcha * 2)}); //document.getElementById("move").style.top = (this.height - this.divHeight).toString() + "px"; else $(this).offset({top: $(_this).offset().top}); //document.getElementById("move").style.top = "0px" } var bilx = ($(this).offset().left - $(_this).offset().left) / (ImgMinWidth / ImgWidth); var bily = ($(this).offset().top - $(_this).offset().top) / (ImgMinHeigth / ImgHeight); $("#jqoomz img").css({"margin-left": -bilx, "margin-top": -bily}); } function finder() { if (parseFloat($(this).offset().top + $(this).height() - (ImgMinHeigth / ImgHeight * ImgMinHeigth)) >= parseFloat(pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) && parseFloat(pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) >= parseFloat($(this).offset().top)) { pagey1 = (pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2); } else { if ((pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) < $(this).offset().top) { pagey1 = $(this).offset().top; } else { pagey1 = ($(this).offset().top + $(this).height() - (ImgMinHeigth / ImgHeight * ImgMinHeigth)); } } if (($(this).offset().left + $(this).width() - ImgMinWidth / ImgWidth * ImgMinWidth) >= (pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) && (pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) >= $(this).offset().left) { pagex1 = (pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2); } else { if ((pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) < $(this).offset().left) { pagex1 = $(this).offset().left; } else { pagex1 = ($(this).offset().left + $(this).width() - ImgMinWidth / ImgWidth * ImgMinWidth); } } leftcha = ImgMinWidth / ImgWidth * ImgMinWidth / 2; topcha = ImgMinHeigth / ImgHeight * ImgMinHeigth / 2; if ($("#jqoomy").length == 0) { $(this).after("<div id='jqoomy'></div>") .siblings("#jqoomy") .addClass("jqoomy").show() .width((ImgMinWidth / ImgWidth * ImgMinWidth)) .height((ImgMinHeigth / ImgHeight * ImgMinHeigth)).offset({ top: pagey1, left: pagex1 }); } $(document).on("mousemove", $.proxy(mover, $("#jqoomy"))); } }, function () { }); } }); })(jQuery);
html:
<!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="jquery11.js"></script> <script src="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 class="jqoom"> <img src="b3.jpg" /> </div> <div class="jqooz"> <a href="javascript:void(0)" class="lef"><</a> <ul> <li><a> <img src="b3.jpg" /></a></li> </ul> <a href="javascript:void(0)" class="lef">></a> </div> </body> </html>
效果:
現(xiàn)在我要修改這個(gè)插件為什么在谷歌瀏覽器第一次加載的時(shí)候沒有效果,那我要重新跟著代碼來梳理放大鏡里面的整個(gè)功能步驟,這個(gè)放大鏡的功能還不是很復(fù)雜,在實(shí)際項(xiàng)目中各種函數(shù)回調(diào)嵌套,取數(shù),數(shù)據(jù)處理,顯示,頁(yè)面的動(dòng)態(tài)效果都交織在onload或是ready里面你要花幾個(gè)小時(shí)甚至一整天來梳理你要修改頁(yè)面的代碼邏輯,而且還未必能梳理的全面,所以經(jīng)常會(huì)有前端同事在隔了一段時(shí)間給之前寫的頁(yè)面添加注釋的時(shí)候說我自己寫代碼都開始看不懂了.
本身javascript特點(diǎn)之一是事件監(jiān)聽函數(shù)回調(diào),這是它優(yōu)點(diǎn),nodejs作者之所以選擇js其中一個(gè)原因就是javascript的事件監(jiān)聽函數(shù)回調(diào)帶來的優(yōu)點(diǎn),但函數(shù)回調(diào)同時(shí)也帶來一個(gè)缺點(diǎn)就是經(jīng)常出現(xiàn)return不出數(shù)據(jù),典型的例子就是ajax,jQuery傳統(tǒng)的ajax成功之后回調(diào)success方法,當(dāng)你要把這個(gè)ajax的輸出作為另一個(gè)ajax的輸入的時(shí)候你就不得不要嵌套ajax,一旦嵌套多了這個(gè)代碼的可讀性和復(fù)雜度就增加了很多!后期的維護(hù)也自然增加了難度,Promise出來之后,jQuery、angular也都紛紛加了Promise。為什么javascript在后期維護(hù)要花這么大的時(shí)間去梳理邏輯?
我們?cè)诳纯春笈_(tái)java或c#的語言是怎么做,典型的javaweb幾乎都是springMVC框架,C#做web毋庸置疑是.net MVC,他們都有共同的特點(diǎn)是c層提供給前臺(tái)頁(yè)面ajax調(diào)用的方法都是按照所需要的數(shù)據(jù)一個(gè)一個(gè)拆分的,還有相對(duì)于的m層,mvc其實(shí)是兩個(gè)維度的分層這是我個(gè)人觀點(diǎn),一個(gè)維度是單個(gè)細(xì)小的功能分為view,control,model,另一個(gè)維度是整個(gè)頁(yè)面分成多個(gè)小的功能.所以你發(fā)現(xiàn)后臺(tái)代碼要修改其實(shí)很容易就把邏輯梳理,那前臺(tái)javascript也能不能按照整個(gè)思路來取分層呢?
這個(gè)插件沒有涉及到動(dòng)態(tài)取數(shù),所以分層的標(biāo)準(zhǔn)也不一樣,在這里我分了兩層,第一層是對(duì)鼠標(biāo)移動(dòng)后圖片的一系列算法,第二層是事件綁定分的一系列dom的操作,代碼如下:
/** * Created by on 2016/11/2. */ (function ($) { //構(gòu)造函數(shù)邏輯主線路 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: { // 鼠標(biāo)移動(dòng)到圖片的一系列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 id='jqoomz'></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 id='jqoomz'></div>"); } offset = that.basicOperation.finder.call(this,that); if ($("#jqoomy").length == 0) { $(this).after("<div id='jqoomy'></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 () {}); }, //鼠標(biāo)在圖片上滑動(dòng)的一系列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}); }); }, //鼠標(biāo)移除圖片的一系列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);
然后加上簡(jiǎn)單的注釋感覺頁(yè)面的邏輯步驟就很清晰了,當(dāng)然這種寫法一種比較麻煩的就是this的用法,對(duì)象中嵌套對(duì)象調(diào)用里面的方法this是指向自己的對(duì)象.
在實(shí)際開發(fā)中我們可以分為數(shù)據(jù)讀取層,數(shù)據(jù)處理層,以及dom動(dòng)態(tài)效果層,如果業(yè)務(wù)比較繁雜也可以在分個(gè)數(shù)據(jù)展現(xiàn)層.
以上所述是小編給大家介紹的JavaScript面向?qū)ο蠓謱铀季S全面解析,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例
這篇文章主要為大家介紹了一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例,比較實(shí)用,建議新手朋友們可以看看2014-10-10Layui實(shí)現(xiàn)主窗口和Iframe層參數(shù)傳遞
今天小編就為大家分享一篇Layui實(shí)現(xiàn)主窗口和Iframe層參數(shù)傳遞,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)(四)仿優(yōu)酷視頻應(yīng)用
這篇文章主要介紹了JavaScript使用DeviceOne開發(fā)實(shí)戰(zhàn)(四)仿優(yōu)酷視頻應(yīng)用的相關(guān)資料,需要的朋友可以參考下2015-12-12JavaScript使用canvas繪制坐標(biāo)和線
這篇文章主要為大家詳細(xì)介紹了JavaScript使用canvas繪制坐標(biāo)和線,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04JavaScript使用位運(yùn)算符判斷奇數(shù)和偶數(shù)的方法
這篇文章主要介紹了JavaScript使用位運(yùn)算符判斷奇數(shù)和偶數(shù)的方法,涉及javascript位運(yùn)算的使用技巧,需要的朋友可以參考下2015-06-06