前端框架對比之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交互，及性能優化方面繼續和你們探討這兩款看似類似又有很大不一樣的前端框架。本文純屬我的經驗，若有不對的地方，歡迎指正。