js 조합 모드
17759 단어 디자인 모드
더 강 한 매크로 명령
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<button id="button"> button>
<script>
var MacroCommand = function(){
return {
commandsList: [],
add: function( command ){
this.commandsList.push( command );
},
execute: function(){
for ( var i = 0, command; command = this.commandsList[ i++ ]; ){
command.execute();
}
}
}
};
var openAcCommand = {
execute: function(){
console.log( ' ' );
}
};
/********** ，
*********/
var openTvCommand = {
execute: function(){
console.log( ' ' );
}
};
var openSoundCommand = {
execute: function(){
console.log( ' ' );
}
};
var macroCommand1 = MacroCommand();
macroCommand1.add( openTvCommand );
macroCommand1.add( openSoundCommand );
/********* 、 QQ ****************/
var closeDoorCommand = {
execute: function(){
console.log( ' ' );
}
};
var openPcCommand = {
execute: function(){
console.log( ' ' );
}
};
var openQQCommand = {
execute: function(){
console.log( ' QQ' );
}
};
var macroCommand2 = MacroCommand();
macroCommand2.add( closeDoorCommand );
macroCommand2.add( openPcCommand );
macroCommand2.add( openQQCommand );
/********* “ ”**********/
var macroCommand = MacroCommand();
macroCommand.add( openAcCommand );
macroCommand.add( macroCommand1 );
macroCommand.add( macroCommand2 );
/********* “ ”**********/
var setCommand = (function( command ){
document.getElementById( 'button' ).onclick = function(){
command.execute();
}
})( macroCommand );
script>
body>
html>이 예 에서 볼 수 있 듯 이 기본 적 인 대상 은 더욱 복잡 한 조합 대상 으로 조합 되 고 조합 대상 은 조합 되 어 계속 돌아 갈 수 있다. 이 나무의 구 조 는 임 의적 으로 많은 복잡 도 를 지원 할 수 있다.나무 가 최종 적 으로 구 조 된 후에 나무 전 체 를 최종 적 으로 작 동 시 키 는 절 차 는 매우 간단 하 며 최상 위 대상 의 execute 방법 만 사용 해 야 한다.최상 위 대상 에 게 한 번 씩 요청 할 때마다 실제 적 으로 트 리 전체 에 대해 깊이 있 는 검색 을 하고 있 으 며, 조합 대상 을 만 드 는 프로그래머 는 이러한 내 적 디 테 일 에 관심 이 없 으 며, 이 트 리 에 새로운 노드 대상 을 추가 하 는 것 은 매우 쉬 운 일이 다.
조합 모드 의 예 - 폴 더 스 캔
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<button id="button"> button>
<script>
/******************************* Folder ******************************/
var Folder = function( name ){
this.name = name;
this.files = [];
};
Folder.prototype.add = function( file ){
this.files.push( file );
};
Folder.prototype.scan = function(){
console.log( ' : ' + this.name );
for ( var i = 0, file, files = this.files; file = files[ i++ ]; ){
file.scan();
}
};
/******************************* File ******************************/
var File = function( name ){
this.name = name;
};
File.prototype.add = function(){
throw new Error( ' ' );
};
File.prototype.scan = function(){
console.log( ' : ' + this.name );
};
var folder = new Folder( ' ' );
var folder1 = new Folder( 'JavaScript' );
var folder2 = new Folder ( 'jQuery' );
var file1 = new File( 'JavaScript ' );
var file2 = new File( ' jQuery' );
var file3 = new File( ' ' )
folder1.add( file1 );
folder2.add( file2 );
folder.add( folder1 );
folder.add( folder2 );
folder.add( file3 );
folder.scan();
script>
body>
html>주의 할 점
이전 예 에서 조합 대상 은 아래 의 하위 노드 의 인용 을 저장 했다. 이것 은 조합 모델 의 특징 이다. 이때 나무 구 조 는 위 에서 아래로 이다.그러나 가끔 우 리 는 서브 노드 에서 부모 노드 에 대한 인용 을 유지 해 야 한다. 예 를 들 어 조합 모델 에서 직책 체인 을 사용 할 때 서브 노드 에서 부모 노드 에 거품 을 일 으 켜 전달 해 야 할 수도 있다.그리고 우리 가 어떤 파일 을 삭제 할 때 실제로 이 파일 이 있 는 상위 폴 더 에서 이 파일 을 삭제 합 니 다.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
var Folder = function( name ){
this.name = name;
this.parent = null; // this.parent
this.files = [];
};
Folder.prototype.add = function( file ){
file.parent = this; //
this.files.push( file );
};
Folder.prototype.scan = function(){
console.log( ' : ' + this.name );
for ( var i = 0, file, files = this.files; file = files[ i++ ]; ){
file.scan();
}
};
Folder.prototype.remove = function(){
if ( !this.parent ){ //
return;
}
for ( var files = this.parent.files, l = files.length - 1; l >=0; l-- ){
var file = files[ l ];
if ( file === this ){
files.splice( l, 1 );
}
}
};
var File = function( name ){
this.name = name;
this.parent = null;
};
File.prototype.add = function(){
throw new Error( ' ' );
};
File.prototype.scan = function(){
console.log( ' : ' + this.name );
};
File.prototype.remove = function(){
if ( !this.parent ){ //
return;
}
for ( var files = this.parent.files, l = files.length - 1; l >=0; l-- ){
var file = files[ l ];
if ( file === this ){
files.splice( l, 1 );
}
}
};
var folder = new Folder( ' ' );
var folder1 = new Folder( 'JavaScript' );
var file1 = new Folder ( ' Node.js' );
folder1.add( new File( 'JavaScript ' ) );
folder.add( folder1 );
folder.add( file1 );
file1.remove();
folder1.remove(); //
folder.scan();
script>
body>
html>조합 모드 를 언제 사용 합 니까?
조합 모델 을 적절하게 운용 하면 고객 의 코드 를 크게 간소화 할 수 있다.일반적으로 조합 모델 은 다음 과 같은 두 가지 상황 에 적용 된다.전체 차원 구조.조합 모델 은 한 그루 의 나 무 를 편리 하 게 구성 하여 대상 의 부분 인 61485 ℃ 의 전체적인 구 조 를 나 타 낼 수 있다.특히 우리 가 개발 하 는 동안 이 나무 가 얼마나 층 이 있 는 지 확실 하지 않 을 때.나무의 구조 가 최종 적 으로 완 성 된 후에 나무의 맨 윗 층 대상 을 요청 하면 나무 전 체 를 통일 적 으로 조작 할 수 있다.조합 모드 에서 트 리 의 노드 를 추가 하고 삭제 하 는 것 이 매우 편리 하 며 개방 * 61485 ° 폐쇄 원칙 에 부합 합 니 다.
『 61553 』 고객 은 나무의 모든 대상 을 통일 적 으로 대하 기 를 원한 다.조합 모델 은 고객 으로 하여 금 조합 대상 과 잎 대상 의 차 이 를 무시 할 수 있 게 한다. 고객 이 이 나 무 를 직면 할 때 현재 처리 하고 있 는 대상 이 조합 대상 인지 잎 대상 인지 에 관심 을 가지 지 않 아 도 된다. 또한 if, else 문 구 를 써 서 각각 처리 하지 않 아 도 된다.조합 대상 과 잎 대상 은 각자 옳 은 일 을 하 는 것 이 조합 모델 의 가장 중요 한 능력 이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
디자인 모델 의 공장 모델, 단일 모델자바 는 23 가지 디자인 모델 (프로 그래 밍 사상/프로 그래 밍 방식) 이 있 습 니 다. 공장 모드 하나의 공장 류 를 만들어 같은 인 터 페 이 스 를 실현 한 일부 종 류 를 인 스 턴 스 로 만 드 는 것...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
