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字符串代碼實在是過於噁心。改變不了項目就改變自己。

模仿這些框架自己弄一個，還是會對理解他們的思想有點好處，只不過別人的代碼思想比較嚴謹。
希望未來有一天可以把這些技術引進來，省的每天瞎浪費時間造輪子。