迷你MVVM框架 avalonjs 沉思录第3节动态模板 / 憋错料

模板的发明是编程史上的一大里程碑，让我们摆脱了烦锁且易出错的字符串拼接，维护性大大提高。

都在JSP，ASP时代，人们已经学会使用include等语句，将多个页面片断拼接成一个页面。
此外，为了将数据库中的数据或业务中用到的变量输出到页面，我们需要将页面某个地方标记一下，将变量塞到里面去。
最后，出于方便循环输出一组数据，就需要将each语句从HTML里撕开一道口子，加上其他什么if语句，页面上其实变撕裂成两部分
一种是与后端语言相近的逻辑部分，一个是够为纯净的HTML部分，到最后，模板引擎就发展出来。

在jQuery王朝的后期，业务逻辑不断往前搬，前端模板也发明出来了。这些模板我统称为静态模板或字符串模板，特征是模板是放在
一个script标签或textarea标签里。静态模板的好处是统一管理，我们从script标签等抽取内容时，它是原汁原味，没有变量。
缺点是破坏原有的结构。MVVM时代，knockout，
ember等率先发明动态模板，或叫DOM模块，特点是通过在元素节点上标记一些特殊属性，注明此元素里面会输出什么内容
或此元素的子元素是作用循环体要循环多少次，当然if等输出不输出很小儿科。缺点是，需要对文档的整体或某一区域进行扫描，这里耗时比静态模板多上几倍，并且定界符（用于输出变量的标记）可能离奇失踪。但这也没什么大不了，现在流行的两种定界符形式≈lt&;,
%>，{{ }}在IE10+或W3C浏览器活得好好的，IE6-9,我们只要避开大于小于号就行了。
此外动态模板与静态模板最大的不同在于，它是没有编译函数，而是通过扫描文档，根据节点上的定界符与绑定属性实现循环输出，填空等功能。

我们看一下avalon是怎么做的。大致分两块，定义VM，添加绑定。VM是我们操作的主体，绑定是将页面变成模板的关键。

VM的定义：

avalon.define("test",function(vm){

   vm.aaa = "司徒正美"

})

avalon.define是用来定义VM，第一个参数为VM的ID名，这是用于在页面圈定作用域的范围，对应的绑定属性是ms-controller。因为一个页面可能有多人负责，就存在多个VM了，而VM相当于一个数据据，它们都用于不同的区域，这里就需要用ID来区分了。

添加绑定，我们随便往body一塞就行了

<body>{{aaa}}</body>

这里的{{ }}是定界符，放在文本节点里。我们可以用过avalon.config({interpolate: ["{?",
"?}"]})来设置定界符。

<!DOCTYPE html>

<html>

    <head>

        <title>avalon</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

       <script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js">   </script>

        <script>

            avalon.define("test", function(vm){

                vm.aaa = "司徒正美"

            })

        </script>

    </head>

    <body ms-controller="test">

        <h3>{{aaa}}</h3>

        {{aaa}}

    </body>

</html>

运行代码

但世界上没有这么简单的页面，比如我们要输出一个列表，是不是要这样干呢？

<!DOCTYPE html>

<html>

    <head>

        <title>avalon</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>

        <script>

            avalon.define("test", function(vm) {

                vm.a = "2014预言:阿里死磕港交所"

                vm.b = "马云进军游戏背后:恐失势电商"

                vm.c = "支付宝信息泄露揭大公司管理困境"

                vm.d = "盘点2013:智能手机开启的新场景"

            })

        </script>

    </head>

    <body ms-controller="test">

        <ol>

            <li>{{a}}</li>

            <li>{{b}}</li>

            <li>{{c}}</li>

            <li>{{d}}</li>

        </ol>

    </body>

</html>

<!DOCTYPE html>
<html>
<head>
<title>avalon</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>
<script>
avalon.define("test", function(vm) {
vm.a = "2014预言:阿里死磕港交所"
vm.b = "马云进军游戏背后:恐失势电商"
vm.c = "支付宝信息泄露揭大公司管理困境"
vm.d = "盘点2013:智能手机开启的新场景"
})
</script>
</head>
<body ms-controller="test">
<ol>
<li>{{a}}</li>
<li>{{b}}</li>
<li>{{c}}</li>
<li>{{d}}</li>
</ol>
</body>
</html>

