javascript 디자인 패턴 - 단일 모드 객체 지향 학습 basics_js 객체 지향

싱글턴 모드(싱글턴)

싱글턴은 스크립트가 로드될 때 생성되며, 관련된 일련의 변수와 메소드를 논리 단위로 구성할 수 있으며 논리 단위의 내용은 다음과 같습니다. 통과됨 단일 변수는 액세스에 사용됩니다.

단일 엔터티는 주로 세 부분으로 나뉩니다.

내부 정보(예: Sky)에 액세스하는 데 사용되는 입력 변수
속성(예: nickName/age/timeInfo)
메서드(예: sayHello)

기본 구조

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

var Sky = {

/*
* 기능 1 , 변수 관리
*/

nickName: "sky",
age: "26",

/*
* 함수 2, 로딩 중 변수 초기화
* 로딩 과정에서 Sky 실행 및 초기화 .info
*/

timeInfo: function()
{
var _year = new Date().getFullYear()
return _year;
}(),

/*
* 함수 3, 함수 관리, 함수가 더 이상 흩어지지 않게 만들기
*/

sayHello: 함수 ()
{
alert("hello, world!");
}

}
//모든 내부 정보는 Sky
alert( Sky.timeInfo);

다음은 좀 더 자세한 설명입니다. 이 글을 읽고 나면 인터넷에 글을 쓴 많은 전문가들이 있을 것이라고 생각합니다. Node.js에서는 단일 모드가 매우 일반적으로 사용됩니다.
싱글턴은 네임스페이스를 나누고 관련 속성 및 메서드 그룹을 함께 구성하는 데 사용되는 개체입니다. 인스턴스화할 수 있는 경우 한 번만 인스턴스화할 수 있습니다.
싱글 모드는 JavaScript에서 가장 기본적이면서도 가장 유용한 모드 중 하나입니다.
특징:

. 네임스페이스를 분할하여 전역 변수로 인한 위험을 제거할 수 있습니다.
분기 기술을 사용하여 브라우저 간의 차이점을 캡슐화합니다.
코드를 더욱 통합적으로 구성할 수 있어 읽고 유지하기가 더 쉽습니다.


모노머의 기본 구조(올바른 표기):

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

/*Basic Singleton*/
var Singleton = ｛
attribute1: true,
attribute2:10,
method1:function( ){}
코드 복사


코드는 다음과 같습니다.

