随身笔记

作者： admin

  • avalon扫描 avalon.scan()

    扫描有ms-controller/ms-imporant的DOM容器。

     

    *注意: 如果你是将vm定义放在jQuery.ready或avalon.ready中必须手动调用这个方法.

    *注意: avalon2不会像avalon1那样将ms-*属性去掉了

    *注意: avalon不能扫描iframe的内容

    参数1：原生DOM，填写扫描的节点一般都是从html或者是body开始，在2.0第一个参数为必填。

    参数2：数组，可选指定扫描视图模块如果不填也会自动是寻找，这过程会耗时。

    avalon.ready(function(){ 

   var vm=avalon.define({
     $id:'ceshi',
     text:'1',
     array:[11,'我','ta']
 });

   avalon.scan(document.body,[vm,vm1]); //在2.0中如果使用了ready方法，就必须手动扫描avalon.scan不然就无法工作，
                                        //一般scan都会跟ready一起使用
});

  • avalon等待dom加载完毕后触发 avalon.ready()

    该方法与jQuery.ready相仿.

    熟悉jQuery的人, 都知道domReady事件. window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. 另外我们需要在DOM准备完毕后, 再修改DOM结构, 比如添加DOM元素等. 否则有可能出现“Internet Explorer无法打开站点”的问题.

    avalon.ready(function(){  //等待dom加载完成后才执行avalon代码

 var vm=avalon.define({
    $id:'ceshi',
    text:'1',
    array:[11,'我','ta']
 });

 avalon.scan(document.body,[vm,vm1]); //在2.0中如果使用了ready方法，就必须手动扫描avalon.scan不然就无法工作

});

     

     

     

     

  • css3呼吸灯效果

    light_css

    <div class="breathe-btn"></div>
    .breathe-btn,.breathe-btn1,.breathe-btn2{
 width:5px; height:5px;border:5px solid #fff;left: 140px;top: 42px;
 position:absolute; border-radius:50%; box-shadow:0 0 0px 2px #fff; overflow:hidden;
 background-color:#fff;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-name: breathe;
 -webkit-animation-duration: 2700ms;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;

 animation-timing-function: ease-in-out;
 animation-name: breathe;
 animation-duration: 2700ms;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}


.breathe-btn1{
 width:7px; height:7px;border:5px solid #fff;left: 250px;top: 48px;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-name: breathe;
 -webkit-animation-duration: 2000ms;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;

 animation-timing-function: ease-in-out;
 animation-name: breathe;
 animation-duration: 2000ms;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}


.breathe-btn2{
 width:10px; height:10px;border:5px solid #fff;left: 350px;top: 40px;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-name: breathe;
 -webkit-animation-duration: 3000ms;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;

 animation-timing-function: ease-in-out;
 animation-name: breathe;
 animation-duration: 3000ms;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}

@-webkit-keyframes breathe {
 0% { box-shadow:0 1px 2px #fff;}
 100% { border:5px solid #fff; box-shadow:0 0 50px 20px #fff;}
}

@keyframes breathe {
 0% { box-shadow:0 1px 2px #fff;}
 100% { border:5px solid #fff; box-shadow:0 0 50px 20px #fff;}
}

     

     

     

  • avalon avalon.config配置

    avalon2遵循coc原则，配置项比较少。只有两个配置项。

    双花括号也默认是python一些著名模板的界定符，为了防止冲突，我们有更换界定符的需求。 这时我们可以这样做

    avalon.config({
 interpolate: ['{%','%}']
})
 //或
avalon.config({
 interpolate: ['{?','?}']
})
 //或
avalon.config({
 interpolate: ['{&','&}']
})

     

    默认在控制台会打印出一些调试提示：

    avalon_console

    在正式上线时，我们是不需要这些提示的关闭方法是：

    avalon.config({
 debug: false
})

     

  • avalon ms-skip

    ms-skip 有此属性的容器avalon将忽视此容器，不作用于此范围直接跳过。

    <script>
 var vm = avalon.define({
  $id: "test",
  aaa: "XXXX"
 })
</script>

<body ms-controller="test">
 <div ms-skip='true' >{{@aaa}}</div>
</body>