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

昨天编写了第一版的模板标签替换代码,发现有很多不足的地方,不足内容如下:

1:正则无法匹配模板中存在的空格问题

2:无法删除属性项中不存在的标签

根据昨天的不足,经过修正后,新的模板替换方法如下:

/**
 * @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=‘{XXX}‘ || XXX="{XXX}"
         * @type {RegExp}
         */
        var regExp = new RegExp(‘[a-zA-Z]+[\\s]*=[\\s]*[\"\‘]\\{[^\\{\\}]+\\}[\"\‘]‘, ‘\g‘);

        /**
         * 提取属性正则表达式 XXX
         * @type {RegExp}
         */
        var regExpAttribute = new RegExp(‘[a-zA-Z]+‘, ‘\g‘);

        /**
         * 提取标签正则表达式 {XXX}
         * @type {RegExp}
         */
        var regExpLable = new RegExp(‘\\{[^\\{\\}]+\\}‘, ‘\g‘);

        /**
         * 提取 XXX=‘{XXX}‘ || XXX="{XXX}" 格式的数组
         * @type {Array|{index: number, input: string}|*}
         */
        var alArr = temp.match(regExp);

        /**
         * 根据option中的属性配置项翻译模板内容,并将不存在的标签删除
         */
        for (var al in alArr) {
            /**
             * 获取属性
             */
            var attribute = alArr[al].match(regExpAttribute)[0];

            /**
             * 获取标签
             */
            var label = alArr[al].match(regExpLable)[0];

            if (typeof(option[attribute]) === ‘undefined‘ ||
                option[attribute] === null ||
                option[attribute] === ‘null‘ ||
                option[attribute] === ‘‘) {
                temp = temp.replace(alArr[al], ‘‘);
                continue;
            }

            temp = temp.replace(label, option[attribute]);
        }

        /**
         * 返回解析后的模板
         * @returns {*}
         */
        Template.prototype.getTemp = function () {
            return temp;
        };
    };
    module.exports = Template;
});
时间: 2024-10-13 16:37:51

关于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

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

前段时间查看了extjs的源代码,大概就看了20多分钟,我看了个大概,曾经推测Extjs动态创建组件其实也是使用了标签模板,如今看过源码之后证实了我的猜测,extjs拥有自己的一套模块加载器,所以能够自由的编写自定义组件等更多强大的功能.       现在我也想仿写一套extjs这么强大工具,那么我就需要考虑组件模块化的问题,其次就是模板的编写,样式的自由扩展和模块的自由定义等,不过还好,js这么强大的语言周边的工具总是很多,模块化的组件例如requireJS和seaJS都是非常不错的选择,se

[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) {   

Requirejs定义模块

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

RequireJS 入门(二)

简介 如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS.在这篇文章中,我将描述RequireJS是什么,以及它的一些基础场景. 异步模块定义(AMD) 谈起RequireJS,你无法绕过提及JavaScript模块是什么,以及AMD是什么. JavaScript模块只是遵循SRP(Single Responsibility Principle单一职责原则)的代码段,它暴露了一个公开的API.在

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