父类中定义一组操作算法骨架,而将一些实现步骤延迟到子类,使得子类可以不改变父类算法结构的同时可重新定义算法中某些实现步骤。
// 格式化字符串方法 function formateString(str, data) { return str.replace(/{#(w+)#}/g, function(match, key) { return typeof data[key] === undefined ? '': data[key] }); } // 基础导航 var Nav = function(data) { // 基础导航样式模板 this.item = '<a href="{#href#}" title="{#title#}">{#name#}</a>'; // 创建字符串 this.html = ''; // 格式化数据 for(var i = 0, len = data.length; i < len; i++) { this.html += formateString(this.item, data[i]); } // 返回字符串数据 return this.html; }
对于消息提醒导航类,只需额外添加消息提醒组件模板,并与消息提醒组件模板对传入的网址数据进行装饰,得到所需的字符串,再调用从基类继承的方法处理这些字符串即可。
var NumNav = function(data) { // 消息提醒信息组件模板 var tpl = '<b>{#num#}</b>'; // 装饰数据 for(var i = data.length - 1; i >= 0; i--) { data[i].name += data[i].name + formateString(tpl, data[i]); } // 继承基础导航类 return Nav.call(this, data); }
模板模式的核心在于对方法的重用,将核心方法封装在基类中,让子类继承基类的方法,实现基类方法的共享,达到方法共用。子类继承的方法是可扩展的,这就需要对基类继承的方法进行重写。