• 迷你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中去掉。

  • 相关阅读:
    HDU1575--Tr A(矩阵快速幂)
    HDU 2147--HDU 2147(博弈)--我可能做了假题。。。
    新年第一发--HDU1848--Fibonacci again and again(SG函数)
    【转】你真的会二分查找吗?
    windows与ubuntu双系统的安装
    bestcoder#9--1001--Lotus and Characters
    PC端的混合应用通讯问题
    JS构造函数详解
    JS的prototype的共享机制分析
    使用a标签直接下载图片
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/4021713.html
Copyright © 2020-2023  润新知