前端框架對比之vue與regular(一)

每次一寫到Regular總是忍不住先介紹一下，Regualr是網易杭州研究所的一位叫鄭海波的大神寫的一款前端框架，目前 
這款框架推廣的不深，加上其和angular過於相似的框架名，導致接受力並不大，其實Regular這款框架在我 
看來已經很完善了。在網易呆了一段時間，寫的幾個項目都是用的Regualr,在之前我主要是用vue比較多， 
所以開發過程中總忍不住將這兩個框架進行對比。本文主要對實際開發代碼進行對比，我個人是認為各有千秋，具體的請大家自行判斷。

 一.插值

    1）文本插值：
        regular和vue的插值方法並沒有什麼區別
        vue: 不過vue預設以{{Expression}}的形式展現
        regular:而regular則以{Expression}的形式展現，目前可以用下麵的方法更改開閉符號

Regular.config({
  'BEGIN': '{{',
  'END': '}}'
})

    2）屬性插值：

       vue:應用v-bind指令，如下把id這個屬性用v-bind:的形式綁定到div上，屬性值動態從data中獲取

<div v-bind:id="dynamicId"></div>

      regular:與文本插值一樣的寫法，｛｝里代表從data中動態獲取的數據

<div id="{dynamicId}"></div>

    3）插入表達式

        vue:

<div v-bind:id=" 'list-' +id"></div>

        regular:

<div id="list-{id}"></div>

效果都是給div一個以list-開始的id

      vue:

<div>{{ message.split('').reverse().join('') }}</div>

      regular:

<div>{ message.split('').reverse().join('') }</div>

二：指令

regular:以r-為首碼的特殊屬性，regular中最常使用的是r-hide以及r-show

vue:以v-為首碼的特殊屬性，vue對指令的使用要頻繁的多，基本上處處指令，如v-if/v-bind/v-on,v-if用來判斷是否渲染，v-bind用來響應的更新html屬性，v-on則用來監聽事件

下麵會對一些指令的用法進行詳細的解釋

三：關於條件渲染

