最后从我之前的工作经验来说，除了有上传图片进行预览这样的功能，我曾经还做过上传视频，上传音频，上传普通文档等类似的，所以这一次碰到这个功能的时候我就觉得应该把这些功能里面相似的东西抽取出来，作为一个基类，图片上传，视频上传等分别继承这个基类去实现各自的逻辑。这个基类还有一个好处，就是能够让那些通用的逻辑完全与HTML结构分离，在这个基类里面只做一些通用的事情，比如options与组件行为（render, append, delItem）的定义，以及通用事件的监听和触发，它只要留有固定的接口留给子类来实现即可。在后面的实现中，我定义了一个FileUploadBaseView组件来完成这个基类的功能，这个基类不包含任何html或css处理的逻辑，它只是抽象了我们要完成的功能，不处理任何业务逻辑。根据业务逻辑实现的子类会受html结构的限制，所以子类的适用范围小；而基类因为做到了与html结构完全分离，所以有更大的适用范围。
3. 实现细节
从第2部分的实现思路，要实现的类有：FileUploadBaseView和ImageUploadView，前者是后者的基类。同时考虑到要给组件提供事件管理的功能，所以要用到上一篇博客的eventBase.js，FileUploadBaseView得继承该库的EventBase组件；考虑到要有类的定义和继承，还要用到之前写的继承库class.js来定义组件以及组件的继承关系。相关组件的继承关系为：ImageUploadView extend FileUploadBaseView extend EventBase。
（注：以下相关代码中模块化用的是seajs。）
FileUploadBaseView所做的事情有：
1）定义通用的option以及通用的事件管理
在该组件的DEFAULTS配置中可以看到所有的通用option和通用事件的定义：
var DEFAULTS = { data: [], //要展示的数据列表，列表元素必须是object类型的，如[{url: 'xxx.png'},{url: 'yyyy.png'}] sizeLimit: 0, //用来限制BaseView中的展示的元素个数，为0表示不限制 readonly: false, //用来控制BaseView中的元素是否允许增加和删除 onBeforeRender: $.noop, //对应render.before事件，在render方法调用前触发 onRender: $.noop, //对应render.after事件，在render方法调用后触发 onBeforeAppend: $.noop, //对应append.before事件，在append方法调用前触发 onAppend: $.noop, //对应append.after事件，在append方法调用后触发 onBeforeDelItem: $.noop, //对应delItem.before事件，在delItem方法调用前触发 onDelItem: $.noop //对应delItem.after事件，在delItem方法调用后触发 };
在该组件的init方法中可以看到对通用option和事件管理的初始化逻辑：
init: function (element, options) { //通过this.base调用父类EventBase的init方法 this.base(element); //实例属性 var opts = this.options = this.getOptions(options); this.data = resolveData(opts.data); delete opts.data; this.sizeLimit = opts.sizeLimit; this.readOnly = opts.readOnly; //绑定事件 this.on('render.before', $.proxy(opts.onBeforeRender, this)); this.on('render.after', $.proxy(opts.onRender, this)); this.on('append.before', $.proxy(opts.onBeforeAppend, this)); this.on('append.after', $.proxy(opts.onAppend, this)); this.on('delItem.before', $.proxy(opts.onBeforeDelItem, this)); this.on('delItem.after', $.proxy(opts.onDelItem, this)); },
2）定义组件的行为，预留可供子类实现的接口：
render: function () { /** * render是一个模板，子类不需要重写render方法，只需要重写_render方法 * 当调用子类的render方法时调用的是父类的render方法 * 但是执行到_render方法时，调用的是子类的_render方法 * 这样就能把before跟after事件的触发操作统一起来 */ var e; this.trigger(e = $.Event('render.before')); if (e.isDefaultPrevented()) return; this._render(); this.trigger($.Event('render.after')); }, //子类需实现_Render方法 _render: function () { }, append: function (item) { var e; if (!item) return; item = resolveDataItem(item); this.trigger(e = $.Event('append.before'), item); if (e.isDefaultPrevented()) return; this.data.push(item); this._append(item); this.trigger($.Event('append.after'), item); }, //子类需实现_append方法 _append: function (data) { }, delItem: function (uuid) { var e, item = this.getDataItem(uuid); if (!item) return; this.trigger(e = $.Event('delItem.before'), item); if (e.isDefaultPrevented()) return; this.data.splice(this.getDataItemIndex(uuid), 1); this._delItem(item); this.trigger($.Event('delItem.after'), item); }, //子类需实现_delItem方法 _delItem: function (data) { }