Js实现简易版本的页面替换工具方法，接受后台返回的页面数据（避免html代码拼接）

直接先上代码

/**
 * @AUTHOR: licunzhi
 * @DATE: 2019-5-13
 * @DESC: 自定义模板渲染工具
 * @METHOD: template 单条数据渲染方法
 * @METHOD: templateIterator 多条数据渲染方法
 * @METHOD: templatePageHtml 页面整块替换
 */
const templateUtils = {

    /**
     * 单条模板渲染工具
     *
     * @param id 原生模板id take an example
     * @param data 数据源
     * @param regex 自定义匹配正则(多数不用)
     * @returns {void | string | *}
     *
     * First： 当前js可选中范围内定义html代码脚本片段
     *  <jsCode>
     *      <script id='idTag' type='text/html'>
     *          <div>{AUTHOR}</div>
     *          <div>{LOCATION}</div>
     *          <div>{INFORMATION}</div>
     *      </script>
     *  </jsCode>
     *
     *  Second: 传入id和执行对象参数将返回包装好的html代码段（不破坏原有的代码段结构）
     *  <jsCode>
     *      const data = {}
     *      const resultHtml = templateUtils.template('idTag', data);
     *  </jsCode>
     *
     *  ALSO: templateIterator
     */
    template(id, data, regex) {
        const template = $(`script[id=${id}]`).html();
        return template.replace(regex || /\\?\{([^{}]+)\}/g, function (match, name) {
            return (data[name] === undefined) ? '' : data[name];

        });
    },

    /**
     * 多条模板渲染工具
     *
     * @param id 原生模板id
     * @param data 数据源
     * @param regex 匹配正则(多数不用)
     * @returns {void | string | *}
     * @notice 多条渲染工具以来单条工具渲染方法
     */
    templateIterator(id, data, regex) {
        let result = '';
        for (let value of data) {
            result = result + this.template(id, value, regex);
        }
        return result;
    },

    /**
     * 视图跳转替换页面指定位置方法
     *
     * @notice 该方式适合页面局部html的替换，避免引用
     * @param matchPattern 匹配选择器，推荐使用id的方式选择
     * @param url 视图解析目标地址
     * @params url 跳转需要的参数
     */
    templatePageHtml(matchPattern, url, params) {
        $.ajax({
            url: url,
            global: false,
            type: "POST",
            dataType: "html",
            data: JSON.stringify(params),
            async: true,
            success: function (html) {
                matchPattern.html(html);
            },
            error: function (msg) {
                console.error('*************templatePageHtml**************');
                console.error(' replace html info error ..', msg);
                console.error('*************templatePageHtml**************');
            }
        })
    }
};

怎么用

首先要引入这个js文件

随便你用什么方法，或者是引入文件，或者是直接在代码中添加js代码片段

html的脚本

假设我这边的代码是这样的，我想把这个代码片段包装好的结果嵌入到页面的一个位置上。请注意这个脚本的类型是html类型的，并且上面弄了一个id，请你记住这个id还要保持这个id的唯一性。这样后来你会用到的。

<script id="group-html" type="text/html">
    <div class="items">
        <p class="group-name">
            <span>{GROUP_NAME}</span>
            <span class="group-delete" id="{GROUP_ID}" onclick="deleteGroup(event)"></span>
        </p>
        <div class="group-num">
            <p><i>{TOTAL_COUNT}</i></p>
            <p>总会员数</p>
        </div>
        <p class="group-creat">
            <span>创建人：<i>{CREATOR}</i></span>
            <span>创建时间：<i>{CREATE_TIME}</i></span>
        </p>
    </div>
</script>

你需要的数据格式

这个时候你的ajxa的返回的数据类型，假设是data。data或许是你直接可以用的，或者不是但是最终的封装的效果json应该是这样的。

data = {
	CROUP_NAME: 'sakura',
	GROUP_ID: 123123,
	TOTAL_COUNT: 123123123,
	CREATOR: 'park',
	CREATE_TIME: '2019-05-12'
}

你应该怎么用

这里面的前两个方法可以实现 一个data或者是dataLis

const groupHtml = groupUtils.template('group-html', data);
$('.group-list').append(groupHtml);

同理，假设你的代码的data是一个数组对象，你可以使用这个

 const groupHtml = groupUtils.templateIterator('group-html', data);
 $('.group-list').append(groupHtml);

败笔

明眼人都是知道的，这个玩意就是一个简易版本的artTemplate，苦于现在的项目不能直接引入使用，所以自己瞎弄了一个。

不是我想重复造轮子，项目实现不了并且代码出现原始拼接的html字符串代码实在是过于恶心。改变不了项目就改变自己。

模仿这些框架自己弄一个，还是会对理解他们的思想有点好处，只不过别人的代码思想比较严谨。
希望未来有一天可以把这些技术引进来，省的每天瞎浪费时间造轮子。