关于js模板技术，使用requireJS定义模块（一）

标签：

前段时间查看了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的环境 

关于js模板技术，使用requireJS定义模块（一）

标签：

原文地址：http://my.oschina.net/u/2349331/blog/485675