JavaScript 实现通用向导组件：从界面到逻辑的完整指南

界面设计与HTML结构

1、界面设计

index.html仅包含一个用于显示向导的占位符

 
<html>
<head>
<title>礼物推荐向导</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js" type="text/javascript"></script>
<script src="wizard.js" type="text/javascript"></script>
</head>
<body>
<div id="wizard"></div>
</body>
</html>

style.css定义了向导的默认样式，包括h2标题、ul主体内容和div按钮条，实际应用中可自由美化。

 
body{
margin:0;
} 
/*向导容器*/
#wizard{
height:400px;
width:600px;
background-color:#999;
} 
/*向导的主体内容，用列表展示*/
#wizard ul{
margin:10px;
height:80%;
} 
/*横向显示列表内容*/
#wizard li{
display:inline-block;
margin:10px;
cursor:pointer;
} 
/*列表的标题*/
#wizard h2{
margin:10px;
} 
/*列表的功能条，如返回按钮*/
#wizard .bar{
margin:10px;
clear:both;
} 

步骤函数设计与数据契约

2、准备每一步骤

向导由多个步骤组成，每个步骤负责展示内容、捕获用户选择并提供标题，需遵循规定的契约。

每个步骤由一个函数表示，第一个参数data_key用于根据上一步结果确定当前步骤数据，第二个参数result_callback是获取结果时的回调函数，用于与向导类通信以存储结果并跳转。

该函数返回一个二元组，第一个元素是步骤标题，第二个元素是主体UI。

示例为礼物推荐系统，共三步：选择送礼对象、选择关键字（受第一步结果影响）、选择价格区间。界面绘制和事件处理使用jQuery简化。

 
function step1(data_key, result_callback){
var targets = ['女朋友','男朋友','父亲','妈妈','孩子'];
var warpper = $('<ul></ul>')
$.each(targets, function(k,v){
$('<li>'+v+'</li>').click(function(){result_callback(v)}).appendTo(warpper);
}); 
return ['第一步:请选择送礼物的对象',warpper];
} 
function step2(data_key, result_callback){
var tags = {
'女朋友':['创意','可爱','浪漫','激情','实用','数码',
'自制','毛绒玩具','衣服','包包'],
'男朋友':['男士用品','温馨','实用','数码','创意','衣物'],
'父亲' :['男士用品','健康','植物','衣物'],
'妈妈' :['温馨','健康','创意','护肤品','实用'],
'孩子' :['玩具','学习用品','实用','数码']
}; 
var warpper = $('<ul></ul>')
$.each(tags[data_key], function(k,v){
$('<li>'+v+'</li>').click(function(){result_callback(v)}).appendTo(warpper);
}); 
return ['第二步:请选择关键词',warpper];
} 
function step3(data_key, result_callback){
var price_level = ['便宜','普通','稍贵','贵重'];
var warpper = $('<ul></ul>')
$.each(price_level, function(k,v){
$('<li>'+v+'</li>').click(function(){result_callback(v)}).appendTo(warpper);
}); 
return ['第三步:请选择价格区间',warpper];
} 

向导类核心逻辑实现

3、向导类的实现

向导类需设置DOM容器、步骤列表和完成回调，并提供上一步和下一步方法。构造函数接收容器、步骤列表和回调，通过prototype添加render、next和back三个方法。render用于呈现UI并收集结果以推进下一步，若为最后一步则调用完成回调。

next和back函数分别执行下一步和上一步，利用index私有变量维持向导状态。

 
function Wizard(container, steps, callback){
this.container = 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); //收集本步骤结果
//向导执行完毕时调用回调函数，否则执行下一步
if(me.collect_data.length == me.steps.length)
me.callback(me.collect_data);
else
me.next(result);
}); 
//绘制本步骤的UI
this.container.empty();
this.container.append("<h2>"+to_append[0]+"</h2>");
this.container.append(to_append[1]);
if(this.index > 0){
//后退按钮
this.container.append($("<div class='bar'><a href='javascript:;'>后退</a></div>")
.click(function(){me.back()}
)); 
} 
} 
//执行下一步
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函数式编程和面向对象特性，体现了其强大与便利。

wizard类与步骤函数的界面绘制部分存在耦合，进一步重构可将所有界面绘制部分抽象整合，以便更便捷地修改界面。