前段时间查看了extjs的源代码,大概就看了20多分钟,我看了个大概,曾经推测Extjs动态创建组件其实也是使用了标签模板,如今看过源码之后证实了我的猜测,extjs拥有自己的一套模块加载器,所以能够自由的编写自定义组件等更多强大的功能。
现在我也想仿写一套extjs这么强大工具,那么我就需要考虑组件模块化的问题,其次就是模板的编写,样式的自由扩展和模块的自由定义等,不过还好,js这么强大的语言周边的工具总是很多,模块化的组件例如requireJS和seaJS都是非常不错的选择,seaJS是国人写的,参考文档过于简陋,因此我暂时不采用seaJS编写模块化的组件,废话不多说了,我写了一个模板标签替换的方法,其本质是使用正则表达式进行替换,代码写的不好,也希望高手帮忙支出问题,方便我的修正。
/** * @Author Dike.Li * @Date 2015/7/30 * @Description Template Label Replace */ define(function (require, exports, module) { /** * 要求模板中的{id}标签与option中的属性{id:123}一致 * @param temp 模板 * @param option 属性设置 * @returns {*} * @constructor */ var Template = function (temp, option) { /** * 将模板中{xxx}内容标签找出的正则表达式 * @type {RegExp} */ var regExp = new RegExp(‘\\{[^\\{\\}]+\\}‘, ‘\g‘); /** *将单个{XXX}标签过滤为XXX内容 * @type {RegExp} */ var regStr = new RegExp(‘[^\\{\\}]+‘, ‘\g‘); var regExpArr = temp.match(regExp); for (var id in regExpArr) { var label = regExpArr[id]; var name = label.match(regStr); temp = temp.replace(label, option[name]); } Template.prototype.getTemp = function () { return temp; }; }; module.exports = Template; });
调用代码如下:
var template = require(‘Template‘); var temp = ‘<input id="{id}" name="{name}" tag="{tag}"/>‘; var option = { id:‘tempID‘, name:‘tempName‘, tag:‘tagT‘ }; var template = new template(temp,option); console.log(template.getTemp());
注:如要要正常的运行此代码,需要配置RequireJS的环境
时间: 2024-10-13 16:37:52