자바스크립트를 이용해 일반적인 Wizard_javascript 스킬 만들기

1. 인터페이스 디자인
index.html: 마법사 표시 위치에 대한 자리 표시자만 제공

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

style.css: 기본적으로 마법사의 제목은 h2, 메인 콘텐츠는 ul, 버튼바는 div로 구성되어 있습니다. 자유롭게 꾸며보세요.

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

margin:0;

}
/*마법사 컨테이너*/
#wizard{
높이:400px;
너비:600px
배경색:#999; /*wizard 주요 내용이 목록으로 표시됩니다*/
#wizard ul{
margin:10px;
height:80%
}
/*목록 내용을 가로로 표시합니다*/
# 마법사 li{
display:inline-block;
cursor:pointer;
}
/*목록 제목*/
#wizard h2{
margin:10px;
}
/*뒤로 버튼 등의 기능 표시줄*/
#wizard .bar{
margin:10px
clear:both;
}


2. 각 단계 준비

각 단계는 콘텐츠 표시, 사용자 선택 캡처, 제목 제공으로 나눌 수 있습니다. 우리는 각 단계를 고유하게 만듭니다. 귀하는 자신의 업무에 대한 책임이 있지만 당사가 규정한 일부 계약을 준수해야 합니다.

각 단계는 함수로 표현됩니다. 첫 번째 매개변수인 data_key는 이 단계의 데이터를 선택하는 키워드로 일반적으로 다음 단계의 데이터를 표시하기 위해 이전 단계의 결과를 결정하는 데 사용됩니다. 두 번째 매개변수 result_callback 이 단계에서 결과를 얻었을 때 호출되는 콜백 함수로, 마법사 클래스는 이전 단계의 결과를 얻은 후 결과를 저장하고 다음으로 점프합니다. 다음 단계.

이 함수는 튜플을 반환하며 첫 번째 요소는 이 단계의 제목이고 두 번째 요소는 이 단계의 주요 부분에 대한 UI입니다.

우리의 예는 선물 추천 시스템으로, 3단계로 나누어져 있는데, 첫 번째 단계는 선물 받는 사람을 선택하는 것이고 두 번째 단계는 첫 번째 단계의 선택 결과에 영향을 미칩니다. 두 번째 단계의 표시입니다. 다음은 작업을 단순화하기 위해 그리기 인터페이스와 이벤트 캡처를 구현한 것입니다.




코드 복사

코드는 다음과 같습니다. function step1(data_key, result_callback){ var target = ['여자친구','남자친구','아버지','엄마','아이'] var warpper = $('

') $ .each(targets, function(k,v){

$('

' v '

').click(function(){result_callback(v)}).appendTo(warpper ) ;

});
return ['1단계: 선물을 받을 사람을 선택하세요',warpper]
}
function step2(data_key, result_callback){
var tagged = {
'여자친구': ['창의적', '귀엽다', '낭만적', '열정', '실용적', '디지털',
'자체제작', '인형장난감', '옷' , '가방'],
'남자친구':['남성용품', '따뜻함', '실용성', '디지털', '크리에이티브', '의류'],
'아버지':[' 남성 제품','건강','식물','의류'],
'엄마':['따뜻함','건강','창의적','피부관리','실용적'],
' 어린이' :['장난감','학용품','실용','디지털']
}
var warpper = $('

')
$ .each(tags[data_key], function(k,v){
$('

' v '

').click(function(){result_callback(v)}).appendTo (워퍼);
});
return ['2단계: 키워드를 선택하세요',워퍼]
}
function step3(data_key, result_callback){
var Price_level = [ '저렴함', '보통', '약간 비싸다', '비싸다']
var Wrapper = $('

')
$.each(price_level, function (k ,v){
$('

' v '

').click(function(){result_callback(v)}).appendTo(warpper)})
return ['3단계: 가격대를 선택하세요',워퍼
}


3. 마법사 클래스 구현

마법사 클래스는 마법사가 위치한 DOM 요소, 실행할 단계 목록, 마법사 완료 후 실행할 콜백 등을 설정해야 합니다. 마법사는 이전 단계와 다음 단계에 대한 메서드도 제공해야 합니다. 따라서 마법사를 나타내는 클래스를 사용하고 생성자에 DOM 컨테이너, 단계 목록 및 콜백 함수를 전달하고 프로토타입을 사용하여 클래스에 세 가지 메서드를 추가합니다. . Render는 이 단계의 수집된 결과에 대한 콜백에서 특정 단계의 UI를 제시하고 다음 단계로 푸시하는 데 사용됩니다. 이 단계가 마지막 단계인 경우 마법사 실행 완료에 대한 콜백 함수가 호출됩니다.

다른 두 개의 next 및 back 함수는 각각 이전 단계와 다음 단계를 실행하는 것입니다. 이 두 함수는 index의 전용 변수를 사용하여 전체 마법사의 상태를 유지합니다

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

함수 마법사(컨테이너, 단계, 콜백){
this.container = 컨테이너; //마법사 컨테이너
this.steps = steps; //마법사 단계
this.callback = callback; //마법사 실행 후 콜백
this.collect_data = []; 마법사 각 단계의 결과
this.index = -1; //현재 실행 중인 단계
}
//특정 단계 그리기
Wizard.prototype.render = function(step, this_result){
var me = this;//이 단계를 실행하고 이 단계의 UI를 가져옵니다.
var to_append = step(this_result,function(result){
me.collect_data.push( result); //이 단계를 수집합니다. Result
//마법사가 완료되면 콜백 함수가 호출되고, 그렇지 않으면 다음 단계가 실행됩니다.
if(me.collect_data.length == me.steps.length)
me.callback(me.collect_data);
else
me.next(result)
})
//이 단계의 UI 그리기
();
this.container.append("< ;h2>" to_append[0] "")
this.container.append(to_append[1])
if (this.index > 0){
// 뒤로 버튼
this.container.append($("

뒤로

")
.click(function(){me.back()}
));
}
}
//다음 실행 step
Wizard.prototype.next = function(this_result) {
if(this.index >= this.steps.length -1)
return
var step = this.steps[ this .index];
this.render(step,this_result );
}
//이전 단계로 돌아가기
Wizard.prototype.back = function(){
if(this .index <= 0)
return;
var step = this.steps[--this.index]
//이전 단계로 돌아가지만 이전 단계의 데이터가 필요합니다. 이전 단계의 결과에 따라 결정
this.collect_data = this.collect_data.slice( 0, this.index)
this.render(step, this.collect_data[this.index - 1]) ;
}

4. 요약

이 마법사는 간단한 구조를 가지며 JavaScript의 기능적 프로그래밍 기능과 객체 지향 기능을 결합합니다. JavaScript의 강력함과 편리함.

마법사 클래스의 인터페이스 그리기 부분과 단계 함수의 인터페이스 그리기 부분 사이에는 여전히 약간의 결합이 있습니다. 계속 리팩토링하면 모든 인터페이스 그리기 부분을 함께 추상화하여 인터페이스를 더 많이 변경할 수 있습니다. 편리한.