运行代码

当然不行，这要定义多少个变量啊！这时就需用到循环绑定，ms-repeat!

<!DOCTYPE html>

<html>

    <head>

        <title>avalon</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>

        <script>

            avalon.define("test", function(vm) {

                vm.array = ["2014预言:阿里死磕港交所",

                    "马云进军游戏背后:恐失势电商",

                    "支付宝信息泄露揭大公司管理困境", "盘点2013:智能手机开启的新场景"]

            })

        </script>

    </head>

    <body ms-controller="test">

        <ol>

            <li ms-repeat="array">{{el}}</li>

        </ol>

    </body>

</html>

<!DOCTYPE html>
<html>
<head>
<title>avalon</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>
<script>
avalon.define("test", function(vm) {
vm.array = ["2014预言:阿里死磕港交所",
"马云进军游戏背后:恐失势电商",
"支付宝信息泄露揭大公司管理困境", "盘点2013:智能手机开启的新场景"]
})
</script>
</head>
<body ms-controller="test">
<ol>
<li ms-repeat="array">{{el}}</li>
</ol>
</body>
</html>

运行代码

ms-repeat相当于ms-each-el，后面的-el是可配置可省略。比如改成ms-repeat-elem，那么对应的位置要改成{{elem}}。

我们还可以输出2维数组

<!DOCTYPE html>

<html>

    <head>

        <title>avalon</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>

        <script>

            avalon.define("test", function(vm) {

                vm.array = [[1, 2], [4, 5], [7, 8]]

            })

        </script>

    </head>

    <body ms-controller="test">

        <table width="80%" border="1">

            <tr ms-repeat-item="array">

                <td ms-repeat="item">{{el}}</td>

            </tr>

        </table>

    </body>

</html>

<!DOCTYPE html>
<html>
<head>
<title>avalon</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>
<script>
avalon.define("test", function(vm) {
vm.array = [[1, 2], [4, 5], [7, 8]]
})
</script>
</head>
<body ms-controller="test">
<table width="80%" border="1">
<tr ms-repeat-item="array">
<td ms-repeat="item">{{el}}</td>
</tr>
</table>
</body>
</html>

运行代码

输出对象数组

<!DOCTYPE html>

<html>

    <head>

        <title>avalon</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>

        <script>

           var model =  avalon.define("test", function(vm) {

                vm.array = [{name: 111}, {name: 222}, {name: 333}]

            })

        </script>
</head>

    <body ms-controller="test">

        <ul>

            <li ms-repeat-me="array">{{me.name}}</li>

        </ul>

    </body>

</html>

</head>
<body ms-controller="test">
<ul>
<li ms-repeat-me="array">{{me.name}}</li>
</ul>
</body>
</html>

运行代码

现在大家算是对ms-repeat算是有一个大体的了解吧。那么我们学一点高级的。avalon.define会返回一个VM对象，我们通过操作它就能实现页面的操作数据即操作DOM！！！，比如vmodel.array.push。另，我们想输出每个元素对应的索引值，可以使用$index这个变量。

<!DOCTYPE html>

<html>

    <head>

        <title>avalon</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>

        <script>

           var model =  avalon.define("test", function(vm) {

                vm.array = [{name: 111}, {name: 222}, {name: 333}]

            })

            var array = model.array

            setInterval(function(){

                array.push({name: Math.random().toString(32).substr(4,14)})

                if(array.length > 10){

                    array.shift()

                }

            },500)

        </script>
</head>

    <body ms-controller="test">

        <ul>

            <li ms-repeat="array">{{$index}}--{{el.name}}</li>

        </ul>

    </body>

</html>

<!DOCTYPE html>
<html>
<head>
<title>avalon</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>
<script>
var model = avalon.define("test", function(vm) {
vm.array = [{name: 111}, {name: 222}, {name: 333}]
})
var array = model.array
setInterval(function(){
array.push({name: Math.random().toString(32).substr(4,14)})
if(array.length > 10){
array.shift()
}
},500)
</script>

</head>
<body ms-controller="test">
<ul>
<li ms-repeat="array">{{$index}}--{{el.name}}</li>
</ul>
</body>
</html>

