迷你MVVM框架 avalonjs 學習教程17、avalon的一些配置項


本章節,主要是介紹avalon.config方法,通過它來制定一些更貼心的功能。

一般情況下,我們在使用ms-controller綁定時,需要添加一個ms-controller類名,目的是為了防止網速慢時將花括號暴露出來。

<!DOCTYPE html>
<html>
    <head>
        <title>avalon入門</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.modern.js" type="text/javascript"></script>
        <script>
            var model = avalon.define({
                $id: "test",
                array: [{check: 1}, {check: 2}, {check: 3}],
                aaa: "999"
            })
        </script> 
        <style>
            .ms-controller{
                visibility: hidden
            }
        </style>
    </head>
    <body>
        <div ms-controller="test" class="ms-controller">
            <div ms-repeat="array">
                {{el.check}} 
            </div>
            <a ms-href="xxxx{{aaa}}.html">ddd</a>
        </div>
    </body>
</html>

enter image description here 雙花括號也默認是python一些著名模板的界定符,為了防止沖突,我們有更換界定符的需求。這時我們可以這樣做

<!DOCTYPE html>
<html>
    <head>
        <title>avalon入門</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.modern.js" type="text/javascript"></script>
        <script>
            avalon.config({
                interpolate: ["<!--","-->"]
            })
            var model = avalon.define({
                $id: "test",
                array: [{check: 1}, {check: 2}, {check: 3}],
                aaa: "999"
            })
        </script> 
    </head>
    <body>
        <div ms-controller="test" class="ms-controller">
            <div ms-repeat="array">
                <!--el.check-->
            </div>
            <a ms-href="xxxx<!--aaa-->.html">ddd</a>
        </div>
    </body>
</html>

<!–與–>會生成一個注釋節點,這樣用戶在網速慢時就看不到亂七八糟的內容了。當然這個也有風險,如果用戶在頁面上定義了許多注釋,可以有搞混的問題。

我們再看下一個有用的配置項,debug。avalon默認是在控制台下打印沒有調試消息的,上線時我們不願用戶看到它們,可以這樣關掉它們。 enter image description here enter image description here enter image description here

avalon.config({debug: false})

avalon擁有自己的AMD加載器,如果你想用requirejs或seajs,那你得禁用自帶的加載器,或像第一節建議的那樣,直接在源碼里面把它整個刪掉。

  avalon.config({loader: false})

此外,avalon還有兩個隱秘的配置項。

maxRepeatSize是用來配置ms-repeat循環綁定生成的代理節點所在的池子大小,目的是重復利用這些VM對象。默認是100。手機上對內存比較嚴重,可以將此閥值調少點。

 avalon.config({lmaxRepeatSize: 40})

dettachVModels是決定在事件綁定的this對象上添加$vmodels、 $vmodel屬性。以前是默認添加的,現在是默認不添加,這是出於CG回收的考慮。並且在IE6-8下,為元素添加$vmodels屬性不知為何會拋異常。看源碼: enter image description here

$vmodels、 $vmodel應該鮮為人知,大家不要管它們就是。此配置項也將在1.36中去掉。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM