AvalonJS學習筆記（一）

時間 2019-11-20

標籤 avalonjs 學習筆記简体版

原文原文鏈接

1、關於AvalonJSjavascript

avalon是國內的一個MVVM框架，是從knockout發展起來的css

分爲兩個版本html

avalon.js版本，支持IE6及很是老的標準瀏覽器。這裏的標準瀏覽器特指W3C陣營中的safari, opera, firefox, chromejava

avalon.modern.js版本，兼容IE10與標準瀏覽器git

若是想作移動端開發，有一個mobile.js，能夠直接將它的源碼拷貝到avalon.modern.js裏最後一個花括號的前面angularjs

2、得到源碼github

項目地址：https://github.com/RubyLouvre/avalonchrome

如何從github獲取源碼請查看：http://limodou.github.io/avalon-learning/zh_CN/installation.html後端

源碼下載後的目錄如圖：瀏覽器

.min.js是壓縮版

examples文件夾裏面是例子，裏面有index.html，能夠跳轉到各個實例頁面，對於學習avalonJs事半功倍

3、又見 hello,world

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="js/avalon.js" ></script>
        <script>
            var model = avalon.define('test', function(vm) {
                vm.aaa = "world"
            })
        </script>
    </head>
    <body ms-controller="test">
        <p>hello,{{aaa}}</p>
    </body>
</html>

在瀏覽器打開這個文件，結果是 Hello,world

<body ms-controller="test">中的 ms-controller ，用來聲明avalon的控制域。相似於angularjs中的 ng-controller。

一個HTML文件中能夠定義多個 `ms-controller`

avalon使用 `ms-` 開頭的屬性。因此只要涉及到Avalon動態處理功能的，都要注意定義`ms-` 開頭的屬性。

目前，Avalon並不存在以 `ms-` 開頭的 TAG，因此所有都是屬性。

<p>hello,{{aaa}}</p>，也與angularjs的語法同樣，使用{{}}進行插值，爲動態變化的模板變量

一個控制域與一個Model相對應，當Model中的數據發生變化，與之對應的控制域的DOM會自動進行變化。

var model = avalon.define('test', function(vm) {
vm.aaa = "world"
})

第一個參數是和前面 ms-controller 對應的名字。這裏是 test
第二個是一個函數，這個函數須要一個參數，名字能夠隨便起，可是習慣上使用 vm (在 Avalon中表示是 ViewModel 的意思)。 vm 能夠理解爲Model的引用。

vm.aaa = "world"，在VM上定義了一個aaa屬性，和{{aaa}}對應

4、綁定

先看下avalonJs的全部綁定

一、上面已經說了做用域綁定：ms-controller（繼承）, ms-important（組合），做用域的綁定能夠嵌套

二、模板綁定：ms-include

想在模板加載後，加工一下模板，可使用 data-include-loaded來指定回調的名字

想在模板掃描後，隱藏loading什麼的，可使用 data-include-rendered來指定回調的名字

外部模板經過 ms-include-src="src"進行加載

<div ms-include-src="'tmpl.html'"></div>（須要後端服務器支持）

要用兩種引號強制讓它的內部不是一個變量

三、數據綁定： ms-text, ms-html，{{}}

<script>

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

vm.text = "<b> 1111 </b>"

})

</script>

<div ms-controller="test">

<div><em>用於測試是否被測除</em>xxxx{{text}}yyyy</div>

<div><em>用於測試是否被測除</em>xxxx{{text|html}}yyyy</div>

<div ms-text="text"><em>用於測試是否被測除</em>xxxx yyyy</div>

<div ms-html="text"><em>用於測試是否被測除</em>xxxx yyyy</div>

</div>

結果：

四、類名切換與樣式綁定： ms-class, ms-hover, ms-active，ms-css

ms-css的用法爲ms-css-樣式名="樣式值"

如：

ms-css-width="prop"(會自動補px)，

ms-css-height="{{prop}}%",

ms-css-color="prop",

ms-css-background-color="prop",

ms-css-font-size="{{prop}}px"。

ms-class="aaa"， xxx爲類名

ms-hover="類名"，規則同ms-class，當用戶的鼠標懸浮在元素上方時，添加一個或多個類名，移走時移除它們。

ms-active="類名"，規則同ms-class，當用戶點擊它時爲它添加一個類名或多個類名，鼠標彈起時移除它們。

五、事件綁定： ms-on

ms-click
ms-dblclick
ms-mouseout
ms-mouseover
ms-mousemove
ms-mouseenter
ms-mouseleave
ms-mouseup
ms-mousedown
ms-keypress
ms-keyup
ms-keydown
ms-focus
ms-blur
ms-change
ms-scroll
ms-animation
ms-on-*

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>有關事件回調傳參</title>
        <script src="js/avalon.js" type="text/javascript"></script>
        <script>
            var a = avalon.define("simple", function(vm) {
                vm.array = ["aaa", "bbb", "ccc"]
                vm.loopClick = function(a) {
                    alert(a)
                }
            });
        </script>
    </head>
    <body>
        <fieldset ms-controller="simple">
            <div ms-each-el="array" >
                <p ms-click="loopClick(el)">{{el}}</p>
            </div>
        </fieldset>
    </body>
</html>

六、顯示綁定： ms-visible

<!DOCTYPE HTML> <html> <head> <title>ms-visible</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="../avalon.js" ></script> <script> var model = avalon.define("test", function(vm) { vm.a = true }) </script> <style> .rect{ display: none; } </style> </head> <body> <h3>ms-visible</h3> <div ms-controller="test"> <p>點我隱藏或顯示下面的方塊<input ms-duplex="a" type="radio"></p> <div class="rect" ms-visible="a" >visible</div> </div> </body> </html>