【揮舞JS】前端MVC，JS模板替換實現原理

咱們經常使用的框架，好比Vue、Angular等，都有屬於它們本身的表達式，好比{{}}，它們的數據綁定實現原理實際上是利用了正則表達式。

MVC模式

• M model 模型 數據
• V view 視圖層
• C control 控制器

view。注意：這裏的script標籤的type屬性要設置爲「text/html」，這樣瀏覽器在渲染頁面時不會把script標籤裏面的內容渲染到頁面上。

<script type="text/html" id="template">
    <p>name:{{name}}</p>
    <p>age:{{age}}</p>
    <p>height:{{height}}</p>
</script>

model和control。這裏的script標籤裏面就是咱們常寫的JS代碼了。

<script type="text/javascript">
    // model
    var data = {
        name: 'splendid',
        age: 22,
        height: 173,
        weight: 60,
        hobby: '閱讀'
    };

    // control
    var mtp1 = function (tp1, data) {
        var tp1 = document.getElementById(tp1).innerHTML;
        var exp = /\{\{(\w+)\}\}/g;
        while (result = exp.exec(tp1)) {
            if (result[1]) {
                tp1 = tp1.replace(result[0], data[result[1]]);
            }
        }
        return tp1;
    };
    document.getElementById('box').innerHTML = mtp1('template', data);
</script>