JavaScript面向?qū)ο蠓謱铀季S全面解析
更新時(shí)間：2016年11月22日 14:18:51 作者：核桃大號(hào)
這篇文章主要介紹了JavaScript面向?qū)ο蠓謱铀季S，js本身不是面向?qū)ο笳Z(yǔ)言,在我們實(shí)際開(kāi)發(fā)中其實(shí)很少用到面向?qū)ο笏枷?。下文關(guān)于js面向?qū)ο笾R(shí)給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧
js本身不是面向?qū)ο笳Z(yǔ)言,在我們實(shí)際開(kāi)發(fā)中其實(shí)很少用到面向?qū)ο笏枷?以前一直以為當(dāng)要復(fù)用的時(shí)候才封裝成對(duì)象,然而隨著現(xiàn)在做的項(xiàng)目都后期測(cè)試階段發(fā)現(xiàn)面向?qū)ο蟮淖饔貌粌H僅只是復(fù)用,可能你們會(huì)說(shuō)面向?qū)ο筮€有繼承,多態(tài)的概念,但在javascript里面多態(tài)的概念是不存在,而繼承由于web頁(yè)面的必須先下載js在運(yùn)行導(dǎo)致js的繼承不能像后臺(tái)那么靈活而且js沒(méi)有重載以及重寫(xiě)不方便(而且js中重寫(xiě)的意義不是很大),所以在js中很少用到面向?qū)ο?可能在一些插件中會(huì)看到對(duì)象的寫(xiě)法,寫(xiě)js的都會(huì)有同樣的感覺(jué)在寫(xiě)一個(gè)插件的時(shí)候一般是先用面相過(guò)程把插件功能寫(xiě)出來(lái),然后在重構(gòu)改成對(duì)象的方法.但在實(shí)際項(xiàng)目開(kāi)發(fā)中要求時(shí)間進(jìn)度和開(kāi)發(fā)成本很少會(huì)有那么寬松的時(shí)間讓你先用面向過(guò)程實(shí)現(xiàn)功能在重構(gòu).實(shí)際開(kāi)發(fā)中我們基本都是用面相過(guò)程寫(xiě)完就直接提交了.
這種寫(xiě)法發(fā)現(xiàn)一個(gè)問(wèn)題就是,當(dāng)你把這個(gè)頁(yè)面的寫(xiě)完了之后過(guò)一段時(shí)間突然這個(gè)頁(yè)面的功能需求或是頁(yè)面布局要調(diào)整,你在看這個(gè)頁(yè)面的代碼,一下很難快速的把整個(gè)頁(yè)面的代碼邏輯步驟梳理清楚,我相信很多寫(xiě)前端都要同感吧! 舉個(gè)例子:我?guī)啄昵皩?xiě)的放大鏡插件,現(xiàn)在我在放出來(lái)發(fā)現(xiàn)我寫(xiě)的這個(gè)插件在谷歌瀏覽器第一次渲染的時(shí)候沒(méi)有效果,代碼如下:
/// <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í)候沒(méi)有效果,那我要重新跟著代碼來(lái)梳理放大鏡里面的整個(gè)功能步驟,這個(gè)放大鏡的功能還不是很復(fù)雜,在實(shí)際項(xiàng)目中各種函數(shù)回調(diào)嵌套,取數(shù),數(shù)據(jù)處理,顯示,頁(yè)面的動(dòng)態(tài)效果都交織在onload或是ready里面你要花幾個(gè)小時(shí)甚至一整天來(lái)梳理你要修改頁(yè)面的代碼邏輯,而且還未必能梳理的全面,所以經(jīng)常會(huì)有前端同事在隔了一段時(shí)間給之前寫(xiě)的頁(yè)面添加注釋的時(shí)候說(shuō)我自己寫(xiě)代碼都開(kāi)始看不懂了.
本身javascript特點(diǎn)之一是事件監(jiān)聽(tīng)函數(shù)回調(diào),這是它優(yōu)點(diǎn),nodejs作者之所以選擇js其中一個(gè)原因就是javascript的事件監(jiān)聽(tīng)函數(shù)回調(diào)帶來(lái)的優(yōu)點(diǎn),但函數(shù)回調(diào)同時(shí)也帶來(lái)一個(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出來(lái)之后,jQuery、angular也都紛紛加了Promise。為什么javascript在后期維護(hù)要花這么大的時(shí)間去梳理邏輯？
我們?cè)诳纯春笈_(tái)java或c#的語(yǔ)言是怎么做，典型的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è)思路來(lái)取分層呢?
這個(gè)插件沒(méi)有涉及到動(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)單的注釋感覺(jué)頁(yè)面的邏輯步驟就很清晰了,當(dāng)然這種寫(xiě)法一種比較麻煩的就是this的用法,對(duì)象中嵌套對(duì)象調(diào)用里面的方法this是指向自己的對(duì)象.
在實(shí)際開(kāi)發(fā)中我們可以分為數(shù)據(jù)讀取層,數(shù)據(jù)處理層,以及dom動(dòng)態(tài)效果層,如果業(yè)務(wù)比較繁雜也可以在分個(gè)數(shù)據(jù)展現(xiàn)層.
以上所述是小編給大家介紹的JavaScript面向?qū)ο蠓謱铀季S全面解析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例
這篇文章主要為大家介紹了一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例，比較實(shí)用，建議新手朋友們可以看看2014-10-10
window.ActiveXObject使用說(shuō)明
判斷瀏覽器是否支持ActiveX控件，如果瀏覽器支持ActiveX控件可以利用2010-11-11
這篇文章主要介紹了JAVA四種基本排序方法,較為詳細(xì)的總結(jié)分析了插入法、冒泡法、選擇法及Shell排序等四種常用的排序技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-07-07
Layui實(shí)現(xiàn)主窗口和Iframe層參數(shù)傳遞
今天小編就為大家分享一篇Layui實(shí)現(xiàn)主窗口和Iframe層參數(shù)傳遞，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架的安裝使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript使用DeviceOne開(kāi)發(fā)實(shí)戰(zhàn)（四）仿優(yōu)酷視頻應(yīng)用
這篇文章主要介紹了JavaScript使用DeviceOne開(kāi)發(fā)實(shí)戰(zhàn)（四）仿優(yōu)酷視頻應(yīng)用的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細(xì)介紹了原生JS寫(xiě)一個(gè)環(huán)形的鼠標(biāo)滑動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
JavaScript使用canvas繪制坐標(biāo)和線
這篇文章主要為大家詳細(xì)介紹了JavaScript使用canvas繪制坐標(biāo)和線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
JavaScript使用位運(yùn)算符判斷奇數(shù)和偶數(shù)的方法
這篇文章主要介紹了JavaScript使用位運(yùn)算符判斷奇數(shù)和偶數(shù)的方法,涉及javascript位運(yùn)算的使用技巧,需要的朋友可以參考下2015-06-06