regular:用｛#if 判斷語句｝｛#elseif 判斷語句｝ ｛#else ｝ {/if}的形式進行條件渲染

 {#if load == 1}
       <div>上拉載入更多</div>
    {#elseif load == 2}
       <div class="loading">正在載入</div>
    {#elseif load == 3}   
       <div>以上為所有內容</div>
    {/if}

其中load是在data中定義的

vue:用<div v-if="判斷語句"></div><div v-elseif="判斷語句"></div><div v-else="判斷語句"></div>的形式進行條件渲染

<div v-if="load ==='1' ">
         上拉載入更多
</div>
<div v-else-if="load ==='2">
          正在載入
</div>
<div v-else>
以上為所有內容
</div>

其中load為data中定義的。

四：關於列表渲染

regular:regular中用｛#list 列表 as ｝｛/list｝的形式進行渲染

{#list attendanceList as att}
         <div class="wrap">
            <div class="item">
                <p class="time">{att.dataTime}</p>
                 <p class="address">
                    <span class="u-icon u-icon-loc"></span>
                    {att.location}
                 </p>
              </div>
           </div>
{/list}

vue:vue中用<div v-for="變數 in 列表"></div>的形式渲染

<ol>
   <li v-for="todo in todos">
          {{todo.text}}
    </li>
</ol>

五：v-if/v-show和{#if}/r-show的區別

v-if和｛#if｝ 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

同時他們 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下， v-show 和 r-show就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說， v-if/{#if} 有更高的切換開銷，而 v-show/r-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show/r-show 較好；如果在運行時條件不太可能改變，則使用 v-if /{/if}較好。

六：對比兩者js文件區別

vue:

          var app4 = new Vue({
                el:'#app4',
                data:{
                   message:'Hello',
                   number:[1,2,3,4,5]
                },
                computed:{
                    reversedMessage:function(){
                        return this.message.split('').reserve()
                    }
                },
                methods:{
                    even:function(number){
                         return number.filter(function(number){
                              return number%2 === 0
                          })
                    }
                }

            });
            app4.todos.push({text:"444"})

在此例中可以看出進行操作的是#app4模版，data里為#app模塊需要用到的數據，method為模塊用到的方法,computed為計算屬性，調用時可直接用｛｛reversedMessage｝｝調用。

regular:

      data: {
            currentDate: ''
            
        },
        init: function() {
             this.data.currentDate = 1;
             this.setdata();
        },
        setdata: function(){
            this.data.currentDate = 2;
             alert(  this.data.currentDate);
         }

簡單的regular應用主要由上面幾個部分解決，data中寫全局的數據，init是初始化執行的函數，可以把頁面初始化就要更改的數據，方法在此函數中更改和引用。setdata:function為自定義函數。

本文就說這些了，下一篇我會從組件，ajax交互，及性能優化方面繼續和大家探討這兩款看似相似又有很大不同的前端框架。本文純屬個人經驗，如有不對的地方，歡迎指正。

---恢復內容結束---

每次一寫到Regular總是忍不住先介紹一下，Regualr是網易杭州研究所的一位叫鄭海波的大神寫的一款前端框架，目前 
這款框架推廣的不深，加上其和angular過於相似的框架名，導致接受力並不大，其實Regular這款框架在我 
看來已經很完善了。在網易呆了一段時間，寫的幾個項目都是用的Regualr,在之前我主要是用vue比較多， 
所以開發過程中總忍不住將這兩個框架進行對比。本文主要對實際開發代碼進行對比，我個人是認為各有千秋，具體的請大家自行判斷。

 一.插值

    1）文本插值：
        regular和vue的插值方法並沒有什麼區別
        vue: 不過vue預設以{{Expression}}的形式展現
        regular:而regular則以{Expression}的形式展現，目前可以用下麵的方法更改開閉符號

Regular.config({
  'BEGIN': '{{',
  'END': '}}'
})

    2）屬性插值：

       vue:應用v-bind指令，如下把id這個屬性用v-bind:的形式綁定到div上，屬性值動態從data中獲取

<div v-bind:id="dynamicId"></div>

      regular:與文本插值一樣的寫法，｛｝里代表從data中動態獲取的數據

<div id="{dynamicId}"></div>

    3）插入表達式

        vue:

<div v-bind:id=" 'list-' +id"></div>

        regular:

<div id="list-{id}"></div>

效果都是給div一個以list-開始的id

      vue:

<div>{{ message.split('').reverse().join('') }}</div>

      regular:

<div>{ message.split('').reverse().join('') }</div>

二：指令

regular:以r-為首碼的特殊屬性，regular中最常使用的是r-hide以及r-show

vue:以v-為首碼的特殊屬性，vue對指令的使用要頻繁的多，基本上處處指令，如v-if/v-bind/v-on,v-if用來判斷是否渲染，v-bind用來響應的更新html屬性，v-on則用來監聽事件

下麵會對一些指令的用法進行詳細的解釋

三：關於條件渲染

regular:用｛#if 判斷語句｝｛#elseif 判斷語句｝ ｛#else ｝ {/if}的形式進行條件渲染

 {#if load == 1}
       <div>上拉載入更多</div>
    {#elseif load == 2}
       <div class="loading">正在載入</div>
    {#elseif load == 3}   
       <div>以上為所有內容</div>
    {/if}

其中load是在data中定義的

vue:用<div v-if="判斷語句"></div><div v-elseif="判斷語句"></div><div v-else="判斷語句"></div>的形式進行條件渲染

<div v-if="load ==='1' ">
         上拉載入更多
</div>
<div v-else-if="load ==='2">
          正在載入
</div>
<div v-else>
以上為所有內容
</div>

其中load為data中定義的。

四：關於列表渲染

regular:regular中用｛#list 列表 as ｝｛/list｝的形式進行渲染

{#list attendanceList as att}
         <div class="wrap">
            <div class="item">
                <p class="time">{att.dataTime}</p>
                 <p class="address">
                    <span class="u-icon u-icon-loc"></span>
                    {att.location}
                 </p>
              </div>
           </div>
{/list}

vue:vue中用<div v-for="變數 in 列表"></div>的形式渲染

<ol>
   <li v-for="todo in todos">
          {{todo.text}}
    </li>
</ol>

五：v-if/v-show和{#if}/r-show的區別

v-if和｛#if｝ 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

同時他們 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下， v-show 和 r-show就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說， v-if/{#if} 有更高的切換開銷，而 v-show/r-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show/r-show 較好；如果在運行時條件不太可能改變，則使用 v-if /{/if}較好。

六：對比兩者js文件區別

vue:

          var app4 = new Vue({
                el:'#app4',
                data:{
                   message:'Hello',
                   number:[1,2,3,4,5]
                },
                computed:{
                    reversedMessage:function(){
                        return this.message.split('').reserve()
                    }
                },
                methods:{
                    even:function(number){
                         return number.filter(function(number){
                              return number%2 === 0
                          })
                    }
                }

            });
            app4.todos.push({text:"444"})

在此例中可以看出進行操作的是#app4模版，data里為#app模塊需要用到的數據，method為模塊用到的方法,computed為計算屬性，調用時可直接用｛｛reversedMessage｝｝調用。

regular:

      data: {
            currentDate: ''
            
        },
        init: function() {
             this.data.currentDate = 1;
             this.setdata();
        },
        setdata: function(){
            this.data.currentDate = 2;
             alert(  this.data.currentDate);
         }

簡單的regular應用主要由上面幾個部分解決，data中寫全局的數據，init是初始化執行的函數，可以把頁面初始化就要更改的數據，方法在此函數中更改和引用。setdata:function為自定義函數。

本文就說這些了，下一篇我會從組件，ajax交互，及性能優化方面繼續和大家探討這兩款看似相似又有很大不同的前端框架。本文純屬個人經驗，如有不對的地方，歡迎指正。