简单模板模式(Simple template):通过格式化字符串拼凑出视图避免创建视图时大量节点操作。优化内存开销。
一个一个创建DOM元素插入视图会带来极大的内存消耗,创建模板后,用数据去格式化字符串来渲染视图并插入到容器里,性能提升许多。
模板生成器
A.view = function(name){ var v = { code : '<pre><code>{#code#}</code></pre>', img : '<img src="{#src#}" alt="{#alt#}" title="{#title#}" />', part : '<div id="{#id#}" class="{#class#}">{#part#}</div>', theme : [ '<div>', '<h1>{#title#}</h1>', '{#content#}', '</div>' ].join('') } if(Object.prototype.toString.call(name) === "[object Array]"){ //模板缓存器 var tpl = ''; for(var i=0;i<name.length;i++){ tpl += arguments.callee(name[i]); } return tpl; }else{ //如果模板库中有该模板就返回,否则返回简易模板 return v[name] ? v[name] : ('<'+name+'>{#'+name+'#}<'+name='>'); } }
简单模板模式使得创建视图更加高效,用正则匹配方式去格式化字符串的执行性能要远高于DOM操作拼接使徒的执行性能,这种方式常用于大型框架(MVC)创建视图操作中,主要操作包含三部分:字符串模板库,格式化方法,字符串拼接。