avalon2初體驗

時間 2019-11-21

標籤 avalon2 avalon 體驗简体版

原文原文鏈接

最近因項目進展需求對現有項目進行重構，因爲目前項目還未實現真正意義上的先後端分離（後續會循序重構實現），在時間緊產品循序迭代的狀況下，想一次性實現先後端分離精力實在有限（主要是前端開發人力不足）。全部決定先將影響項目開發進度和影響團隊開發的一些歷史遺留問題進行改造（包括模塊發、配置化、前端渲染引擎等問題的改造）。
模塊發、配置化的改造此處省略，須要的同窗請自行補腦，目前流行的模塊化思想的產物有requirejs、seajs(項目中使用)等......
目前比較流行的前端MVVM框架包括Angular、React、Avalon等，因爲前二者均已在後續的版本中拋棄了對IE的支持（老的版本對ID的支持也不太友好，這是我直接拋棄前二者的直接緣由），avalon是一款基於虛擬DOM與屬性劫持的迷你、易用、高性能，擁有超優秀的兼容性, 支持移動開發, 後端渲染, WEB Component式組件開發, 無需編譯, 開箱即用。avalon體積雖小但五臟俱全，包括虛擬DOM、指令（自定義組件開發和完善的第三方組件庫）、雙向綁定（相比原先利用ejs渲染爽了不少）、過濾器、驗證、服務端渲染等等...
直接上示例：
html:html

<!DOCTYPE html>
<html>
  <head>
      <title>first example</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="./dist/avalon.js"></script>
      <script>
          var vm = avalon.define({
              $id: "test",
              name: "mike",
              array: [11,22,33]
          })
          setTimeout(function(){
             vm.array.set(0, 444)
          }, 3000)
      </script>
  </head>

  <body ms-controller="test">
      <input ms-duplex="@name">
      <p>Hello,{{@name}}!</p>
      <ul>
         <li ms-for="($index,el) in @array">{{$index}}--{{el}}</li>
      </ul>
  </body>
</html>

是否是和咱們熟悉的Angular等前端MVVM架構很像？直接定義一個avalon做用域（Avalon的做用域也是向上冒泡查找的），經過$id屬性進行綁定，html經過「{{@aa}}」或「ms-text」屬性直接進行綁定（avalon有個「賣」點就是「改變model及改變View」,其實就是經過虛擬DOM的特性實時監聽變化達到局部更新視圖的效果，因此咱們項目中必不可少的會有不少種狀態--這點相似於React裏的'狀態機'，須要合理去搭配使用。）
例如常見的Tab頁切換：
html:前端

<ul>
          <li ms-click="@checkSearch(1)" ms-attr="[@active==1 ? {'class':'active'} : {'class':'unactive'}]">Tab1</li>
          <li ms-click="@checkSearch(2)" ms-attr="[@active==2 ? {'class':'active'} : {'class':'unactive'}]">Tab2</li>
        </ul>

js：後端

var searchNav = avalon.define({
        $id: "searchNavCtrl",
        active: 1,
        checkSearch: function(indx) {
          if (indx == 1) {
            this.active = 1;
          } else {
            this.active = 2;
          }
        }
      });

只要上述幾行代碼就能夠搞定這個功能，比起原先直接操做DOM要方面的許多。架構

根據上述代碼不難發現avalon是已’ms-‘字符開頭做爲屬性名稱的，經常使用的屬性以下：
框架

當多個屬性並行時建議使用已下寫法（一些保留字節屬性須要加單引號如id,class等，爲了統一格式建議所有加上）：前後端分離

<li  ms-attr="[{'pval':pd.proid},{'issingle':pd.isSingle}, {'id': pd.proid}, {'index': pd.position}, pd.position>0 ? {'class':'productmsg childOption'}:{'class': 'productmsg'}]" ms-click="@showHideIncome(pd,$event)" ms-mouseenter="@showChildEnter($event)" ms-mouseleave="@showLeaveEnter($event)" ms-for="($index,pd) in item.data_list">

未完待續......ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。