关于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的环境

时间: 2024-10-13 16:37:52

关于js模板技术,使用requireJS定义模块(一)的相关文章

[DikeJS]关于js模板技术,使用requireJS定义模块(四)

前几次对模板技术进行了分析和编写,发现不是很合理,现在发上新的改良代码: /**  * @Author Dike.Li  * @Date 2015/7/30  * @class Template  * @public  * @Description Template Label Replace  */ define(function (require) {     /**      * 提取模板中 XXX='{XXX}' || XXX="{XXX}"      * @type {Reg

requirejs 定义模块中含有prototype

因为我对requirejs不熟悉,不清楚如何定义带有prototype的模块, 在看了:https://gist.github.com/jonnyreeves/2474026 的demo之后,就明白了,呦西. person.js的注释中提到requireJS simply requires us to return  a single value (function / Object) which represents this definition. In our case, we will

[DikeJS]关于js模板技术,使用requireJS定义模块(七)

最近由于需求改变,我又改写了Template模板方法,此次的改动增加了XXX:{XXX}的标签替换和独立的{XXX}替换,执行顺序为XXX={XXX} -> XXX:{XXX} -> {XXX},代码如下: /**  * @Author Dike.Li  * @Date 2015/8/14  * @class Template  * @public  * @Description Template Label Replace  */ define(function (require) {   

关于js模板技术,使用requireJS定义模块(二)

昨天编写了第一版的模板标签替换代码,发现有很多不足的地方,不足内容如下: 1:正则无法匹配模板中存在的空格问题 2:无法删除属性项中不存在的标签 根据昨天的不足,经过修正后,新的模板替换方法如下: /**  * @Author Dike.Li  * @Date 2015/7/30  * @Description Template Label Replace  */ define(function (require, exports, module) {     /**      * 要求模板中的

Requirejs定义模块

模块可以很好的定义作用域来避免全局名称空间污染,它可以显示的定义出函数间的依赖关系,而不需要引用全局变量. RequireJS可以加载多个不同的模块,虽然加载的顺序不一样,但是能保证依赖的顺序是正确的. 1.  当模块中只有键值对时,可通过如下方式定义. define({     name : "beautiful",     color: "yellow",     size: "3M"}); 2. 当模块中没有依赖,只有函数时,模块的格式如下

JS之模板技术(aui / artTemplate)

artTemplate是个好东西啊,一个开源的js前端模板引擎,使用简单,渲染效率特别的高. 我经常使用这个技术来在前端动态生成新闻列表,排行榜,历史记录等需要在前端列表显示的信息. 下面是artTemplate的下载链接: https://github.com/aui/artTemplate 因为artTemplate比较简单,容易上手,项目的例子,文档又比较齐全,大家有需要可以直接参考官方文档,例子进行深入了解, 我这里就这是用简单常用的,用于快速上手的一个例子吧! 先说明,我是下载artT

收藏文章 写的很好 可惜有些还是看看不懂额。。。RequireJS进阶:模块的定义与加载

文 RequireJS进阶:模块的定义与加载 javascript requirejs 两仪 2014年12月01日发布 推荐 4 推荐 收藏 15 收藏,6.9k 浏览 概述 模块不同于传统的脚本文件,它良好地定义了一个作用域来避免全局名称空间污染.它可以显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入,而无需引用全局变量.RequireJS的模块是模块模式的一个扩展,其好处是无需全局地引用其他模块. RequireJS的模块语法允许它尽快地加载多个模块,虽然

requirejs定义的模块返回的永远是单例对象,可以借助javascript中的类解决模块间的相互干扰问题

RequireJS中定义一个模块,总的来说有2种方式:简单键值对和函数依赖式. 1.简单键值对:一个模块仅含有值对,没有任何依赖 define({ color: "black", size: 1, method1: function() {}, method2: function() {} }); 这种写法虽然简单,但是有很大的局限性,仅仅是定义了该模块的返回值,不能做一些额外的初始化工作. 通过下面下面这种方式来定义模块,灵活性更高,我们可以在函数体内写一些模块初始化的代码. def

html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表(select)

目标 需要的是在选择第一个select下拉列表后,将选择的内容传送到PHP页面.在PHP页面中通过查询数库,得到第二个select需要显示的option的值,并在select中显示. 方案 1  利用ajax上传数据到PHP,由于利用了smarty模板技术,可以直接给模板中的变量赋值,这样就可以不用通过ajax接收返回值再经过处理输出了. 由于这个PHP页面没有包含在其他PHP页面里,是独立的.这样就造成无法赋值. 2  通过ajax接收返回值,这里的返回值就是以上数据库查询的结果. 通过jso