运行代码

之所以能有这样神奇的效果，是因为avalon会将VM中的数组转换为监控数组，它拥有以下方法：

push, shift, unshift, pop, slice, splice, remove, removeAt,
removeAll, clear, ensure, sort, reverse, set

现在我们跳前一步，学一下ms-on-*绑定，实现一个更复杂的效果。ms-on-*的*对应一个事件名，属性值为VM中一个函数名，与元素onkeypress,
onclick一样，它的第一个参数默认是事件对象，this指向元素节点，不同的是我们已经对IE6-8下的事件对象做了兼容处理。

<!DOCTYPE HTML>

<html>

    <head>

        <title>ms-repeat</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>

        <script>

            avalon.define("test", function(vm) {

                vm.array = ["1", "2", "3", "4"]

                "push,unshift,remove,ensure".replace(/\w+/g, function(method) {

                    vm[method] = function(e) {

                        if (this.value && e.which == 13) {//this为input元素

                            vm.array[method](this.value);

                            this.value = "";

                        }

                    }

                })
vm.removeAt = function(e) {

                    if (isFinite(this.value) && e.which == 13) {//this为input元素

                        var a = ~~this.value

                        vm.array.removeAt(a)

                        this.value = "";

                    }

                }

                "pop,shift,sort,reverse".replace(/\w+/g, function(method) {

                    vm[method] = function(e) {

                        vm.array[method]();

                    }

                })

            });
</script>

    </head>

    <body ms-controller="test">

        <p>监控数组拥有以下方法，我们可以操作它们就能同步对应的区域</p>

        <blockquote>

            push, shift, unshift, pop, slice, splice, remove, removeAt, removeAll, clear, ensure, sort, reverse, set

        </blockquote>

        <ul>

            <li  ms-repeat="array">数组的第{{$index+1}}个元素为{{el}}</li>

        </ul>

        <p>对数组进行push操作，并回车<input ms-on-keypress="push"></p>

        <p>对数组进行unshift操作，并回车<input ms-on-keypress="unshift"></p>

        <p>对数组进行ensure操作，并回车<input ms-on-keypress="ensure"><br/>

            (只有数组不存在此元素才push进去)</p>

        <p>对数组进行remove操作，并回车<input ms-on-keypress="remove"></p>

        <p>对数组进行removeAt操作，并回车<input ms-on-keypress="removeAt"></p>

        <p><button type="button" ms-on-click="sort">对数组进行sort操作</button></p>

        <p><button type="button" ms-on-click="reverse">对数组进行reverse操作</button></p>

        <p><button type="button" ms-on-click="shift">对数组进行shift操作</button></p>

        <p><button type="button" ms-on-click="pop">对数组进行pop操作</button></p>

        <p>当前数组的长度为<span style="color:red">{{array.size()}}</span>，注意 我们无法修改数组length的固有行为，因此它无法同步视图，需要用size方法。</p>

    </body>

</html>

vm.removeAt = function(e) {
if (isFinite(this.value) && e.which == 13) {//this为input元素
var a = ~~this.value
vm.array.removeAt(a)
this.value = "";
}
}
"pop,shift,sort,reverse".replace(/\w+/g, function(method) {
vm[method] = function(e) {
vm.array[method]();
}
})
});

</script>
</head>
<body ms-controller="test">
<p>监控数组拥有以下方法，我们可以操作它们就能同步对应的区域</p>
<blockquote>
push, shift, unshift, pop, slice, splice, remove, removeAt, removeAll, clear, ensure, sort, reverse, set
</blockquote>
<ul>
<li ms-repeat="array">数组的第{{$index+1}}个元素为{{el}}</li>
</ul>
<p>对数组进行push操作，并回车<input ms-on-keypress="push"></p>
<p>对数组进行unshift操作，并回车<input ms-on-keypress="unshift"></p>
<p>对数组进行ensure操作，并回车<input ms-on-keypress="ensure"><br/>
(只有数组不存在此元素才push进去)</p>
<p>对数组进行remove操作，并回车<input ms-on-keypress="remove"></p>
<p>对数组进行removeAt操作，并回车<input ms-on-keypress="removeAt"></p>
<p><button type="button" ms-on-click="sort">对数组进行sort操作</button></p>
<p><button type="button" ms-on-click="reverse">对数组进行reverse操作</button></p>
<p><button type="button" ms-on-click="shift">对数组进行shift操作</button></p>
<p><button type="button" ms-on-click="pop">对数组进行pop操作</button></p>
<p>当前数组的长度为<span style="color:red">{{array.size()}}</span>，注意我们无法修改数组length的固有行为，因此它无法同步视图，需要用size方法。</p>
</body>
</html>

运行代码

有了批量输出的ms-repeat及通过调用监控数组的方法就能实现对应节点的删除添加排序，那么实现grid简直易如反掌。

<!DOCTYPE HTML>

<html>

    <head>

        <title>ms-repeat</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>

        <script>

            if (!Date.now) {

                Date.now = function() {

                    return new Date - 0;

                }

            }

            avalon.define(‘test‘, function(scope) {

                scope.selected = "name"

                scope.options = ["name", "size", "date"]

                scope.trend = 1

                scope.data = [

                    {name: "aaa", size: 213, date: Date.now() + 20},

                    {name: "bbb", size: 4576, date: new Date - 4},

                    {name: "ccc", size: 563, date: new Date - 7},

                    {name: "eee", size: 3713, date: 9 + Date.now()},

                    {name: "555", size: 389, date: Date.now() - 20}

                ];

                scope.$watch("selected", function(v) {

                    var t = parseFloat(scope.trend)

                    scope.data.sort(function(a, b) {

                        var ret = a[v] > b[v] ? 1 : -1

                        return t * ret

                    })

                })

                scope.$watch("trend", function(t) {

                    var v = scope.selected, t = parseFloat(t)

                    scope.data.sort(function(a, b) {

                        var ret = a[v] > b[v] ? 1 : -1

                        return t * ret

                    })

                })

            });
</script>

    </head>

    <body ms-controller="test">

        <p>

            <select ms-duplex="selected">

                <option ms-repeat="options">{{el}}</option>

            </select>

            <select ms-duplex="trend">

                <option value="1">up</option>

                <option value="-1">down</option>

            </select>

        </p>

        <table width="500px" border="1">

            <tbody >

                <tr ms-repeat="data">

                    <td>{{el.name}}</td> <td>{{el.size}}</td> <td>{{el.date}}</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

<!DOCTYPE HTML>
<html>
<head>
<title>ms-repeat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>
<script>
if (!Date.now) {
Date.now = function() {
return new Date - 0;
}
}
avalon.define(‘test‘, function(scope) {
scope.selected = "name"
scope.options = ["name", "size", "date"]
scope.trend = 1
scope.data = [
{name: "aaa", size: 213, date: Date.now() + 20},
{name: "bbb", size: 4576, date: new Date - 4},
{name: "ccc", size: 563, date: new Date - 7},
{name: "eee", size: 3713, date: 9 + Date.now()},
{name: "555", size: 389, date: Date.now() - 20}
];
scope.$watch("selected", function(v) {
var t = parseFloat(scope.trend)
scope.data.sort(function(a, b) {
var ret = a[v] > b[v] ? 1 : -1
return t * ret
})
})
scope.$watch("trend", function(t) {
var v = scope.selected, t = parseFloat(t)
scope.data.sort(function(a, b) {
var ret = a[v] > b[v] ? 1 : -1
return t * ret
})
})
});

</script>
</head>
<body ms-controller="test">
<p>
<select ms-duplex="selected">
<option ms-repeat="options">{{el}}</option>
</select>
<select ms-duplex="trend">
<option value="1">up</option>
<option value="-1">down</option>
</select>
</p>
<table width="500px" border="1">
<tbody >
<tr ms-repeat="data">
<td>{{el.name}}</td> <td>{{el.size}}</td> <td>{{el.date}}</td>
</tr>
</tbody>
</table>
</body>
</html>

运行代码

这里用到了ms-duplex, $watch，大家可以到《入门教程》看看，都是很简单的东西。

接着我们再看看如何循环输出对象吧，它也是用ms-repeat，不过里面的变量为$key, $val。不用多言，看例子。

<!DOCTYPE html>

