JavaScript 객체지향 계층적 사고에 대한 종합적인 분석

JS 자체는 객체지향 언어가 아닙니다. 사실 우리의 실제 개발에서는 객체지향적 사고가 거의 사용되지 않습니다. 현재 우리가 하고 있는 프로젝트는 모두 후기 테스트 단계에 있으며, 객체 지향의 역할은 재사용뿐 아니라 객체 지향에도 상속과 다형성의 개념이 있다고 말할 수 있지만 다형성의 개념은 재사용입니다. JavaScript에는 존재하지 않으며 웹 페이지가 실행되기 전에 먼저 js를 다운로드해야 한다는 사실 때문에 상속이 발생합니다. 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  src="/static/imghwm/default1.png"  data-src="jquery11.js"  class="lazy"  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 ></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="/static/imghwm/default1.png"  data-src="b3.jpg"  class="lazy"   / alt="JavaScript 객체지향 계층적 사고에 대한 종합적인 분석" >
</div>
<div class="jqooz">
<a href="javascript:void(0)" class="lef"><</a>
<ul>
<li><a>
<img  src="/static/imghwm/default1.png"  data-src="b3.jpg"  class="lazy"   / alt="JavaScript 객체지향 계층적 사고에 대한 종합적인 분석" ></a></li>
</ul>
<a href="javascript:void(0)" class="lef">></a>
</div>
</body>
</html>

효과:

이제 Google Chrome을 처음 로드할 때 이 플러그인이 효과가 없는 이유를 수정하고 싶습니다. 그런 다음 코드를 다시 따라 돋보기로 전체 기능 단계를 정렬해야 합니다. 이 돋보기의 기능은 그다지 복잡하지 않습니다. 실제 프로젝트에는 다양한 기능 콜백 중첩, 데이터 검색, 데이터 처리, 표시 및 페이지의 동적 효과가 모두 얽혀 있거나 여러 가지가 필요합니다. 수정하려는 페이지의 코드 로직을 정리하는 데 몇 시간 또는 심지어 하루 종일 걸릴 수 있으며 정리가 불가능할 수도 있으므로 프런트엔드 동료가 이전에 작성한 내용에 주석을 추가할 때 종종 이렇게 말합니다.

JavaScript 자체의 특징 중 하나가 이벤트 수신 기능인데, 이것이 nodejs 작성자가 선택한 이유 중 하나입니다. Node.js는 자바스크립트의 이벤트 수신 함수 콜백이 가져오는 장점입니다. 그러나 함수 콜백은 종종 데이터 없이 반환된다는 단점도 있습니다. 전형적인 예는 jQuery의 전통적인 ajax가 성공 메소드를 호출하는 것입니다. 이 ajax의 출력을 다른 ajax의 입력으로 사용하려면 ajax를 더 중첩해야 하며, 이후에는 코드의 가독성과 복잡성이 많이 감소합니다. Promise가 나왔고 jQuery와 Angle도 Promise를 추가했습니다. JavaScript가 유지 관리의 후반 단계에서 논리를 정리하는 데 왜 그렇게 많은 시간이 걸리나요?

Java나 C#의 배경 언어가 어떻게 사용되는지 살펴봅니다. 일반적인 Javaweb은 거의 모두 springMVC 프레임워크입니다. C#은 의심할 바 없이 웹용 .net MVC입니다. 첫 번째 페이지에서 ajax가 호출하는 메소드는 필요한 데이터에 따라 하나씩 분할되며, m 레이어를 기준으로 mvc는 실제로 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 메소드는 자신의 객체를 가리킵니다.

실제 개발에서는 데이터로 나눌 수 있습니다. 읽기 레이어, 데이터 처리 레이어, DOM 동적 효과 레이어 비즈니스가 더 복잡하다면 별도의 데이터 표현 레이어로 표시할 수도 있습니다.