var box = {
width:0, height:0 ,

getArea:function(){ return this.width*this.height; //js의 객체에 대한 액세스는 명시적이어야 합니다. 즉, 생략할 수 없습니다. }, init: function(w,h){ // width = w; // height = h; 이 방법은 두 개의 전역 변수를 정의하는 것과 같습니다(var 없이 선언된 변수는 전역 변수입니다) // 객체 너비와 높이 할당이 아님

//다음이 맞습니다.

this.width = w;
this.height = h;
}//box는 네임스페이스를 나눕니다. 네임스페이스 내 변수는 공간


위 모노머의 모든 멤버와 메소드는 공용입니다. 즉, 모노머 외부에서 임의로 변경될 수 있다고 합니다. 싱글톤은 네임스페이스를 제공합니까?


계속하세요:





코드 복사

코드는 다음과 같습니다.


var box = { width:0, height:0,//단일 변수
getArea:function(){

return width*height;//width in , height는 실제로 단일 변수가 아니라 init } init:function(w,h){ width = w;height = h; }//init의 너비와 높이는 실제로 단일 변수가 아닙니다. window.onload = function(){ var init = box.getArea()

alert(init ); }

init의 너비와 높이가 초기화되지 않았기 때문에 오류가 발생합니다.




코드를 복사하세요.


코드는 다음과 같습니다:


var box = {
width:0,
height:0,
getArea:function() {

return width*height
},
init:function(w,h){

width = w; height = h } window.onload = function(){ width = 0; height = 0; //또는 box.init(0,0)

var init = box.getArea();

경고(초기)
}


init과 getArea에서 사용하는 width와 height는 모노머가 소유한 변수가 아니고 전역 변수이기 때문에 영향을 받지 않고 모노머 외부에서 랜덤 호출을 할 수 있다는 것을 알았습니다.

다음과 같이 작성하면 더 명확해집니다.

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

var box = {
width:0,
height:0,
getArea:function(){
return width*height;//js의 객체에 대한 액세스는 다음과 같아야 합니다. 즉, 생략할 수 없습니다
},
init:function(w,h){
width = w
height = h; 여기서 너비, 높이는 실제로 단일 개체가 아닙니다.
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea(); >alert (width);
}


이렇게 작성하면 오류가 보고됩니다. 위의 방법은 전역 변수에 대한 네임스페이스를 설정하지 않으며 전역 변수는 위험을 초래합니다. . 윗글이 맞으니 확인해 보겠습니다.

코드 복사 코드는 다음과 같습니다. var box = {

width:2,

height:2,
getArea:function(){
return this.width*this.height // js의 객체에 대한 액세스는 다음과 같습니다. 필수가 표시됩니다. 즉, 생략할 수 없습니다
},
init:function(w,h){
this.width = w;
this.height = h;
}
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea()
alert(width); 🎜 >}


싱글턴에서 너비와 높이에 대한 네임스페이스를 설정했기 때문에 window.onload의 너비와 높이에 간섭이 없음을 알 수 있습니다.


멤버 속성:

네임스페이스에 대해 논의한 후 단일 변수 및 메소드의 속성을 설정해 보겠습니다. 다른 언어(java, c, c#...)를 공부한 사람이라면 클래스 멤버의 public과 private에 대해 매우 익숙할 것입니다.
자바스크립트에는 그렇게 엄격한 객체지향(oop)이 없지만. , 모방을 수행하기 위해 클로저를 사용하여 패키징할 수 있습니다. 결국 일부 변수를 공개로 설정하는 것은 매우 나쁩니다.



코드 복사

코드는 다음과 같습니다. var Circle = (function( ){ //pravite 멤버! var r = 5;

var pi = 3.1416;//다음에 세미콜론 사용

return{//public 멤버
getArea:function(){
return r*r*pi;//비공개 멤버에 접근할 때는 이것을 추가하지 마세요
}, //뒤에 쉼표를 사용하세요
//r과 pi의 값을 변경하고 싶다면, 공개 함수를 설정해야만 이를 수행할 수 있습니다
init:function(setR){
r = setR
}
}
})()
window.onload = function( ){
circle.r = 0 ;//비공개 멤버에 액세스할 수 없습니다. 이는 서클
alert(circle.getArea()
circle.init(0)에 대한 공개 멤버 r을 만드는 것과 같습니다. );//공용 유틸리티 기능을 사용할 수 있습니다.
alert(circle.getArea());
};



개인 변수와 메서드는 읽기 전용이고, 공용 변수와 메서드는 읽기 및 쓰기가 가능합니다.

액세스:

비공개 멤버의 경우 앞에 수정 없이 직접 액세스할 수 있습니다.
퍼블릭 액세스의 경우 단일 범위 내에서 앞에 "this"를 추가해야 합니다. 단일 범위."(단일 이름.)을 앞에 추가해야 합니다 ㅋㅋㅋ 맛이 좀 있는 것 같아요!
분기 기술을 사용하여 브라우저 간의 차이점을 캡슐화합니다
참고:
a 즉각적인 바인딩을 달성하려면 클로저를 사용해야 합니다.
b 각 분기를 세미콜론으로 구분합니다.
c를 열면 최종적으로 이름이 반환됩니다. 브랜치
d. 호출 시 싱글톤 이름과 함께 브랜치의 메서드 이름을 사용합니다.




코드 복사

코드는 다음과 같습니다.

//단일 분기 기술을 사용하여 클로저를 사용하여 구현해야 하는 XHR(XMLHttpRequest) 개체를 정의합니다.
var XHR = (function(){
//세 가지 분기
var 표준 = {
cXHR:function(){
return new XMLHttpRequest();
}
}
var activeXNew = {
cXHR:function(){
return new ActiveXObject('Msxml2.XMLHttp')
}
};
var activeXOld = {
cXHR:function(){
return new ActiveXObject('Microsoft.XMLHttp' ); 🎜>}
}
//브랜치를 할당하려면 각 메소드를 시도하고 실패하지 않는 모든 항목을 반환하세요.
var testObject
try{
testObject = Standard.cXHR ();
표준 반환;// 오류가 발생하지 않은 경우 이 분기를 반환합니다.
}catch(e){
try{
testObject = activeXNew.cXHR()
return activeXNew;
}catch(e){
try{
testObject = activeXOld.cXHR();
return activeXOld;
}catch(e){
throw new Error( '생성 XMLHttpRequestObject가 실패했습니다!');
}
}
}
})();
window.onload = function(){
alert(XHR.cXHR() ; 저도 초보자라 할말이 부족하고 전문가의 조언도 잊어버리네요.