从前面的部分也差不多能看出来了，这个级联组件如果按职责划分，可以分成两个核心的组件，一个负责整体功能和内部级联项的管理（CascadeView），另一个负责级联项的功能实现（CascadeItem）。另外为了更方便地实现级联的逻辑，我们只需要把所有的级联项通过链表连起来，通过发布-订阅模式，后一个级联项订阅前一个级联项发生改变的消息；当前面的级联项发生改变的时候，发布消息，通知后面的级联项去处理相关逻辑；通过链表的作用，这个消息可能可以一直传递到最后一个级联项为止。用图来描述的话，大致就是这个样子：
我们需要做的就是控制好消息的发布跟传递。
4）表单提交
为了能够方便地将级联组件的值提交到后台，可以把整个级联组件当成一个整体，对外提供一个onChanged事件，外部可通过这个事件获取所有级联项的值。由于存在多个级联项，所以在发布onChanged这个事件时，只能在任意级联项发生改变的时候，都去触发这个事件。
5）ajax缓存
在这个组件里面得考虑两个层级的ajax缓存，第一个是组件这一层级的，比如我把第一个级联项切换到了北京，这个时候第二个级联项就把北京的数据加载出来了，然后我把第一个级联项从北京切换到河北再切换到北京，这个时候第二个级联项要显示的还是北京的关联数据列表，如果我们在第一次加载这个列表的时候就把它的数据缓存下来了，那么这次就不用发起ajax请求了；第二个是ajax请求这一层级的，假如页面上有多个级联组件，我先把第一个级联组件的第一个级联项切换到北京，浏览器发起一个ajax请求加载数据，当我再把第二个级联组件的第一个级联项切换到北京的时候，浏览器还会再发一个请求去加载数据，如果我把第一个组件第一次ajax请求的返回的数据，先缓存起来，当第二个组件，用同样的参数请求同样的接口时，直接拿之前缓存觉得结果返回，这样也能减少一次ajax请求。第二个层级的ajax缓存依赖上文《对jquery的ajax进行二次封装以及ajax缓存代理组件：AjaxCache》，对于组件来说，它内部只实现了第一个层级的缓存，但是它不用考虑第二个层级的缓存，因为第二个层级的缓存实现对它来说是透明的，它不知道它用到的ajax组件有缓存的功能。
3. 实现细节
最终的实现包含了三个组件，CascadeView、CascadeItem、CascadePublicDefaults，前面两个是组件的核心，最后一个只是用来定义一些option，它的作用在CascadeItem的注释里面有详细的描述。另外在下面的代码中有非常详细的注释解释了一些关键代码的作用，结合着前面的需求来看代码，应该还是比较容易理解的。我以前倾向于用文字来解释一些实现细节，后来我慢慢觉得这种方式有点费力不讨好，第一是细节层面的语言不好组织，有的时候言不达意，明明想把一件事情解释清楚，结果反而弄得更加迷糊，至少我自己看自己写的东西就会这样的感触；第二是本身开发人员都具有阅读源码的能力，而且大部分积极的开发人员都愿意通过琢磨别人的代码来理解实现思路；所以我改用注释的方式来说明实现细节：）
CascadePublicDefaults:
define(function () { return { url: '',//数据查询接口 textField: 'text', //返回的数据中要在<option>元素内显示的字段名称 valueField: 'text', //返回的数据中要设置在<option>元素的value上的字段名称 paramField: 'id', //当调用数据查询接口时，要传递给后台的数据对应的字段名称 paramName: 'parentId', //当调用数据查询接口时，跟在url后面传递数据的参数名 defaultParam: '', //当查询第一个级联项时，传递给后台的值，一般是0，''，或者-1等，表示要查询第上层的数据 keepFirstOption: true, //是否保留第一个option（用作输入提示，如：请选择省份），如果为true，在重新加载级联项时，不会清除默认的第一个option resolveAjax: function (res) { return res; }//因为级联项在加载数据的时候会发异步请求，这个回调用来解析异步请求返回的响应 } });
CascadeView：
define(function (require, exports, module) { var $ = require('jquery'); var Class = require('mod/class'); var EventBase = require('mod/eventBase'); var PublicDefaults = require('mod/cascadePublicDefaults'); var CascadeItem = require('mod/cascadeItem'); /** * PublicDefaults的作用见CascadeItem组件内的注释 */ var DEFAULTS = $.extend({}, PublicDefaults, { $elements: undefined, //级联项jq对象的数组，元素在数据中的顺序代表级联的先后顺序 valueSeparator: ',', //获取所有级联项的值时使用的分隔符，如果是英文逗号，返回的值形如 北京市,区,朝阳区 values: '', //用valueSeparator分隔的字符串，表示初始时各个select的值 onChanged: $.noop //当任意级联项的值发生改变的时候会触发这个事件 }); var CascadeView = Class({ instanceMembers: { init: function (options) { //通过this.base调用父类EventBase的init方法 this.base(); var opts = this.options = this.getOptions(options), items = this.items = [], that = this, $elements = opts.$elements, values = opts.values.split(opts.valueSeparator); this.on('changed.cascadeView', $.proxy(opts.onChanged, this)); $elements && $elements.each(function (i) { var $el = $(this); //实例化CascadeItem组件，并把每个实例的prevItem属性指向前一个实例 //第一个prevItem属性设置为undefined var cascadeItem = new CascadeItem($el, $.extend(that.getItemOptions(), { prevItem: i == 0 ? undefined : items[i - 1], value: $.trim(values[i]) })); items.push(cascadeItem); //每个级联项实例发生改变都会触发CascadeView组件的changed事件 //外部可在这个回调内处理业务逻辑 //比如将所有级联项的值设置到一个隐藏域里面，用于表单提交 cascadeItem.on('changed.cascadeItem', function () { that.trigger('changed.cascadeView', that.getValue()); }); }); //初始化完成自动加载第一个级联项 items.length && items[0].load(); }, getOptions: function (options) { return $.extend({}, this.getDefaults(), options); }, getDefaults: function () { return DEFAULTS; }, getItemOptions: function () { var opts = {}, _options = this.options; for (var i in PublicDefaults) { if (PublicDefaults.hasOwnProperty(i) && i in _options) { opts[i] = _options[i]; } } return opts; }, //获取所有级联项的值，是一个用valueSeparator分隔的字符串 //为空的级联项的值不会返回 getValue: function () { var value = []; this.items.forEach(function (item) { var val = $.trim(item.getValue()); val != '' && value.push(val); }); return value.join(this.options.valueSeparator); } }, extend: EventBase }); return CascadeView; });
CascadeItem: