JavaScript オブジェクト指向の階層的思考の包括的分析-jsチュートリアル-php.cn

js 自体はオブジェクト指向言語ではありません。実際の開発ではオブジェクト指向の考え方はほとんど使用されませんでしたが、プロジェクトとして再利用する場合はオブジェクトにカプセル化されると考えていました。現在やっているのは後のテスト段階ですが、オブジェクト指向の役割は再利用だけではありません。オブジェクト指向にも継承やポリモーフィズムの概念があると言えるかもしれませんが、オブジェクト指向にはポリモーフィズムの概念は存在しません。 JavaScript と継承では、Web ページが実行前にまず js をダウンロードする必要があるため、js の継承はバックグラウンドほど柔軟にできず、js にはオーバーロードがなく、書き換えが不便です (そして、js で書き換える意味はあまり重要ではありません)。そのため、JS ではオブジェクト指向が使用されることはほとんどなく、一部のプラグインではオブジェクトが使用されることがあります。一般に、プラグイン関数は、最初にを介して書き出されます。しかし、実際のプロジェクト開発では、リファクタリング前にプロセス指向の実装機能を使用できる時間はほとんどありません。実際の開発では、基本的にプロセス指向のプロセスを使用して作成し、直接送信します

この作成方法の問題は、このページを作成した後、しばらくしてから、このページの機能要件やページレイアウトが突然必要になることです。このページのコードを見ると、フロントエンドを書く多くの人が同じように感じていると思います。数年前に虫眼鏡プラグインをリリースしたところ、Google Chrome が最初にレンダリングしたときに、そのプラグインが効果を示さなかったことがわかりました。コードは次のとおりです。

/// <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=&#39;jqoomz&#39;></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  alt="JavaScript オブジェクト指向の階層的思考の包括的分析" ></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=&#39;jqoomy&#39;></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" / alt="JavaScript オブジェクト指向の階層的思考の包括的分析" >
</div>
<div class="jqooz">
<a href="javascript:void(0)" class="lef"><</a>
<ul>
<li><a>
<img  src="b3.jpg" / alt="JavaScript オブジェクト指向の階層的思考の包括的分析" ></a></li>
</ul>
<a href="javascript:void(0)" class="lef">></a>
</div>
</body>
</html>

ログイン後にコピー

効果:

JavaScript オブジェクト指向の階層的思考の包括的分析

ここで、Google Chrome が初めてロードされたときにこのプラグインが効果がない理由を変更したいと思います。その後、全体を整理するためにもう一度コードに従う必要があります。虫眼鏡の機能ステップ。実際のプロジェクトでは、さまざまな関数コールバックのネスト、データ取得、データ処理、表示、およびページの動的効果がすべて onload または Ready に絡み合っています。変更するページのコードロジックを整理するには数時間、場合によっては 1 日かかりますが、フロントエンドの同僚がコメントを追加するときに、包括的に整理することは不可能な場合があります。以前に書いたページをしばらく経つと、自分が書いたコードさえ理解できないと言われます。

JavaScript 自体の特徴の 1 つはイベントリスニング関数のコールバックであり、これが nodejs 作成者がその利点の 1 つです。 js は JavaScript のイベントリスニング関数のコールバックによってもたらされる利点がありますが、関数コールバックには、jQuery の従来の ajax コールバック成功メソッドが頻繁に発生するという欠点もあります。この ajax の出力を別の ajax の入力として使用するには、ajax をネストする必要があります。ネストが多すぎると、このコードの可読性と複雑さが大幅に増加しました。 Promise が登場してからは、当然、難易度も高くなります。 jQuery と angular にも Promise が追加されました。 JavaScript はメンテナンスの後半段階でロジックを整理するのになぜこれほど時間がかかるのでしょうか?

バックグラウンドの Java または C# 言語がどのように使用されているかを見ていきます。典型的な Javaweb は、間違いなく、Web 用の .net MVC です。フロントエンドページは必要なデータに応じて1つずつ分割されており、MVCは実際には2次元に階層化されています。これは私の個人的な意見です。とコントロール、モデル、もう 1 つの次元は、ページ全体が複数の小さな関数に分割されているため、バックエンドコードを変更するときにロジックを簡単に整理できる場合は、フロントエンド JavaScript を階層化できます。全体のアイデアによると?

このプラグインには動的な数値の取得が含まれていないため、階層化の基準も異なります。最初の階層はマウスの後の一連の画像のアルゴリズムです。 2 番目の層は、イベントバインディングに分割された一連の 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 id=&#39;jqoomz&#39;></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=&#39;jqoomz&#39;></div>");
}
offset = that.basicOperation.finder.call(this,that);
if ($("#jqoomy").length == 0) {
$(this).after("<div id=&#39;jqoomy&#39;></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  alt="JavaScript オブジェクト指向の階層的思考の包括的分析" ></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);

ログイン後にコピー

次に、ページの論理的な手順が非常に明確であることを示す簡単なコメントを追加します。この書き方で厄介なのは this の使い方です。オブジェクト内のネストされたオブジェクトは this メソッドを呼び出します。自分のオブジェクトを指します。

実際の開発では、データ読み取り層、データ処理層、ビジネスがより複雑な場合は、データ表示レイヤーに分割することもできます。