<html>

    <head>

        <title>avalon</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>

        <script>

            var model = avalon.define("test", function(vm) {

                vm.object = {

                    grape: "葡萄",

                    coconut: "椰子",

                    pitaya: "火龙果",

                    orange: "橙子"

                }
})
</script>
</head>

    <body ms-controller="test">

        <ul>

            <li ms-repeat="object">{{$key}}--{{$val}}</li>

        </ul>

    </body>

</html>

})

</script>

</head>
<body ms-controller="test">
<ul>
<li ms-repeat="object">{{$key}}--{{$val}}</li>
</ul>
</body>
</html>

运行代码

好了，循环输出就到这里。我们最后看一下如何实现其他模板引擎的if语句。它的名字为ms-if，如果值为真就输出，否则不输出。

<!DOCTYPE html>

<html>

    <head>

        <title>avalon</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="http://files.cnblogs.com/rubylouvre/avalon20130929.js"></script>

        <script>

            var model = avalon.define("test", function(vm) {

                vm.toggle = true

                vm.click = function(){

                    vm.toggle = !vm.toggle

                }

                vm.text = "捉迷藏"
})
</script>
</head>

    <body ms-controller="test">

        <p ms-if="toggle">{{text}} </p>

        <button type="button" ms-on-click="click">点我{{toggle ?  ‘隐藏‘ : "显示"}}</button>

    </body>

</html>

})

</script>
</head>
<body ms-controller="test">
<p ms-if="toggle">{{text}} </p>
<button type="button" ms-on-click="click">点我{{toggle ? ‘隐藏‘ : "显示"}}</button>
</body>
</html>

运行代码

{{}}, ms-repeat,
ms-if这就是动态模板相对静态模板的所有功能了，但由于动态模板在扫描之后，得到所有要处理的节点的引用，这也意味着，以后我们要做一小部分的更新，不用像静态模板那样大规模替换，而是细化到每一个元素节点，特性节点或文本节点。这就是所谓的“最小化刷新”技术。一般的，只有ms-if等少量绑定才影响到元素节点那一层面，更多的时候，
我们是在刷新特性节点的value值，文本节点的data值，这也意味着，我们的刷新不会引起reflow。加之，能得到元素节点本上，我们就可以轻松实现绑定事件，操作样式，修改属性等功能。这也是为什么大多数MVVM框架选择动态模板的缘故，jQuery原来可以做的，我们全部通过绑定属性或定界符在HTML里搞定。
这也意味着，我们实现了完美的分层架构，JS里面是纯粹的模型层（包括model与viewmodel），HTML里是学习成本与维护成本极低的视图层。这已经不是多了一个模板引擎这么简单的事，我们抢到了
一直以来属性于后端的禁脔——分层架构！

如果您觉得这文章对您有帮助，可以打赏点钱给我，鼓励我继续写一些高质量的博文

迷你MVVM框架 avalonjs 沉思录第3节动态模板,布布扣,bubuko.com

时间： 2024-08-02 10:50:49

迷你MVVM框架 avalonjs 沉思录第3节动态模板

如果您觉得这文章对您有帮助，可以打赏点钱给我，鼓励我继续写一些高质量的博文

迷你MVVM框架 avalonjs 沉思录第3节动态模板的相关文章

迷你MVVM框架 avalonjs 沉思录第1节土耳其开局

迷你MVVM框架 avalonjs 沉思录第2节 DOM操作的三大问题

迷你MVVM框架 avalonjs 入门教程（司徒正美）

迷你MVVM框架 avalonjs 1.3.1发布

迷你MVVM框架 avalonjs 1.3.2发布

迷你MVVM框架 avalonjs 1.3.3发布

迷你MVVM框架 avalonjs 1.3.5发布

迷你MVVM框架 avalonjs 1.3.8发布

迷你MVVM框架 avalonjs 1.3.7发布

迷你MVVM框架 avalonjs 沉思录 第3节 动态模板

如果您觉得这文章对您有帮助，可以打赏点钱给我，鼓励我继续写一些高质量的博文

迷你MVVM框架 avalonjs 沉思录 第3节 动态模板的相关文章

迷你MVVM框架 avalonjs 沉思录第3节动态模板

迷你MVVM框架 avalonjs 沉思录第3节动态模板的相关文章