JavaScript 객체 지향 정적 및 비정적 클래스_js 객체 지향

언젠가는 js에서 DOM 태그를 엮기 시작했고, 계속해서 엮어야 했는데, 코드가 점점 더 보기 흉해졌는데, 이는 코드 단순성 문제일 뿐만 아니라 때로는 성능 문제도 야기했습니다. 이런 일이 계속된다면 3개월 안에 하나님은 내가 쓴 내용을 알지 못할 것입니다. 이 글의 목적은 전적으로 나의 체험을 기록하는 것입니다.
먼저 JavaScript 작성 습관을 바꾸게 만든 가비지 코드부터 살펴보겠습니다. 연습, 테스트, 디버깅은 물론 정식 프로젝트에서도 다음과 같은 코드가 대량으로 채워져 있습니다.

코드 복사 코드는 다음과 같습니다.

finduser(userId) 함수
{
}
함수 showmessage(msg)
{
Var message="프롬프트, 문제 발생, 오류 이유" msg
경고(메시지)
}
함수 추가(obj)
{
Var onclick="createdom()";
Var title="Hello"
$(obj).append("” title ””)
}

말하지 마세요 위의 코드를 본 적이 없습니다. 솔직히 말해서 위의 코드는 작성이 정말 빠르고 호출도 쉽습니다. 처음 두 함수가 분노를 불러일으킬 만큼 충분하지 않다면 세 번째 함수는 작성자에게 인사하고 싶게 만들 것입니다. 이 코드의. 예, 세 번째 기능은 객체 지향을 사용하기로 한 결정을 직접적으로 촉발시켰습니다.
실제로 세 번째 함수를 다음과 같이 완전히 변형할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 추가(obj)
{
var a=document.craeteElement(“a”);
a.title=”안녕하세요”
a.href=”javascript:void(0);”
a.innerHTML= a. 제목;
a.click=function(){createdom();};
$(obj).append(a)
}

? 진전이 있나요? 좋아요, 이것이 제가 원하는 코드이지만 충분히 간결하지 않습니다. DOM 개체 생성을 클래스로 캡슐화하고 위의 세 가지 메서드를 하나의 개체에 설치할 수 있기를 바랍니다. 글쎄, 이런 종류의 작업은 인터넷에서 코드와 예제를 검색할 필요가 없습니다. , C#의 객체지향적 사고를 그대로 적용하여 완성할 수 있습니다.
첫 번째는 위의 세 가지 메서드를 객체로 캡슐화하는 것입니다. 캡슐화는 말도 안 되는 소리를 할 필요 없이 직접 코드를 작성하면 됩니다.

3개의 캡슐화된 함수

코드 복사 코드는 다음과 같습니다.

User={
Function finduser(userId)
{
},
Function showmessage(msg)
{
Var message="프롬프트, 문제가 발생했습니다. 오류 이유" msg;
경고(메시지);
},
함수 추가(obj)
{
Var a=document.craeteElement(“a”)
a.title=” 안녕하세요” ;
a.href=”javascript:void(0);”
a.innerHTML=a.title;
a.click=function(){createdom();}; >$ (obj).append(a);
}
}

위 세 가지 메소드를 저장하려면 User 변수만 선언하고, 그 사이에 사용하면 됩니다. 다른 방법 쉼표로 구분되며 현재 User는 생성자나 개인 생성자가 없는 정적 클래스이므로(제 생각에는) 새 클래스일 수 없습니다.
두 번째로 DOM 객체 생성을 캡슐화하는 정적 클래스를 만듭니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다:

createElement={
element=function(targetName){return document.createElement(targetName);},
a=document.createElement("a ")
}

위의 CreateElement 객체가 제대로 작동하는지 테스트할 수 있도록 아주 간단합니다. 이번에는 테스트를 추가 메서드에서 수행합니다. 추가 메소드는 다시 다음 코드로 변환됩니다.

코드 복사 코드는 다음과 같습니다.

함수 추가(obj)
{
Var a= createElement .a;
a.title=”안녕하세요”
a.href=”javascript:void(0);”
a.innerHTML=a. title;
a.click=function(){createdom();};
$(obj).append(a)
}

잘 작동합니다. 추가 기능에서 세 개의 a를 생성하고 차례로 obj 개체에 추가해야 합니다. 코드는 다음과 같습니다.

Code

코드 복사 코드는 다음과 같습니다.

함수 추가(obj)
{
For(i=0;i{
Var a= createElement .a
a.title =”안녕하세요”;
a.href=”javascript:void(0);”
a.innerHTML=a.title;
a.click=function(){createdom();} ;
$(obj).append(a);
}
}

표시된 최종 결과는 obj 개체에서 단 하나만 얻은 것입니다. 정말 이해가 되네요. 마치 C#을 다시 접하게 된 것 같은 기분이 들었습니다. 분석 후 Var a= CreateElement.a를 통해 처음으로 CreateElement.a를 호출하면 정말 대단합니다. ;
, document.createElement("a") 속성에는 이미 메모리에 a 개체가 있습니다. 그 후에는 CreateElement.a를 어떻게 호출하더라도 실제로는 메모리에 있는 a에 대한 참조를 얻습니다. , 그리고 변경 사항은 동일합니다. 객체, 이것이 정적 클래스의 특별한 점이지만 CreateElement.element 함수를 호출하여 객체를 얻을 때 얻는 것은 매번 새로운 객체뿐이며 메서드는 그렇습니다. 해결 방법은 CreateElement.element 함수를 호출하여 새 개체를 만드는 것입니다. 하지만 이 방법은 개체 지향적이지 않으며 권장되지 않습니다.
또 다른 더 나은 해결책은 비정적 클래스, 즉 엔터티 클래스를 사용하는 것입니다. 비정적 클래스를 만드는 방법도 매우 간단합니다.

코드 복사 코드는 다음과 같습니다.

createElement=function(){
element=function(targetName){return document.createElement(targetName );};
a=document.createElement(“a”);
}

createElement 객체를 직접 선언하고, 멤버는 세미콜론으로 구분됩니다. 물론 원한다면 이렇게 직접 작성할 수도 있지만 동일한 효과는 없습니다.

코드 복사 코드는 다음과 같습니다.

function createElement(){
element =function(targetName){return document.createElement(targetName);};
a=document.createElement(“a”);
}

위 명령문 이후 , 우리는 C#과 같은 추가 함수에서 createElement 클래스를 사용하여 DOM 객체를 생성할 수 있습니다.

함수

코드 복사 코드는 다음과 같습니다.

함수 추가 (obj)
{
for(i=0;i{
var ele=new createElement()
var a=ele.a; a.title =”안녕하세요”;
a.href=”javascript:void(0);”
a.innerHTML=a.title
a.click=function(){createdom() ;} ;
$(obj).append(a);
}
}

이런 방식으로 new createElement()가 새로운 객체가 될 때마다 참조 문제 없음.
실제로 위에서 언급한 것은 Javascript에서 정적 클래스와 비정적 클래스의 차이점입니다. 물론 우리는 이를 통해 정적 클래스와 비정적 클래스 사용의 효율성에도 여전히 약간의 차이가 있다는 것을 알고 있습니다. 그리고 호출될 때 정적 클래스여야 합니다. 참조 충돌을 신경 쓰지 않는다면 정적 클래스가 첫 번째 선택이 되어야 한다고 생각합니다.